欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap源碼解讀導(dǎo)航（6）

 更新時間：2016年12月23日 08:34:50   作者：藝術(shù)就是爆炸  
這篇文章主要源碼解讀了Bootstrap導(dǎo)航，介紹了Bootstrap各式各樣的導(dǎo)航,具有一定的參考價值，感興趣的小伙伴們可以參考一下

源碼解讀Bootstrap導(dǎo)航

基礎(chǔ)樣式

制作導(dǎo)航條主要通過“.nav”樣式。默認(rèn)的“.nav”樣式不提供默認(rèn)的導(dǎo)航樣式，必須附加另外一個樣式才會有效，比如“nav-tabs”、“nav-pills”之類。例如：

<ul class="nav">
  <li><a href="##">1</a></li>
  <li><a href="##">2</a></li>
  <li><a href="##">3</a></li>
</ul>

實現(xiàn)源碼：

.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;
}

標(biāo)簽形tab導(dǎo)航

原導(dǎo)航“nav”上追加“nav-tabs”類名即可，例如：<ul class="nav nav-tabs">...</ul>。
實現(xiàn)原理是將菜單項（li）按塊顯示，并且讓他們在同一水平上排列，然后定義非高亮菜單的樣式和鼠標(biāo)懸浮效果。實現(xiàn)源碼如下：

.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li >a:hover {
border-color: #eee #eee #ddd;
}

要讓哪個項是選中項，只需要在其標(biāo)簽上添加類名“class=”active”即可。
實現(xiàn)源碼如下：

.nav-tabs >li.active> a,
.nav-tabs >li.active>a:hover,
.nav-tabs >li.active>a:focus {
 color: #555;
 cursor: default;
 background-color: #fff;
 border: 1px solid #ddd;
 border-bottom-color: transparent;
}

要讓哪個項禁用，只需要在標(biāo)簽項上添加“class=”disabled”即可。實現(xiàn)源碼如下：

.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;
}

膠囊形pills導(dǎo)航

原導(dǎo)航“nav”上追加“nav-pills”類名即可，例如：<ul class="nav nav-pills">...</ul>。
實現(xiàn)源碼如下：

.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;
}

垂直導(dǎo)航

制作垂直堆疊導(dǎo)航只需要在“nav-pills”的基礎(chǔ)上添加一個“nav-stacked”類名即可。例如：
<ul class="nav nav-pills nav-stacked">...</ul>
垂直導(dǎo)航與膠囊形導(dǎo)航相比，主要是讓導(dǎo)航項不浮動，讓其垂直排列，然后給相鄰導(dǎo)航項留有一定的間距。
實現(xiàn)源碼如下：

.nav-stacked > li {
 float: none;
}
.nav-stacked > li + li {
 margin-top: 2px;
 margin-left: 0;
}

要在導(dǎo)航項之間加分隔線，在導(dǎo)航項之間加<li class=”nav-divider”></li>即可。
實現(xiàn)源碼如下：

.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}

自適應(yīng)導(dǎo)航

在“nav”上追加一個“nav-justified”類名即可。例如：<ul class="nav nav-justified">
實現(xiàn)原理是，列表<ul>上設(shè)置寬度為“100%”，然后每個菜單項<li>設(shè)置了“display:table-cell”，讓列表項以模擬表格單元格的形式顯示。實現(xiàn)源碼如下：

.nav-justified {
 width: 100%;
}
.nav-justified > li {
 float: none;
}
.nav-justified > li > a {
 margin-bottom: 5px;
 text-align: center;
}
.nav-justified > .dropdown .dropdown-menu {
 top: auto;
 left: auto;
}
@media (min-width: 768px) {
 .nav-justified > li {
 display: table-cell;
 width: 1%;
 }
 .nav-justified > li > a {
 margin-bottom: 0;
 }
}

“nav-tabs”和“nav-justified”配合在一起使用就是自適應(yīng)選項卡導(dǎo)航，實現(xiàn)源碼如下：

.nav-tabs.nav-justified {
 width: 100%;
 border-bottom: 0;
}
.nav-tabs.nav-justified > li {
 float: none;
}
.nav-tabs.nav-justified > li > a {
 margin-bottom: 5px;
 text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
 top: auto;
 left: auto;
}
@media (min-width: 768px) {
 .nav-tabs.nav-justified > li {
 display: table-cell;
 width: 1%;
 }
.nav-tabs.nav-justified > li > a {
 margin-bottom: 0;
 }
}
.nav-tabs.nav-justified > li > a {
 margin-right: 0;
 border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
 border: 1px solid #ddd;
}
@media (min-width: 768px) {
 .nav-tabs.nav-justified > li > a {
 border-bottom: 1px solid #ddd;
 border-radius: 4px 4px 0 0;
 }
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
 border-bottom-color: #fff;
 }
}

“nav-pills”和“nav-justified”配合在一起使用就是自適應(yīng)膠囊型導(dǎo)航，原理同上。

導(dǎo)航加下拉菜單

導(dǎo)航加下拉菜單也就是二級導(dǎo)航，只需要將li當(dāng)作父容器，使用類名“dropdown”，同時在li中嵌套另一個列表ul下拉菜單即可。例如：

<ul class="nav nav-pills">
  <li><a href="##">首頁</a></li>
  <li class="dropdown">
    <a href="##" class="dropdown-toggle" data-toggle="dropdown">數(shù)字<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="##">1</a></li>
      <li><a href="##">2</a></li>
    </ul>
  </li>
  <li><a href="##">關(guān)于我們</a></li>
</ul>

面包屑式Breadcrumb導(dǎo)航

面包屑不需要使用“nav”，一般作用是告訴用戶現(xiàn)在所處頁面的位置。為ol加入“breadcrumb”類名即可。例如：

<ol class="breadcrumb">
 <li><a href="#">111</a></li>
 <li><a href="#">222</a></li>
 <li class="active">333</li>
</ol>

實現(xiàn)源碼如下：

.breadcrumb {
 padding: 8px 15px;
 margin-bottom: 20px;
 list-style: none;
 background-color: #f5f5f5;
 border-radius: 4px;
}
.breadcrumb > li {
 display: inline-block;
}
.breadcrumb > li + li:before {
 padding: 0 5px;
 color: #ccc;
 content: "/\00a0";
}
.breadcrumb > .active {
 color: #777;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論