bootstrap讀書(shū)筆記之CSS組件（上）

更新時(shí)間：2016年10月17日 08:50:46 作者：葡萄美酒夜光杯

這篇文章主要介紹了bootstrap讀書(shū)筆記之CSS組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

bootstrap三大核心之二。

包括glyphicon圖標(biāo)，下拉菜單（dropdown），按鈕組（button group）....等等。一. 圖標(biāo)字體

bootstrap3提供了200多個(gè)免費(fèi)圖標(biāo)字體。認(rèn)為它是一個(gè)字。

arial-hidden="true"

.sr-only（只讀）

1. 引入方法：

i標(biāo)簽是已經(jīng)廢棄了的html斜體標(biāo)簽。用span也可以。使用時(shí)必須基于glyphiconglyphicon-xxx兩個(gè)類的樣式。

2. 實(shí)現(xiàn)機(jī)制：

（1）雪碧技術(shù)：允許無(wú)損放大，減少圖片大小，減少網(wǎng)頁(yè)的請(qǐng)求次數(shù)。

把網(wǎng)頁(yè)的背景圖片整合到一張圖片中，利用背景定位顯示出來(lái)。

定位的是做上點(diǎn)坐標(biāo)，右邊為x軸負(fù)方向，左邊為y軸正方向。

background:url(路徑) no-repeat 0 0；

（2）@font-face，緩存自服務(wù)器，字體特性（如可設(shè)置顏色）。CSS3的在線字體引入寫(xiě)法是：

在CSS的最上面：導(dǎo)入第三方字體圖標(biāo)

@font-face{
 font:字體名稱;(自定義名稱，避開(kāi)網(wǎng)絡(luò)安全字名)
 src:url(字體文件路徑), url(字體文件路徑), url(字體文件路徑),…;}

@font-face至少.woff，.eot兩種格式的字體。一般還要加上SVG字體。

3.應(yīng)用

在button上應(yīng)用字體圖標(biāo)：

<button class="btn btn-default glyphicon glyphicon-log-in"> login</button>

這是在按鈕上應(yīng)用字體圖標(biāo)的案例?？梢栽趌ogin上面加一個(gè)空格。不然會(huì)和圖標(biāo)擠在一起。

還有一種推薦的方式：

<button class="btn btn-default">
 <span class="glyphicon glyphicon-log-in"></span>
 login
</button>

就是把span放到button里邊。如果不想看到可以給span加上：sr-only（設(shè)備可讀，用戶看不到）。

再有如：

<button class="btn btn-danger">
 <span class="glyphicon glyphicon-log-out"></span>
 logout

再看copyright圖標(biāo)——

注意字體圖標(biāo)的原則——讓所有人能用——加上title屬性

二. 下拉菜單dropdown（需要jq支持）

1. 基本用法

一個(gè)下拉菜單的基本實(shí)現(xiàn)是，一個(gè)按鈕，一個(gè)隱藏的ul-li，一個(gè)響應(yīng)才做圖標(biāo)。通過(guò)jquery的toggle操作顯示隱藏。

在bootstrap中，結(jié)構(gòu)也是一樣，不同的是，只需要應(yīng)用三個(gè)基本語(yǔ)句就可以實(shí)現(xiàn)。

class="dropdown"——包在最外層的div上，這是一個(gè)下拉菜單。

ulclass="dropdown-menu"——把ul隱藏起來(lái)。

光有ul隱藏還不夠，button按鈕綁定的行為應(yīng)該是：data-toggle="dropdown"

<div class="dropdown">
 <button type="button" class="btn btn-default" data-toggle="dropdown">
 縱貫線
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 <li><a href="javascript:;">周華健</a></li>
 <li><a href="javascript:;">李宗盛</a></li>
 <li><a href="javascript:;">羅大佑</a></li>
 <li><a href="javascript:;">張震岳</a></li>
 </ul>
 </div>

效果馬上就有了：

如果我把div的class屬性改為dropup，菜單就變成“上拉菜單”了

對(duì)齊——用在ul上

