1. 程式人生 > >純bootstrap寫的後臺管理頁面

純bootstrap寫的後臺管理頁面

前一段時間在網上找bootstrap寫的後臺管理系統的模板,可是發現大多都是bootstrap+js寫的,而且太過於複雜,所以就自己動手寫了一個,寫的不好,勿噴

index.html程式碼

<!DOCTYPE HTML>
<html>
  <head>
    <title>後臺管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
     <div class="container">
       <div class="row clearfix">
         <div class="col-md-12 column">
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
               <div class="navbar-header">
                 <a class="navbar-brand" href="#">後臺管理系統</a>
               </div>
           </nav>
           <br />
           <br />
   <br />
           <div class="row clearfix">
              <div class="col-md-12 column" >
                 <div class="col-md-3" style="float: left;margin-left: -10%">
                     <div class="list-group" style="float: left">
                        <a target="fname" href="main/index1.html" class="list-group-item"><span class="glyphicon glyphicon-home"></span>頁面一</a><br>
                        <a target="fname" href="main/index2.html" class="list-group-item"><span class="glyphicon glyphicon-file"></span>頁面二</a><br>
                        <a target="fname" href="main/index3.html" class="list-group-item"><span class="glyphicon glyphicon-user"></span>頁面三</a><br>
                        <a target="fname" href="main/index4.html" class="list-group-item"><span class="glyphicon glyphicon-off"></span>頁面四</a><br>
                     </div>
                  </div>
                  <div class="col-md-8 column" style="width:75%;">
                       <iframe name="fname"  frameborder="false" style="background-color: red;margin-left:-20%;" width="145%" height="540px"></iframe>
                  </div>
               </div>
            </div>
          </div>
        </div>
     </div>
  </body>
</html>

原始碼地址:bootstrap後臺管理系統模板