Bootstrap教程 导航

Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的。改变修饰类可以改变样式。

在标签页上使用导航需要依赖 JavaScript 标签页插件,由于标签页需要控制内容区的展示,因此,你必须使用 标签页组件的 JavaScript 插件。

创建一个标签式的导航菜单:
以一个带有 class .nav 的无序列表开始。
添加 class .nav-tabs
下面的实例演示了这点:

  1. <ul class="nav nav-tabs">
  2.   <li role="presentation" class="active"><a href="#">Home</a></li>
  3.   <li role="presentation"><a href="#">Profile</a></li>
  4.   <li role="presentation"><a href="#">Messages</a></li>
  5. </ul>

如果需要把标签改成胶囊的样式,只需要使用 .nav-pills 代替 .nav-tabs 即可,其他的步骤与上面相同。

基本的胶囊式导航菜单
  1. <ul class="nav nav-pills">
  2.  <ul class="nav nav-pills">
  3.    <li class="active"><a href="#">Home</a></li>
  4.    <li><a href="#">SVN</a></li>
  5.    <li><a href="#">iOS</a></li>
  6.    <li><a href="#">VB.Net</a></li>
  7.    <li><a href="#">Java</a></li>
  8.    <li><a href="#">PHP</a></li>
  9. </ul>
  10. </ul>
垂直的胶囊式导航菜单

胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。

  1.   <ul class="nav nav-pills nav-stacked">
  2.    <li class="active"><a href="#">Home</a></li>
  3.    <li><a href="#">SVN</a></li>
  4.    <li><a href="#">iOS</a></li>
  5.    <li><a href="#">VB.Net</a></li>
  6.    <li><a href="#">Java</a></li>
  7.    <li><a href="#">PHP</a></li>
  8. </ul>

在大于 768px 的屏幕上,通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上,导航链接呈现堆叠样式。
下面的实例演示了这点:

  1.   <ul class="nav nav-pills nav-justified">
  2.    <li class="active"><a href="#">Home</a></li>
  3.    <li><a href="#">SVN</a></li>
  4.    <li><a href="#">iOS</a></li>
  5.    <li><a href="#">VB.Net</a></li>
  6.    <li><a href="#">Java</a></li>
  7.    <li><a href="#">PHP</a></li>
  8. </ul>
  9.  
  10. <ul class="nav nav-tabs nav-justified">
  11.    <li class="active"><a href="#">Home</a></li>
  12.    <li><a href="#">SVN</a></li>
  13.    <li><a href="#">iOS</a></li>
  14.    <li><a href="#">VB.Net</a></li>
  15.    <li><a href="#">Java</a></li>
  16.    <li><a href="#">PHP</a></li>
  17. </ul>

对任何导航组件(标签页、胶囊式标签页),都可以添加 .disabled 类,从而实现链接为灰色且没有鼠标悬停效果。
如下面的实例所示:


  1.  <ul class="nav nav-pills">
  2.    <li class="active"><a href="#">Home</a></li>
  3.    <li><a href="#">SVN</a></li>
  4.    <li class="disabled"><a href="#">iOS(禁用链接)</a></li>
  5.    <li><a href="#">VB.Net</a></li>
  6.    <li><a href="#">Java</a></li>
  7.    <li><a href="#">PHP</a></li>
  8. </ul>
  9. <ul class="nav nav-tabs">
  10.    <li class="active"><a href="#">Home</a></li>
  11.    <li><a href="#">SVN</a></li>
  12.    <li><a href="#">iOS</a></li>
  13.    <li  class="disabled"><a href="#">VB.Net(禁用链接)</a></li>
  14.    <li><a href="#">Java</a></li>
  15.    <li><a href="#">PHP</a></li>
  16. </ul>
带下拉菜单的标签页
  1.   <ul class="nav nav-tabs">
  2.    <li class="active"><a href="#">Home</a></li>
  3.    <li><a href="#">SVN</a></li>
  4.    <li><a href="#">iOS</a></li>
  5.    <li><a href="#">VB.Net</a></li>
  6.    <li class="dropdown">
  7.       <a class="dropdown-toggle" data-toggle="dropdown" href="#">Java <span class="caret"></span></a>
  8.       <ul class="dropdown-menu">
  9.          <li><a href="#">Swing</a></li>
  10.          <li><a href="#">jMeter</a></li>
  11.          <li><a href="#">EJB</a></li>
  12.          <li class="divider"></li>
  13.          <li><a href="#">分离的链接</a></li>
  14.       </ul>
  15.    </li>
  16.    <li><a href="#">PHP</a></li>
  17. </ul>
带下拉菜单的胶囊式标签页
  1.   <ul class="nav nav-pills">
  2.    <li class="active"><a href="#">Home</a></li>
  3.    <li><a href="#">SVN</a></li>
  4.    <li><a href="#">iOS</a></li>
  5.    <li><a href="#">VB.Net</a></li>
  6.    <li class="dropdown">
  7.       <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Java <span class="caret"></span> </a>
  8.       <ul class="dropdown-menu">
  9.          <li><a href="#">Swing</a></li>
  10.          <li><a href="#">jMeter</a></li>
  11.          <li><a href="#">EJB</a></li>
  12.          <li class="divider"></li>
  13.          <li><a href="#">分离的链接</a></li>
  14.       </ul>
  15.    </li>
  16.    <li><a href="#">PHP</a></li>
  17. </ul>

发布日期:

所属分类: BootStrap, 前端 标签:  


没有相关文章!