默認(rèn)是左對(duì)齊。

dropdown-menu-left|right

（1）標(biāo)題

比如給每個(gè)成員的li加上dropdown-header：同時(shí)還加上各自的作品

注意，dropdown-header一般不加a標(biāo)記

（2）分割線

光是這樣看很累，可以加上分割線來(lái)區(qū)分層級(jí)。

（3）禁用

不讓用，比如我要禁點(diǎn)“一起哈啤”，就給他加上class="disabled"

結(jié)果是禁止點(diǎn)擊狀態(tài)：

通常應(yīng)用不同的角色辦理。

【例4.1】

現(xiàn)在有一個(gè)下拉菜單，一個(gè)文本輸入框，樣式如下：

<div class="row">
 <div class="dropdown col-sm-4">
 <button type="button" class="btn btn-default" data-toggle="dropdown">
 縱貫線
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 <li class="dropdown-header"><a href="javascript:;">周華健</a></li>
 <li><a href="javascript:;">怕黑</a></li>
 <li><a href="javascript:;">雨人</a></li>
 <li class="divider"></li>
 <li class="dropdown-header"><a href="javascript:;">李宗盛</a></li>
 <li><a href="javascript:;">凡人歌</a></li>
 <li><a href="javascript:;">寂寞難耐</a></li>
 <li class="divider"></li>
 <li class="dropdown-header"><a href="javascript:;">羅大佑</a></li>
 <li><a href="javascript:;">戀曲1980</a></li>
 <li><a href="javascript:;">愛(ài)人同志</a></li>
 <li class="divider"></li>
 <li class="dropdown-header"><a href="javascript:;">張震岳</a></li>
 <li class="disabled"><a href="javascript:;">一起哈啤</a></li>
 <li><a href="javascript:;">公路</a></li>
 </ul>
 </div>
 
 <div class="col-sm-4">
 <div class="row">
 <div class="col-sm-9">
 <form class="navbar=form">
 <input type="text" class="form-control" placeholder="輸入姓名">
 </form>
 </div>
 <div class="col-sm-3">
 <button type="button" class="btn btn-default btn-block btn-primary">登錄</button>
 </div>
 </div>
 </div>
</div>

要求：輸入“我是哈啤會(huì)員”，點(diǎn)擊btn按鈕登錄后，菜單“一起哈啤”顯示可用，否則為不可選狀態(tài)。

通過(guò)jquery實(shí)現(xiàn)：

$(function(){
 $('#login').click(function(){
 if($('#inputName').val()=='我是哈啤會(huì)員'){
 $("li:contains('一起哈啤')").removeClass('disabled');
 }
 })
})

三. 多級(jí)嵌套——3.x版已經(jīng)刪除。（不看）

四. 按鈕組——div class="btn-group"

1.基本用法

對(duì)一系列按鈕的容器套用btn——group

<div class="btn-group">
 <button class="btn btn-primary">Login</button>
 <button class="btn btn-default">Register</button>
 <button class="btn btn-danger">Reset</button>
</div>

很有一種手機(jī)的感覺(jué)。

2.還可以批量修改尺寸：如果加上btn-group-lg/sm/xs等尺寸參數(shù)：比如這是使用btn-group-xs的效果。沒(méi)有md（shi）

注意按鈕組的大小設(shè)置優(yōu)先級(jí)大于按鈕（因?yàn)樵谠创a中后定義。）

3.工具欄：
在以上代碼的基礎(chǔ)上，賦值一組，然后將2組包裹在一個(gè)div中，給此div加上class="btn-toolbar"

<div class="toolbar">
 <div class="btn-group btn-group-xs">
 <button class="btn btn-primary">Login</button>
 <button class="btn btn-default">Register</button>
 <button class="btn btn-danger">Reset</button>
 </div>
 <div class="btn-group btn-group-xs">
 <button class="btn btn-primary">Login</button>
 <button class="btn btn-default">Register</button>
 <button class="btn btn-danger">Reset</button>
 </div>
</div>

