Bootstrap导航栏

时间：2017-02-05 10:45:23 阅读：208 评论：0 收藏：0 [点我收藏+]

Bootstrap中导航栏在应用和网站中作为导航页头的响应式基础组件。导航栏在移动设备视图中是折叠的，随着设备可用视口宽度的增加，导航栏也会水平展开。在Bootstrap中导航栏包含了基本的预定义类和钩子。

一、基本导航栏

创建一个默认导航栏的步骤如下：

<nav>元素中添加.navbar .navbar-default;
<nav>元素中添加role="navigation",增加可访问性；
向 <div> 元素添加一个标题 .navbar-header，内部包含了带有.navbar-brand 的 <a> 元素。这会让文本看起来更大一号；
在<div>元素中添加带有.nav .navbar-nav的无序列表；

实例，包含下拉菜单：

<nav class="navbar navbar-default" role="navigation">
             <div class="navbar-header">
                 <a class="navbar-brand" href="#">城市</a>
             </div>
             <div>
                 <ul class="nav navbar-nav">
                     <li><a href="#">北京</a></li>
                     <li><a href="#">上海</a></li>
                     <li>
                         <a href="#"  data-toggle="dropdown">
                             武汉<b class="caret"></b>
                         </a>
                         <ul class="dropdown-menu">
                             <li><a href="#">黄鹤楼</a></li>
                             <li><a href="#">长江大桥</a></li>
                             <li><a href="#">江滩</a></li>
                             <li class="divider"></li>
                             <li><a href="#">归元寺</a></li>
                         </ul>
                     </li>
                     <li><a href="#">成都</a></li>
                 </ul>
             </div>
         </nav>

实例结果：

技术分享

二、响应式导航栏

为了给导航栏添加响应式特性，只需在基础导航栏上加以改进：

折叠起来的导航栏其实是一个按钮元素<button>；
<button>中添加.navbar-toggle、两个钩子——data-toggle="collapse"、data-target="";
三个带有 .icon-bar 的 <span> 创建所谓的汉堡按钮;
折叠的内容放在带有.collapse .navbar-collapse的<div>中；

实例：

<nav class="navbar navbar-default" role="navigation">
             <div class="navbar-header">
                 <button class="navbar-toggle" data-toggle="collapse" data-target="#example">
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
                 <a class="navbar-brand" href="#">城市</a>
             </div>
             <div class="collapse navbar-collapse" id="example">
             
                 <ul class="nav navbar-nav">
                     <li><a href="#">北京</a></li>
                     <li><a href="#">上海</a></li>
                     <li>
                         <a href="#"  data-toggle="dropdown">
                             武汉<b class="caret"></b>
                         </a>
                         <ul class="dropdown-menu">
                             <li><a href="#">黄鹤楼</a></li>
                             <li><a href="#">长江大桥</a></li>
                             <li><a href="#">江滩</a></li>
                             <li class="divider"></li>
                             <li><a href="#">归元寺</a></li>
                         </ul>
                     </li>
                     <li><a href="#">成都</a></li>
                 </ul>
                 
                 <ul class="nav navbar-nav navbar-right">
                     <li><a href="#"><span class="glyphicon glyphicon-user"></span>注册</a></li>
                     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>登录</a></li>
                 </ul>
                 
             </div>
         </nav>