bootstrap导航栏navbar的demo

最新推荐文章于 2023-12-18 23:41:14 发布

github_39274378

最新推荐文章于 2023-12-18 23:41:14 发布

阅读量1k

点赞数

分类专栏： bootstrap 文章标签： bootstrap web navbar

本文链接：https://blog.csdn.net/github_39274378/article/details/77369063

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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]&ndash;&gt;-->
 <!--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;
         }
        }
       }
      }
     }
    }
   }
  }
 }
}

github_39274378

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap导航栏navbar的demo

htmlhtml>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=e
复制链接

扫一扫

专栏目录