說(shuō)白了就是打橫來(lái)。
【應(yīng)用】按鈕組可以和下拉菜單配合使用。那看起來(lái)就像個(gè)導(dǎo)航了。

<div class="btn-group btn-group-xs">
 <button class="btn btn-primary">Login</button>
 <button class="btn btn-default">Register</button>
 <button class="btn btn-danger">Reset</button>
 <div class="dropdown btn-group btn-group-xs">
 <button type="button" class="btn btn-default btn-group-xs" data-toggle="dropdown">
 縱貫線
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 <li><a href="javascript:;">周華健</a></li>
 <li><a href="javascript:;">李宗盛</a></li>
 <li><a href="javascript:;">羅大佑</a></li>
 <li><a href="javascript:;">張震岳</a></li>
 </ul>
 </div>
</div>

4.垂直分組btn-group-vertical
對(duì)button外包的div使用。

<div class="btn-group btn-group-xs btn-group-vertical">
 <button class="btn btn-primary">Login</button>
 <button class="btn btn-default">Register</button>
 <button class="btn btn-danger">Reset</button>
 <div class="dropdown btn-group btn-group-xs">
 <button type="button" class="btn btn-default btn-group-xs" data-toggle="dropdown">
 縱貫線
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 <li><a href="javascript:;">周華健</a></li>
 <li><a href="javascript:;">李宗盛</a></li>
 <li><a href="javascript:;">羅大佑</a></li>
 <li><a href="javascript:;">張震岳</a></li>
 </ul>
 </div>
</div>

但是使用這種方式做的垂直導(dǎo)航不多。

5. 自適應(yīng)的分組按鈕：btn-group-justify
讓按鈕的寬度自適應(yīng)——注意此功能僅限于a標(biāo)記類型的btn！

<div class="btn-group btn-group-justified" style="width:600px;height:100px">
 <a class="btn btn-primary">Login</a>
 <a class="btn btn-default">Register</a>
 <a class="btn btn-danger">Reset</a>
 
 </div>

四. 按鈕式的下拉菜單（膠囊式的按鈕）

依賴js組件，而且一般用于實(shí)現(xiàn)是分裂式的。

1.基本實(shí)現(xiàn)思路
一個(gè)按鈕組，實(shí)際包括兩個(gè)按鈕。一個(gè)是內(nèi)容，一個(gè)顯示三角符號(hào)（class="caret"）。就像下面一樣：

<div class="btn-group ">
 <button class="btn btn-deafault">Search</button>
 <button class="btn btn-success">
 <span class="caret"></span>
 </button>
</div>

接下來(lái)實(shí)現(xiàn)菜單點(diǎn)擊按鈕，出現(xiàn)一個(gè)ul-li序列。對(duì)綠色按鈕做——data-toogle="dropdown"

<div class="btn-group">
 <button type="button" class="btn btn-deafault">Search</button>
 <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 <li><a href="javascript:;">link1</a></li>
 <li><a href="javascript:;">link2</a></li>
 <li><a href="javascript:;">link3</a></li>
 </ul>
</div>

按鈕組控件本身也支持下拉菜單的觸發(fā)，所以不需要class=dropdown了

同理，在button-group上加上dropup代表向上彈出。

五.輸入框組——input-group系列

用于單行文本輸入框和其它小的組件（比如說(shuō)span）進(jìn)行排列。只支持文本輸入框<input type="text">。

1. input-group-addon——直接添加到span標(biāo)簽

<div class="input-group">
 <span class="input-group-addon">Email</span>
 <input type="email" class="form-control" placeholder="Enter your Email">
</div>

你也可以為span里面加單選框（radio）和復(fù)選框（checkbox），但是樣式相當(dāng)難看。

看上去好神奇的樣子，那能為span加諸如<span><i></i></span>的圖標(biāo)字體嗎？——抱然而真的不能用。

2. input-group-btn——直接添加到span標(biāo)簽，但是里面包了一個(gè)按鈕

為什么要額外設(shè)置多一個(gè)input-group-addon？

.btn的樣式過(guò)于復(fù)雜了。為了避免沖突，需要額外指定一個(gè)類。

