你的位置:首页 > 网页设计

[网页设计]Bootstrap_导航


一、标签形tab导航

  标签形导航,也称为选项卡导航。

  标签形导航是通过“.nav-tabs”样式来实现。在制作标签形导航时需要在原导航“.nav”上追加此类名。

<ul class="nav nav-tabs"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="disabled"><a href="##">Responsive</a></li></ul>

  我们想让“Home”项为当前选中项,只需要在其标签上添加类名".active”即可。

<ul class="nav nav-tabs">  <li class="active"><a href="##">Home</a></li>  …</ul>

  选项卡还带有禁用状态,只需要在标签项上添加".disabled”即可。

<ul class="nav nav-tabs">  <li class="disabled"><a href="##">Home</a></li>  …</ul>

 

二、胶囊形(pills)导航

  当前项高亮显示,并带有圆角效果。

  标签形导航是通过“.nav-pills”样式来实现。

<ul class="nav nav-pills"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="disabled"><a href="##">Responsive</a></li></ul>

 

三、垂直堆叠的导航

  制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可。

<ul class="nav nav-pills nav-stacked">   <li class="active"><a href="##">Home</a></li>   <li><a href="##">CSS3</a></li>   <li><a href="##">Sass</a></li>   <li><a href="##">jQuery</a></li>   <li class="disabled"><a href="##">Responsive</a></li></ul>

 

四、自适应导航

自适应导航指的是导航占据容器全部宽度,而且菜单项可以像表格的单元格一样自适应宽度。

只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。

<ul class="nav nav-tabs nav-justified">   <li class="active"><a href="##">Home</a></li>   <li><a href="##">CSS3</a></li>   <li><a href="##">Sass</a></li>   <li><a href="##">jQuery</a></li>   <li><a href="##">Responsive</a></li></ul>

 

五、导航加下拉菜单(二级导航)

  在Bootstrap框架中制作二级导航,只需要将li当作父容器,使用类名“dropdown”,同时在li中嵌套另一个列表ul。

<ul class="nav nav-pills"> <li class="active"><a href="##">首页</a></li> <li class="dropdown">  <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>  <ul class="dropdown-menu">   <li><a href="##">CSS3</a></li>   <li><a href="##">Sass</a></li>   <li><a href="##">jQuery</a></li>   <li><a href="##">Responsive</a></li>  </ul> </li> <li><a href="##">关于我们</a></li></ul>

 

六、面包屑式导航

  面包屑(Breadcrumb)一般用于导航,主要是起的作用是告诉用户现在所处页面的位置(当前位置)。

  在Bootstrap框架中面包屑也是一个独立模块组件。使用方式就很简单,为ol加入“breadcrumb”类。

<ol class="breadcrumb"> <li><a href="#">首页</a></li> <li><a href="#">我的书</a></li> <li class="active">《图解CSS3》</li></ol>