纯bootstrap写的后台管理页面

最新推荐文章于 2025-10-05 14:42:56 发布

原创最新推荐文章于 2025-10-05 14:42:56 发布 · 1.1w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #html #源码

Web前端同时被 2 个专栏收录

3 篇文章

订阅专栏

bootstrap

1 篇文章

订阅专栏

博主分享了自己使用Bootstrap构建的简单后台管理页面，旨在提供一个不依赖复杂JS的模板。文章包含一个index.html的代码示例。

前一段时间在网上找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后台管理系统模板