bootstrap完整左侧导航栏代码及结果样式

深藏阁楼爱情的钟 2022-05-29 21:06 220阅读 0赞

如下是我写的基于bootstrap的左侧导航栏，代码如下：

此demo所需的js和css插件链接[点击打开链接][Link 1]

1、left.html

<div class="media user-media well-small">  
                <a class="user-link" href="\#">  
                    <img class="media-object img-thumbnail user-img" alt="User Picture" src="../assets/img/touxiang\_small.png" />  
                </a>  
                <br />  
                <div class="media-body">  
                    <h5 class="media-heading"> $\{username\}</h5>  
                    <ul class="list-unstyled user-info">  
                          
                        <li>  
                             <a class="btn btn-success btn-xs btn-circle" style="width: 10px;height: 12px;"></a> Online  
                             
                        </li>  
                         
                    </ul>  
                </div>  
                <br />  
            </div>  
  
<ul id="menu" class="collapse">  
  
  
                  
                  
  
  
<\#list menuList as menu>  
  
<li class="panel ">  
                    <a href="\#" data-parent="\#menu" data-toggle="collapse" class="accordion-toggle"  id="menuId$\{menu\_index+1\}" οnclick="showMenuList($\{menu\_index+1\})">  
                        <i class="icon-folder-open-alt"> </i> $\{menu.menuName\}       
     
                          
                    </a>  
                    <ul class="collapse" id="component-nav">  
                         
                       <\#list menu.subMenu as menuList>  
                          
                        <li class=""><a  state="$\{menuList.menuUrl\}" οnclick="changeIframe(this)"><i class="icon-angle-right"></i> $\{menuList.menuName\} </a></li>  
    </\#list>  
                    </ul>  
                </li>  
    </\#list>  
            </ul>  
        </div>

2、index.html

<head>  
    <meta charset="UTF-8" />  
    <title>\*\*\*\*\*\*\*\*\*\*足疗保健\_哈哈哈</title>  
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />  
<meta content="" name="description" />  
<meta content="" name="author" />  
       
    <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.css" />  
    <link rel="stylesheet" href="assets/plugins/css/main.css" />  
    <link rel="stylesheet" href="assets/plugins/css/theme.css" />  
    <link rel="stylesheet" href="assets/plugins/css/MoneAdmin.css" />  
    <link rel="stylesheet" href="assets/plugins/Font-Awesome/css/font-awesome.css" />  
      
  
  
      
    <link href="assets/plugins/css/layout2.css" rel="stylesheet" />  
    <link href="assets/plugins/flot/examples/examples.css" rel="stylesheet" />  
    <link rel="stylesheet" href="assets/plugins/timeline/timeline.css" />  
</head>  
      
      
<body class="padTop53 " >  
      
    <div id="wrap" >  
<\#include "top.html"/>  
  
       <\#include "left.html"/>  
  
<div id="content">  
 <iframe id="content\_iframe" src="default"  class="inner">  
   
 </iframe>   
</div>  
      
<\#include "right.html"/>  
</div>  
  
<\#include "footer.html"/>  
      
      
    <script src="assets/plugins/jquery-2.0.3.min.js"></script>  
     <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>  
    <script src="assets/plugins/modernizr-2.6.2-respond-1.1.0.min.js"></script>  
      
  
  
      
    <script src="assets/plugins/flot/jquery.flot.js"></script>  
    <script src="assets/plugins/flot/jquery.flot.resize.js"></script>  
    <script src="assets/plugins/flot/jquery.flot.time.js"></script>  
    <script  src="assets/plugins/flot/jquery.flot.stack.js"></script>  
    <script src="assets/plugins/js/for\_index.js"></script>  
    <script>  
         
    function changeIframe(obj) \{  
       var url = $(obj).attr('state');  
       $("\#content\_iframe").attr("src",url)  
       \}  
    function showMenuList(menuId)\{  
      
    var classValue = $("\#menuId"+menuId).parent().find("ul").attr("class");  
    if(classValue == 'collapse')\{  
    $("\#menu").find("li").find("ul").attr("class","collapse");  
    $("\#menuId"+menuId).parent().find("ul").attr("class","in");  
    \}  
    if(classValue == 'in')\{  
    $("\#menuId"+menuId).parent().find("ul").attr("class","collapse");  
    \}  
      
      
    \}  
       </script>  
