Bootstrap响应式前端框架笔记十——导航栏相关组件（二）

除了默认的导航栏组件，Bootstrap中还支持自定义导航条，使用navbar类可以创建导航条容器，其内可以布局图标，文本，按钮和表单等，示例如下：

 <p>自定义导航条</p>

 <nav class="navbar navbar-default">

  <div class="container">

   <div class="navbar-header">

    <a class="navbar-brand"><img src="image/icon.png" width="20px" /></a>

   </div>

   <form class="navbar-form navbar-left">

    <div class="form-group">

     <input type="text" class="form-control" placeholder="Search">

    </div>

    <button class="btn btn-default">Search</button>

   </form>

   <button class="btn btn-warning navbar-btn navbar-left">提示</button>

   <p class="navbar-text">导航文本</p>

  </div>

 </nav>

效果如下图：

使用navbar-fixed-top类或者navbar-fixed-bottom类可以将导航条固定在顶部或底部，示例如下：

<p>将导航栏固定在顶部</p>

 <nav class="navbar navbar-default navbar-fixed-top">

  <div class="container">

   <div class="navbar-header">

    <a class="navbar-brand"><img src="image/icon.png" width="20px" /></a>

   </div>

   <form class="navbar-form navbar-left">

    <div class="form-group">

     <input type="text" class="form-control" placeholder="Search">

    </div>

    <button class="btn btn-default">Search</button>

   </form>

   <button class="btn btn-warning navbar-btn navbar-left">提示</button>

   <p class="navbar-text">导航文本</p>

  </div>

 </nav>

 <hr />

 <p>将导航栏固定在底部</p>

 <nav class="navbar navbar-default navbar-fixed-bottom">

  <div class="container">

   <div class="navbar-header">

    <a class="navbar-brand"><img src="image/icon.png" width="20px" /></a>

   </div>

   <form class="navbar-form navbar-left">

    <div class="form-group">

     <input type="text" class="form-control" placeholder="Search">

    </div>

    <button class="btn btn-default">Search</button>

   </form>

   <button class="btn btn-warning navbar-btn navbar-left">提示</button>

   <p class="navbar-text">导航文本</p>

  </div>

 </nav>

使用navbar-inverse类可以将导航条进行反色处理，示例如下：

 <p>将导航条进行反色处理</p>

 <nav class="navbar navbar-default navbar-inverse">

  <div class="container">

   <div class="navbar-header">

    <a class="navbar-brand"><img src="image/icon.png" width="20px" /></a>

   </div>

   <form class="navbar-form navbar-left">

    <div class="form-group">

     <input type="text" class="form-control" placeholder="Search">

    </div>

    <button class="btn btn-default">Search</button>

   </form>

   <button class="btn btn-warning navbar-btn navbar-left">提示</button>

   <p class="navbar-text">导航文本</p>

  </div>

 </nav>

效果如下图：

   Bootstrap也支持进行路径导航的创建，其需要使用有序列表配合breadcrumb类，示例如下：

 <p>进行路径导航的创建</p>

 <ol class="breadcrumb">

  <li>

   <a href="#">主页</a>

  </li>

  <li>

   <a href="#">新闻列表</a>

  </li>

  <li class="active">国际新闻</li>

 </ol>

效果如下图：