html
<!DOCTYPE html> <html> <!--1,lang="zh-cn"--> <head lang="zh-cn"> <meta charset="UTF-8"> <!--2,viewport--> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <!--3,x-ua-compatible--> <meta http-equiv="x-ua-compatible" content="IE=edge"/> <title></title> <!--4引入兩個兼容文件--> <!--[if lt IE 9]> <script src="../../../resources/bootstrap/js/html5shiv.min.js"></script> <script src="../../../resources/bootstrap/js/respond.min.js"></script> <!--<![endif]–>--> <!--6引入bootstrap.css--> <link rel="stylesheet" href="../../../resources/bootstrap/css/bootstrap.min.css"/> <!--導航頭部樣式必須引入--> <link rel="stylesheet" href="navbar.css"> </head> <body> <div class="header"> <div class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <div class="navbar-brand" href="#"> <img src="../icons/logo.png" alt=""> <h3>人民檢察院審訊指揮系統</h3> </div> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_logo"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!--小屏幕下拉顯示--> <div class="collapse navbar-collapse navbar-right" id="nav_logo"> <div class="navbar-left"> <span>上午好</span>, <span>developer</span> <img src="../icons/developer.png" alt=""> </div> <ul class="nav navbar-nav navbar-right"> <li> <a href="#"> <span class="glyphicon glyphicon-question-sign"></span> 幫助 </a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"> <span class="glyphicon glyphicon-cog"></span> 系統 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="">用戶</a></li> <li><a href="">角色</a></li> <li><a href="">菜單</a></li> <li><a href="">部門</a></li> <li><a href="">設備</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"> <span class="glyphicon glyphicon-user"></span> 用戶信息 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="">退出登錄</a></li> </ul> </li> </ul> </div> </div> </div> </div> <div style="margin-top: 200px"> <h1>使用說明：</h1> <p> 1：demo樣式均來自navbar.css,無任何內聯樣式，運用時可自行設置 <br> 2：class除了.header都來自bootstrap框架,可自行添加編寫class，但儘量不要刪除，更改已經寫好的class <br> 3：html結構不要改變，圖標可自行更換，注意路徑的調整 <br> 4：文件引入時，自行更改路徑 <br> 5:css樣式更改只需更改變量參數 <img src="../icons/revise.png" alt=""> </p> </div> <!--引入jquery,bootstrap js--> <script src="../../../resources/bootstrap/js/jquery-1.11.3.js"></script> <script src="../../../resources/bootstrap/js/bootstrap.min.js"></script> </body> </html>less
.header{ @bg_color:#337AB7; @logo_color:#fff; @logo_font_size:30px; @text_color:#fff; @text_font_size:20px; @header_height:90px; @menu_width:160px; @li_active_bg_color:#e4393c; @li_active_text_color:#000; @a_color:#fff; a{ color: @a_color; background-color:@bg_color; } .navbar{ background: @bg_color; color:@a_color!important; margin: 0; .container-fluid{ height:@header_height; .navbar-header{ height: 100%; .navbar-brand{ padding: 0; height: 100%; clear: both; vertical-align: middle; img{ height: @header_height; float: left; padding:15px; } h3{ color:@logo_color; float: left; font-size:@logo_font_size ; line-height:@header_height; margin: 0; } } } //小屏幕下拉顯示內容 .navbar-collapse{ height: 100%; div{ height: @header_height; line-height: @header_height; span{ font-size: @text_font_size; } } /*小屏幕下拉顯示內容*/ ul{ height:@header_height; //toplist li{ width: @menu_width; height: 100%; text-align: center; a{ display: block; height: 100%; color:@a_color; line-height: @header_height; padding: 0!important; font-size: @text_font_size; &:focus{ color:@li_active_text_color; background: @li_active_bg_color; } } //dropdownlist ul.dropdown-menu{ width: @menu_width; padding:0 !important; border:none !important; //dropdown item li{ height: 100%; a{ display: block; height: 100%; color:@a_color; line-height: @header_height; padding: 0; font-size: @text_font_size; &:focus{ color:@li_active_text_color; background: @li_active_bg_color; } &:hover{ color:@li_active_text_color; background: @li_active_bg_color; } } } } } } } } } }