</body>  
</html>

3、right.html

<div id="right">  
  
  
  
<div class="well well-small">  
<ul class="list-unstyled">  
<li>在线用户 &nbsp; : <span>23,000</span></li>  
<li>系统注册用户 &nbsp; : <span>53,000</span></li>  
<li>总注册企业 &nbsp; : <span>3,000</span></li>  
</ul>  
</div>  
  
<div class="well well-small">  
<span>CPU占用率</span><span class="pull-right"><small>$\{serverMessage.cpuRate\}%</small></span>  
  
  
<div class="progress mini">  
<div class="progress-bar progress-bar-info" style="width: $\{serverMessage.cpuRate\}%"></div>  
</div>  
<span>内存使用率</span><span class="pull-right"><small>$\{serverMessage.memoryRate\}%</small></span>  
  
  
<div class="progress mini">  
<div class="progress-bar progress-bar-success" style="width: $\{serverMessage.memoryRate\}%"></div>  
</div>  
<span>线程数</span><span class="pull-right"><small>$\{serverMessage.getThreadCount\}个</small></span>  
  
  
<div class="progress mini">  
<div class="progress-bar progress-bar-warning" style="width: $\{serverMessage.getThreadCount\}%"></div>  
</div>  
<span>温馨提示：以上数据都是基于jvm级别,本次数据刷新时间$\{serverMessage.lastTime?string('yyyy-MM-dd HH:mm:ss')\}</span><span class="pull-right"></span>  
  
</div>  
</div>

4、footer.html

<div id="footer">  
        <p>&copy;  binarytheme &nbsp;\*\*\*足疗保健  2018 &nbsp;</p>

</div>

5、top.html

<div id="top">  
  
  
            <nav class="navbar navbar-inverse navbar-fixed-top " style="padding-top: 10px;">  
                <a data-original-title="Show/Hide Menu" data-placement="bottom" data-tooltip="tooltip" class="accordion-toggle btn btn-primary btn-sm visible-xs" data-toggle="collapse" href="\#menu" id="menu-toggle">  
                    <i class="icon-align-justify"></i>  
                </a>  
                  
                <header class="navbar-header">  
  
  
                    <a href="index.html" class="navbar-brand">  
                    <img src="../assets/img/logo\_kunfind\_small.png" alt="" />  
                          
                        </a>  
                </header>  
  
  
                <ul class="nav navbar-top-links navbar-right">  
  
  
                      
                    <li class="dropdown">  
                        <a class="dropdown-toggle" data-toggle="dropdown" href="\#">  
                            <span class="label label-success">2</span>    <i class="icon-envelope-alt"></i>&nbsp; <i class="icon-chevron-down"></i>  
                        </a>  
  
  
                         <ul class="dropdown-menu dropdown-messages">  
                            <li>  
                                <a href="\#">  
                                    <div>  
                                       <strong>我的企业</strong>  
                                        <span class="pull-right text-muted">  
                                            <em>Today</em>  
                                        </span>  
                                    </div>  
                                    <div>\*\*足疗保健  
                                        <br />  
                                        <span class="label label-primary">公司信息</span>   
  
  
                                    </div>  
                                </a>  
                            </li>  
                            <li class="divider"></li>  
                            <li>  
                                <a href="\#">  
                                    <div>  
                                        <strong>我的消息</strong>  
                                        <span class="pull-right text-muted">  
                                            <em>Yesterday</em>  
                                        </span>  
                                    </div>  
                                    <div>服务器昨晚22:30分炸了  
                                         <br />  
                                        <span class="label label-success"> 详细信息 </span>   
                                    </div>  
                                </a>  
                            </li>  
                             
                        </ul>   
  
  
                    </li>  
                      
  
</ul>  
</nav>

</div>

![70][]

需要的js文件：

![70 1][]

需要的css文件：

![70 2][]

[Link 1]: http://download.csdn.net/download/goodlook0123/10268559
[70]: /images/20220530/1162c1e7501a4365b947558a086d7fae.png
[70 1]: /images/20220530/4014b1ec644f433bbabda72d0955f2ae.png
[70 2]: /images/20220530/013ac9f301164389aef4abf8f447a421.png