Bootstrap导航

面前的口舌

  导航对于同一号前端人员的话并无生。可以说导航是一个网站根本之因素组件有,便于用户查找网站所提供的号机能服务。本文将详细介绍Bootstrap导航

 

基础样式

  Bootstrap框架中做导航漫长主要通过“.nav”样式。默认的“.nav”样式不提供默认的领航样式,必须叠加另外一个体才会立竿见影,比如“nav-tabs”、“nav-pills”之类

  如果当运用导航组件实现导航条效益,务必于 <ul> 的无比外的逻辑父元素上上加 role="navigation" 属性,或者用一个 <nav> 元素包裹整个导航组件。不要拿
role
属性添加到 <ul> 上,因为这么好于拉设施(残疾人用的)上叫辨认为一个委的列表

.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav> li {
  position: relative;
  display: block;
}
.nav> li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav> li >a:hover,
.nav> li >a:focus {
  text-decoration: none;
  background-color: #eee;
}
.nav>li.disabled> a {
  color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
  color: #999;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}
.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
  background-color: #eee;
  border-color: #428bca;
}
.nav .nav-divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.nav> li > a >img {
  max-width: none;
}

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

 

选项卡

  标签形导航,也称选项卡导航。特别是在很多情节分块显示的常,使用这种选项卡来分组十分入。标签形导航是透过“nav-tabs”样式来促成。在打造标签形导航时需要以本导航“nav”上多此类名

  实现原理非常之略,将菜单项(li)按块显示,并且为他俩当同一档次及排列,然后定义非高亮菜单的体和鼠标悬浮效果

  一般情况下,选项卡会有一个即相中项。其实当Bootstrap框架为相应提供了,只需要以该标签上补偿加类名”active”。除了当前起以外,有的选择项卡还蕴含禁用状态,实现如此的功能,只待以标签项达到补偿加类名”disabled”

<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>

 

胶囊导航

  胶囊形(pills)导航听起来有些别扭,因为其外形看起有些像胶囊形状。但其又像咱平素收看的群众形导航。当前项高亮显示,并涵盖圆角作用。其落实方式以及“nav-tabs”类似,同样的构造,只待拿类名“nav-tabs”换成“nav-pills”即可

.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 4px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills >li.active> a,
.nav-pills >li.active>a:hover,
.nav-pills >li.active>a:focus {
color: #fff;
  background-color: #428bca;
}

<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-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>

 

起适应导航

  自适应导航指的凡导航占据容器全部小幅,而且菜单项可以像表的独自元格一样打适应宽度。自适应导航与前面使用“btn-group-justified”制作的打适应按钮组是同样的。只不过当制于适应导航时移了任何一个类名“nav-justified”。当然要以及“nav-tabs”或者“nav-pills”配合在一起使用

  于过 768px
的屏幕上,通过 .nav-justified 类可以死易的让标签页或胶囊式标签呈现出一致宽度。在微屏幕及,导航链接呈现堆叠样式

  实现原理并无为难,列表(<ul>)上安装宽度为“100%”,然后每个菜单项(<li>)设置了“display:table-cell”,让列表项为套表格单元格的花样展示

<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>

 

二级导航

  很多时节,在Web页面中距不上马二级导航的力量。在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">教程 </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)一般用来导航,主要意图是报告用户现在所处页面的岗位(当前位置),使用方式就挺简单,为ol加入breadcrumb类:

  面包屑导航(BreadcrumbNavigation)这个概念来童话故事”汉赛尔和格莱特”,当汉赛尔与格莱特穿过森林时,不小心迷路了,但是他们发觉以沿途走过的地方都落下了面包屑,让这些面包屑来协助她们找到回家之程。所以,面包屑导航的作用是告诉访问者他们目前在网站受的职位与如何回到

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">前端</a></li>
  <li class="active">CSS</li>
</ol> 

 

相关文章