<div class="input-group">
 <span class="input-group-addon">Email</span>
 <input type="email" class="form-control" placeholder="Enter your Email">
 <span class="input-group-btn"><button class="btn">GO</button></span>
</div>

注意：

（1） input-group-btn不是直接用，button按鈕上面，同時(shí)，button按鈕至少要加個(gè)btn的class，三者是配合使用的。

（2）input輸入框組支持定義大小——和btn-group一樣，支持input-group-lg/sm/xs+默認(rèn) 四個(gè)大小樣式。

【例4.2】
在上面代碼的基礎(chǔ)上，當(dāng)輸入正確郵箱時(shí)（if(this.value!="" && !( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ))），按鈕變?yōu)榭捎茫ㄒ瞥?disabled），點(diǎn)擊可以為此地址法郵件（通常用于提交驗(yàn)證郵件）。用腳本實(shí)現(xiàn)之。

唯一需要注意的是，這里的button按鈕應(yīng)使用location.href作為跳轉(zhuǎn)。

$(function(){
 $('.form-control:input').keyup(function(){
 if(this.value!="" && !( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) )){
 $('button').removeClass().addClass('btn btn-success');
 var address=this.value;
 $('button').click(function(){
 location.href='mailto:'+address;
 })
 }else{
 $('button').html('GO').removeClass().addClass('btn btn-warning').addClass('disabled');
 }
 })
})

3.與其它組件結(jié)合

（1）下拉菜單結(jié)合addon

把上面的代碼修改以下，直接給按鈕加上一個(gè)data-toggle="dropdown"，然后把容器由span改成div。

<div class="input-group">
 <input type="email" class="form-control" placeholder="Enter your Email">
 <div class="input-group-btn"><button class="btn" data-toggle="dropdown">GO
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 </div>
</div>

（2）分裂式按鈕

在input-gro

<li><a href="#">Pofile</a></li>

up-btn下，組合的按鈕也是可以分裂式的。無(wú)需再給父級(jí)容器加btn-group。同時(shí)應(yīng)該注意到，不同點(diǎn)在于按鈕的圓角被去掉了。

六. 導(dǎo)航（基本）

導(dǎo)航是所有組件的重點(diǎn)。對(duì)于導(dǎo)航有套用的預(yù)置類.nav，但是它并不生產(chǎn)直觀樣式，只是各種導(dǎo)航實(shí)現(xiàn)的前提條件。導(dǎo)航的結(jié)構(gòu)和正常差不多，本質(zhì)是通過(guò)ul-li體系實(shí)現(xiàn)。組件的動(dòng)效依賴jquery。

選項(xiàng)卡：<ul><li role="presentation"></li></ul>

膠囊式導(dǎo)航：<ul>

堆疊式導(dǎo)航（垂直標(biāo)簽頁(yè)）：<ul>

自適應(yīng)導(dǎo)航（兩端對(duì)齊）：<ul>

1.選項(xiàng)卡—— .nav-tabs

實(shí)現(xiàn)方式：

<div>
<ulclass="nav nav-tabs">
<li><ahref="#">Home</a></li>
<li><ahref="#">Pofile</a></li>
<liclass="active"><ahref="#">Message</a></li>
</ul>
</div>

樣式如下，配合.active來(lái)使用message當(dāng)前處于激活狀態(tài)。

2.膠囊式導(dǎo)航——nav-pills

很生動(dòng)形象的詞。上面代碼中，把ul的class改為nav-pills就可以實(shí)現(xiàn)了。

3.垂直標(biāo)簽——nav-stacked

同樣也是應(yīng)用在ul上。但注意，.active樣式在此不生效，圖中只是懸停的效果。

4.兩端對(duì)齊

整個(gè)nav占據(jù)了屏幕的一行，同時(shí)自動(dòng)分配寬度。當(dāng)屏幕較小時(shí)，自動(dòng)垂直排列。同樣，途中的陰影只是鼠標(biāo)懸停的效果，

5. 初步小結(jié)：

