《深入理解bootstrap》、： CSS組件

bootstrap三大核心之二。

包括glyphicon表徵圖，下拉式功能表（dropdown），按鈕組（button group）....等等。

一. 表徵圖字型

bootstrap3提供了200多個免費表徵圖字型。認為它是一個字。

arial-hidden="true"

.sr-only（唯讀）

1. 引入方法：

i標籤是已經廢棄了的html斜體標籤。用span也可以。使用時必須基於glyphicon glyphicon-xxx兩個類的樣式。

2. 實現機制：

（1）雪碧技術：允許無損放大，減少圖片大小，減少網頁的請求次數。

把網頁的背景圖片整合到一張圖片中，利用背景定位顯示出來。

定位的是做上點座標，右邊為x軸負方向，左邊為y軸正方向。

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

（2）@font-face，緩衝自伺服器，字型特性（如可設定顏色）。CSS3的線上字型引入寫法是：

在CSS的最上面：匯入第三方字型表徵圖

@font-face{    font:字型名稱;(自訂名稱，避開網路安全字名)    src:url(字型檔路徑), url(字型檔路徑), url(字型檔路徑),…;}

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

3.應用

在button上應用字型表徵圖：

 login

這是在按鈕上應用字型表徵圖的案例。可以在login上面加一個空格。不然會和表徵圖擠在一起。

還有一種推薦的方式：

                                login

就是把span放到button裡邊。如果不想看到可以給span加上：sr-only（裝置可讀，使用者看不到）。

再有如：

                                logout

再看copyright表徵圖——

注意字型表徵圖的原則——讓所有人能用——加上title屬性

二. 下拉式功能表dropdown（需要jq支援）

1. 基本用法

一個下拉式功能表的基本實現是，一個按鈕，一個隱藏的ul-li，一個響應才做表徵圖。通過jquery的toggle操作顯示隱藏。

在bootstrap中，結構也是一樣，不同的是，只需要應用三個基本語句就可以實現。

class="dropdown"——包在最外層的p上，這是一個下拉式功能表。

ul class="dropdown-menu"——把ul隱藏起來。

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

                                    縱貫線                                                                       周華健                   李宗盛                   羅大佑                   張震嶽

效果馬上就有了：

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

對齊——用在ul上

預設是靠左對齊。

dropdown-menu-left|right

（1）標題

比如給每個成員的li加上dropdown-header：同時還加上各自的作品

注意，dropdown-header一般不加a標記

（2）分割線

光是這樣看很累，可以加上分割線來區分層級。

（3）禁用

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

結果是禁止點擊狀態：

通常應用不同的角色辦理。

【例4.1】

現在有一個下拉式功能表，一個文本輸入框，樣式如下：

                          縱貫線                                           周華健            怕黑            雨人                        李宗盛            凡人歌            寂寞難耐                        羅大佑            戀曲1980            愛人同志                        張震嶽            一起哈啤            公路                                                                                                     登入

要求：輸入“我是哈啤會員”，點擊btn按鈕登入後，菜單“一起哈啤”顯示可用，否則為不可選狀態。

通過jquery實現：

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

三. 多級嵌套——3.x版已經刪除。（不看）

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

1.基本用法

對一系列按鈕的容器套用btn——group

    Login    Register    Reset

很有一種手機的感覺。

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

注意按鈕組的大小設定優先權大於按鈕（因為在源碼中後定義。）

3.工具列：

在以上代碼的基礎上，賦值一組，然後將2組包裹在一個p中，給此p加上class="btn-toolbar"

            Login        Register        Reset                Login        Register        Reset

說白了就是打橫來。

【應用】按鈕組可以和下拉式功能表配合使用。那看起來就像個導航了。

    Login    Register    Reset                        縱貫線                                       周華健           李宗盛           羅大佑           張震嶽

4.垂直分組btn-group-vertical

對button外包的p使用。

    Login    Register    Reset                        縱貫線                                       周華健           李宗盛           羅大佑           張震嶽

