Bootstrap导航

前方的话

  导航对于一个人前端人士来说并不面生。能够说导航是一个网站根本的成分组件之一,便于用户查找网站所提供的各种成效服务。本文将详细介绍Bootstrap导航

 

基础样式

  Bootstrap框架中创建导航条首要通过“.nav”样式。暗中同意的“.nav”样式不提供暗许的导航样式,必须叠加别的2个样式才会有效,比如“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”制作的自适应按钮组是一致的。只可是在制作自适应导航时更换了另3个类名“nav-justified”。当然需求和“nav-tabs”恐怕“nav-pills”协作在联合署名利用

  在超过 768px
的显示屏上,通过 .nav-justified 类能够很简单的让标签页或胶囊式标签突显出同等宽度。在小显示屏上,导航链接显示堆叠样式

  完成原理并简单,列表(<ul>)上设置宽度为“百分之百”,然后各样菜单项(<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> 

 

相关文章