（1）以上四類可以混搭使用。要想使用.active類樣式，可以在tab/pills的框架下使用。

比如class="nav nav-pills nav-justified"

【例4.3】拼湊一個(gè)二級(jí)導(dǎo)航：

任務(wù)描述：在一個(gè)膠囊內(nèi)拼湊一個(gè)耳機(jī)導(dǎo)航，實(shí)現(xiàn)下拉菜單功能：

根據(jù)框架可以寫(xiě)出下列代碼

<div>
 <h2>這是膠囊式導(dǎo)航 <small>class="nav nav-pills"</small></h2>
 <ul class="nav nav-pills">
 <li><a data-toggle="tab" href="#">Home</a></li>
 <li><a data-toggle="tab" href="#">Pofile</a></li>
 <li class="active dropdown">
 <a data-toggle="tab" href="#">
 Message
 <span class="caret"></span>
 </a>
 <ul class="dropdown-menu">
 <li><a href="#">link1</a></li>
 <li><a href="#">link2</a></li>
 <li><a href="#">link3</a></li>
 </ul>
 </li>
 </ul>
</div>

但還是發(fā)現(xiàn)，第7行的data-toggle已經(jīng)有了一個(gè)"tab",再添加“dropdown”導(dǎo)致雙方都不生效。嘗試使用分段式按鈕，但是發(fā)現(xiàn)按鈕的表現(xiàn)和膠囊按鈕的區(qū)別還是有的。所以二者只能取一。至于active類，以后可以用js實(shí)現(xiàn)。

所以最終代碼是：

<div>
 <h2>這是膠囊式導(dǎo)航 <small>class="nav nav-pills"</small></h2>
 <ul class="nav nav-pills">
 <li><a href="#">Home</a></li>
 <li><a href="#">Pofile</a></li>
 <li class="dropdown btn-group">
 <a data-toggle="dropdown" href="#">
 Message
 <span class="caret"></span>
 </a>
 <ul class="dropdown-menu">
 <li><a href="#">link1</a></li>
 <li><a href="#">link2</a></li>
 <li><a href="#">link3</a></li>
 </ul>
 </li>
 </ul>
</div>

進(jìn)一步思考：在此基礎(chǔ)上做出三級(jí)菜單。三級(jí)菜單需要.dropdown-submenu實(shí)現(xiàn)，但是bootstrap3已經(jīng)刪除了相關(guān)類。這時(shí)需要在css中引入舊版中.dropdown-submenu的樣式：

.dropdown-submenu {
 position: relative;
}
.dropdown-submenu > .dropdown-menu {
 top: 0;
 left: 100%;
 margin-top: -6px;
 margin-left: -1px;
 -webkit-border-radius: 0 6px 6px 6px;
 -moz-border-radius: 0 6px 6px;
 border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
 display: block;
}
.dropdown-submenu > a:after {
 display: block;
 content: " ";
 float: right;
 width: 0;
 height: 0;
 border-color: transparent;
 border-style: solid;
 border-width: 5px 0 5px 5px;
 border-left-color: #ccc;
 margin-top: 5px;
 margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
 border-left-color: #fff;
}
.dropdown-submenu.pull-left {
 float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
 left: -100%;
 margin-left: 10px;
 -webkit-border-radius: 6px 0 6px 6px;
 -moz-border-radius: 6px 0 6px 6px;
 border-radius: 6px 0 6px 6px;
}

結(jié)構(gòu)實(shí)現(xiàn)：（關(guān)鍵語(yǔ)句在第17行）

