bootstrap导航栏navbar的demo

html

html>
<html>

<head lang="zh-cn">
 <meta charset="UTF-8">
 
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
 
 <meta http-equiv="x-ua-compatible" content="IE=edge"/>
 <title>title>
 
 
 
 <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 navigationspan>
     <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>developerspan>
     <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>
  1demo样式均来自navbar.css,无任何内联样式,运用时可自行设置
  <br>
  2class除了.header都来自bootstrap框架,可自行添加编写class,但尽量不要删除,更改已经写好的class
  <br>
  3html结构不要改变,图标可自行更换,注意路径的调整
  <br>
  4:文件引入时,自行更改路径
  <br>
  5:css样式更改只需更改变量参数
  <img src="../icons/revise.png" alt="">
 p>
div>


<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;
         }
        }
       }
      }
     }
    }
   }
  }
 }
}

你可能感兴趣的:(bootstrap)