但是使用這種方式做的垂直導航不多。

5. 自適應的分組按鈕：btn-group-justify

讓按鈕的寬度自適應——注意此功能僅限於a標記類型的btn！

            Login            Register            Reset

四. 按鈕式的下拉式功能表（膠囊式的按鈕）

依賴js組件，而且一般用於實現是分裂式的。

1.基本實現思路

一個按鈕組，實際包括兩個按鈕。一個是內容，一個顯示三角符號（class="caret"）。就像下面一樣：

    Search

接下來實現菜單點擊按鈕，出現一個ul-li序列。對綠色按鈕做——data-toogle="dropdown"

    Search                            link1        link2        link3

按鈕組控制項本身也支援下拉式功能表的觸發，所以不需要class=dropdown了

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

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

用於單行文本輸入框和其它小的組件（比如說span）進行排列。只支援文本輸入框。

1. input-group-addon——直接添加到span標籤

            Email

你也可以為span裡面加單選框（radio）和複選框（checkbox），但是樣式相當難看。

看上去好神奇的樣子，那能為span加諸如的表徵圖字型嗎？——抱然而真的不能用。

2. input-group-btn——直接添加到span標籤，但是裡麵包了一個按鈕

為什麼要額外設定多一個input-group-addon？

.btn的樣式過於複雜了。為了避免衝突，需要額外指定一個類。

    Email        GO

注意：

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

（2）input輸入框組支援定義大小——和btn-group一樣，支援input-group-lg/sm/xs+預設 四個大小樣式。

【例4.2】

在上面代碼的基礎上，當輸入正確郵箱時（if(this.value!="" && !( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ))），按鈕變為可用（移除.disabled），點擊可以為此地址法郵件（通常用於提交驗證郵件）。用指令碼實現之。

唯一需要注意的是，這裡的button按鈕應使用location.href作為跳轉。

$(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.與其它組件結合

（1）下拉式功能表結合addon

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

        GO                    1        2        3

（2）分裂式按鈕

在input-group-btn下，組合的按鈕也是可以分裂式的。無需再給父級容器加btn-group。同時應該注意到，不同點在於按鈕的圓角被去掉了。

六. 導航（基本）

導航是所有組件的重點。對於導航有套用的預置類.nav，但是它並不生產直觀樣式，只是各種導航實現的前提條件。導航的結構和正常差不多，本質是通過ul-li體系實現。組件的動效依賴jquery。

選項卡：

• 
  

膠囊式導航：

堆疊式導航（垂直標籤頁）：

自適應導航（左右對齊）：

1.選項卡—— .nav-tabs

實現方式：

HomePofileMessage

樣式如下，配合.active來使用message當前處於啟用狀態。

2.膠囊式導航——nav-pills

很生動形象的詞。上面代碼中，把ul的class改為nav-pills就可以實現了。

3.垂直標籤——nav-stacked

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

4.左右對齊

整個nav佔據了螢幕的一行，同時自動分配寬度。當螢幕較小時，自動垂直排列。同樣，途中的陰影只是滑鼠移至上方的效果，

5. 初步小結：

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

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

【例4.3】拼湊一個二級導航：

任務描述：在一個膠囊內拼湊一個耳機導航，實現下拉式功能表功能：

根據架構可以寫出下列代碼

    這是膠囊式導航 class="nav nav-pills"            Home        Pofile                                    Message                                                        link1                link2                link3

但還是發現，第7行的data-toggle已經有了一個"tab",再添加“dropdown”導致雙方都不生效。嘗試使用分段式按鈕，但是發現按鈕的表現和膠囊按鈕的區別還是有的。所以二者只能取一。至於active類，以後可以用js實現。

所以最終代碼是：

    這是膠囊式導航 class="nav nav-pills"            Home        Pofile                                    Message                                                        link1                link2                link3

進一步思考：在此基礎上做出三級菜單。三級菜單需要.dropdown-submenu實現，但是bootstrap3已經刪除了相關類。這時需要在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;}