<div>
 <h2>這是膠囊式導(dǎo)航 <small>class="nav nav-pills"</small></h2>
 <ul class="nav nav-pills">
 <li><a href="#">Home</a></li>
 <li><a href="#">Pofile</a></li>
 <li class="dropdown btn-group">
 <a data-toggle="dropdown" href="#">
 Message
 <span class="caret"></span>
 </a>
 <ul class="dropdown-menu">
 <li><a href="#">link1</a></li>
 <li><a href="#">link2</a></li>
  
 <li class="divider"></li>
 
 <li class="dropdown-submenu">
  <a tabindex="-1" href="javascript:;">link4</a>
  <ul class="dropdown-menu">
  <li><a tabindex="-1" href="javascript:;">link4-1</a></li>
  <li class="divider"></li>
  <li class="dropdown-submenu">
  <a href="javascript:;">link4-2</a>
  <ul class="dropdown-menu">
  <li><a href="javascript:;">link4-2-1</a></li>
  </ul>
  </li>
  </ul>
 </li>
 
 </ul>
 </li>
 </ul>
</div>

效果：

（2）借助js插件實(shí)現(xiàn)真正的，但只是初步的導(dǎo)航交互——

在ul-li-a體系下，給a標(biāo)簽加上屬性：data-toggle="tab"——注意堆疊導(dǎo)航和自適應(yīng)導(dǎo)航無(wú)效（還是本來(lái)的效果）

（3）禁止點(diǎn)擊——還是disabled類

注意，禁止點(diǎn)擊disabled類只是一個(gè)效果，而不能阻止點(diǎn)擊事件的觸發(fā)。需要在js中重新定義。

七. 導(dǎo)航條（navbar）

導(dǎo)航條的特性在于：比導(dǎo)航多了一個(gè)“條”。相對(duì)于導(dǎo)航多了一塊背景——

以下是根據(jù)基本結(jié)構(gòu)做出來(lái)的導(dǎo)航條效果

<div>
 <h2>這是基本導(dǎo)航條 <small> .navbar-fixed-top可以固定在上方</small></h2>
 <nav class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
 <a class="navbar-brand" href="#">Brand</a>
 <ul class="nav navbar-nav">
 <li class="disabled"><a href="#">disabled</a></li>
 <li><a href="#">normal</a></li>
 <li class="active"><a data-toggle="tab" href="#">Message</a></li>
 </ul>
 </div>
 </nav>
</div>

如果我們給nav標(biāo)簽加上.navbar-fixed-top，可以固定到最上面。但是這樣做本質(zhì)是定位，會(huì)覆蓋掉原本處于頂端的內(nèi)容。

官方建議：原本頂部?jī)?nèi)容，或者body的padding-top設(shè)為70px。如果是頂部?jī)?nèi)容是header，偏移30px就夠了。

nav-header不一定是必要的

nav-brand用于放置網(wǎng)站品牌，換行不會(huì)被消失

導(dǎo)航條的顏色由兩個(gè)類決定：（1）.navbar-dfault;（2）.navbar-inverse:控制反色。比如加了.navbar-inverse后：

下拉二級(jí)菜單的實(shí)現(xiàn)：只要對(duì)li應(yīng)用dropdown體系就可以實(shí)現(xiàn)：

<li class="dropdown">
 <a href="#" data-toggle="dropdown">
 <span class="glyphicon glyphicon-music"></span>
 Music
 <span class="caret"></span>
 </a>
 <ul class="dropdown-menu">
 <li><a href="#">link1</a></li>
 <li><a href="#">link2</a></li>
 <li><a href="#">link3</a></li>
 </ul>
</li>

1. 導(dǎo)航條表單

最常用的就是網(wǎng)易登陸框，附在導(dǎo)航條上面。

——<from role="reseach">

（1）邏輯上表單也是ul-li的一部分，所以表單放在li里面。但是注入輸入框之類的控件在小屏幕中會(huì)自動(dòng)填充100%的寬度，所以要給li加上container-fluid類（注意container類不行）

（2）接下來(lái)是按鈕，還記得input-group-btn否？按鈕應(yīng)該是和輸入框擠在一塊的。

<li class="container-fluid">
 <form class="navbar-form input-group">
 <input class="form-control" type="search" placeholder="Search">
 <span class="input-group-btn"><button type="submit" class="btn btn-default">
 <span class="glyphicon glyphicon-search"></span>
 </button></span>
 </form>
 
</li>

2.基本導(dǎo)航元素

（1）導(dǎo)航條按鈕

——<button>

多了一個(gè)樣式叫navbar-btn

按鈕也是ul-li體系的一部分，所以也要放到一個(gè)li中，比如說(shuō)，做一個(gè)ul，下面放一個(gè)li的建議按鈕——

<ul class="nav navbar-nav navbar-right">
 <li class="container-fluid">
 <button class="btn btn-info navbar-btn">Suggest</button>
 </li>
</ul>

（2）導(dǎo)航條文本

——<p>

主要是寬高符合導(dǎo)航條。比如說(shuō)在之前的表單前面在新建一個(gè)li，輸入<p>Search</p>

就表現(xiàn)出和其它菜單一樣的樣式。

還是不理想，如果search是和導(dǎo)航是一個(gè)緊貼著，應(yīng)該用addon加上去！

相對(duì)好點(diǎn)）

（3）非導(dǎo)航連接

——<a href="#">

表現(xiàn)和導(dǎo)航條文本差不多。

3.位置——做的是固定定位

排列

.navbar-left/right

固定

.navbar-fixed-top/bottom

（注意body的padding）

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

實(shí)現(xiàn)一個(gè)在小屏幕手機(jī)常見(jiàn)的菜單按鈕是在一個(gè)button中放三個(gè)<span>（“三道杠”）。然后設(shè)置較小的時(shí)候出現(xiàn)。——button

<button class="navbar-toggle">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
</button>

進(jìn)一步編寫(xiě)可收縮的菜單html，需要對(duì)ul外包一個(gè)div，并對(duì)其應(yīng)用.collapase .navbar-collapase

<div class="collapse navbar-collapse">
   <!-- 用于導(dǎo)航條的展開(kāi)面板 -->
   <ul class="nav navbar-nav">
    <li><a href="#">
    <span class="glyphicon glyphicon-home"></span>
    Home
    </a></li>
    <li><a href="#">
    <span class="glyphicon glyphicon-music"></span>
    Music
    </a></li>
   </ul>
   </div>

這樣home和music都會(huì)在屏幕縮小時(shí)收縮。然而點(diǎn)擊三道杠，不彈出菜單，點(diǎn)擊時(shí)需要插件，而插件由打擾開(kāi)頭，所以button按鈕需要有data-toggle="collapse"和data-target="展開(kāi)的菜單"。展開(kāi)的菜單是個(gè)選擇器，給ul父級(jí)命名id="#divNav"，可以直接應(yīng)用

data-target="#divNav"。

全部代碼如下：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
   <div class="navbar-header">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target="#divNav">
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
    </button>
   </div>
   <div class="collapse navbar-collapse" id="divNav">
    <!-- 用于導(dǎo)航條的展開(kāi)面板 -->
    <ul class="nav navbar-nav">
     <li><a href="#">
      <span class="glyphicon glyphicon-home"></span>
      Home
     </a></li>
     <li><a href="#">
      <span class="glyphicon glyphicon-music"></span>
      Music
     </a></li>
    </ul>
   </div>
   
  </div>
  
 </nav>

如果希望菜單偏移到右邊，可以對(duì)ul使用navbar-right

八. 面包屑導(dǎo)航

breadcrumb——很形象的名字，一路撒面包，只能從面包原路返回。只是一個(gè)層級(jí)的路徑關(guān)系，不能說(shuō)是一個(gè)標(biāo)準(zhǔn)的導(dǎo)航

<ol class="breadcrumb">
 <li><a href="#">level1</a></li>
 <li><a href="#">level2</a></li>
 <li><a href="#">level3</a></li>
 <li class="active">>level4</li>
</ol>

九. 分頁(yè)導(dǎo)航當(dāng)商品較多時(shí)，索引容納不下，需要用分類導(dǎo)航。

<nav>
 <ul class="pagination">
  <li class="previous"><a href="#">last</a></li>
  <li><a href="url?id=1">1</a></li>
  <li class="active"><a href="url?id=2">2</a></li>
  <li><a href="url?id=3">3</a></li>
  <li class="next"><a href="#">next</a></li>
 </ul>
</nav>