結構實現：（關鍵語句在第17行）

    這是膠囊式導航 class="nav nav-pills"            Home        Pofile                                    Message                                                        link1                link2                                                                      link4                                            link4-1                                                                            link4-2                                                            link4-2-1

效果：

（2）藉助js外掛程式實現真正的，但只是初步的導航互動——

在ul-li-a體系下，給a標籤加上屬性：data-toggle="tab"——注意堆疊導航和自適應導航無效（還是本來的效果）

（3）禁止點擊——還是disabled類

注意，禁止點擊disabled類只是一個效果，而不能阻止點擊事件的觸發。需要在js中重新定義。

七. 導航條（navbar）

導航條的特性在於：比導航多了一個“條”。相對於導航多了一塊背景——

以下是根據基本結構做出來的導航條效果

    這是基本導航條  .navbar-fixed-top可以固定在上方                    Brand                    disabled            normal            Message

如果我們給nav標籤加上.navbar-fixed-top，可以固定到最上面。但是這樣做本質是定位，會覆蓋掉原本處於頂端的內容。

官方建議：原本頂部內容，或者body的padding-top設為70px。如果是頂部內容是header，位移30px就夠了。

nav-header不一定是必要的

nav-brand用於放置網站品牌，換行不會被消失

導航條的顏色由兩個類決定：（1）.navbar-dfault;（2）.navbar-inverse:控制反色。比如加了.navbar-inverse後：

下拉二級菜單的實現：只要對li應用dropdown體系就可以實現：

                    Music                        link1        link2        link3

1. 導航條表單

最常用的就是網易登陸框，附在導航條上面。

——

（1）邏輯上表單也是ul-li的一部分，所以表單放在li裡面。但是注入輸入框之類的控制項在小螢幕中會自動填滿100%的寬度，所以要給li加上container-fluid類（注意container類不行）

（2）接下來是按鈕，還記得input-group-btn否？按鈕應該是和輸入框擠在一塊的。

2.基本導航元素

（1）導航條按鈕

——

多了一個樣式叫navbar-btn

按鈕也是ul-li體系的一部分，所以也要放到一個li中，比如說，做一個ul class="navbar-right"，下面放一個li的建議按鈕——

            Suggest

（2）導航條文本

——

主要是寬高符合導航條。比如說在之前的表單前面在建立一個li，輸入

Search

就表現出和其它菜單一樣的樣式。

還是不理想，如果search是和導航是一個緊貼著，應該用addon加上去！

相對好點）

（3）非瀏覽連線

——

表現和導航條文本差不多。

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

排列

.navbar-left/right

固定

.navbar-fixed-top/bottom

（注意body的padding）

4.自適應導航條

實現一個在小螢幕手機常見的功能表按鈕是在一個button中放三個（“三道杠”）。然後設定較小的時候出現。——button class="navbar-toggle"

進一步編寫可收縮的菜單html，需要對ul外包一個p，並對其應用.collapase .navbar-collapase

                                                                                                                                            Home                                                                                                                        Music

這樣home和music都會在螢幕縮小時收縮。然而點擊三道杠，不快顯功能表，點擊時需要外掛程式，而外掛程式由打擾開頭，所以button按鈕需要有data-toggle="collapse"和data-target="展開的菜單"。展開的菜單是個選取器，給ul父級命名id="#pNav"，可以直接應用

data-target="#pNav"。

全部代碼如下：

                                    Brand                                                                                                                                                                                                                        Home                                                                                        Music

如果希望菜單位移到右邊，可以對ul使用navbar-right

八. 麵包屑導航

breadcrumb——很形象的名字，一路撒麵包，只能從麵包原路返回。只是一個層級的路徑關係，不能說是一個標準的導航

    level1    level2    level3    >level4

九. 分頁導航

當商品較多時，索引容納不下，需要用分類導航。

• /

• 
  

• 
  

            last        1        2        3        next

