怎么深入理解bootstrap

這篇文章給大家介紹怎么深入理解bootstrap，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

一、入門準(zhǔn)備

二、整體架構(gòu)

A.整體架構(gòu)

1.CSS12柵格系統(tǒng)：以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布已有以及信息分布

2.基礎(chǔ)布局組件，如排版、代碼、表格、按扭、表單等，可以隨意應(yīng)用在任何元素上，包括頂部 的CSS組件內(nèi)部也可以任意使用這些基礎(chǔ)組件

3.jQuery

4.響應(yīng)式設(shè)計(jì)：頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整，包括彈性網(wǎng)格和布局、圖片、CSS媒體查詢（media query）的使用等

5.CSS組件

6.JavaScript插件

B.柵格系統(tǒng)

1.列偏移：使用.col-md-offset-*形式的樣式就可以將列偏移到右側(cè)

2.列嵌套：在一個(gè)列里再聲明一個(gè)或者多個(gè)行（row），內(nèi)部所嵌套的row的寬度為100%時(shí)就是當(dāng)前外部列的寬度

3.列排序：通過(guò).col-md-push-*和.col-md-pull-*一實(shí)現(xiàn)

4.響應(yīng)式柵格：中型屏幕md，超小型xs、小型sm、大型lg

5.使用clearfix清除浮動(dòng)

C.CSS組件架構(gòu)的設(shè)計(jì)思想

1.CSS組件AO模式：A表示Append，即“附加”的意思；O表示Overwrite，即“重寫”的意思

2.CSS組件包括：基礎(chǔ)樣式、顏色樣式、尺寸樣式、狀態(tài)樣式、特殊元素樣式、并列元素樣式、嵌套子元素樣式、動(dòng)畫樣式

D.JavaScript插件架構(gòu)

1.HTML布局規(guī)則：基于元素自定義屬性的布局規(guī)則，比如使用類似于data-target的自定義屬性等

2.JavaScrtip實(shí)現(xiàn)步驟：所有的插件都遵循jQuery插件開(kāi)發(fā)的標(biāo)準(zhǔn)步驟，所有的事件都保持了統(tǒng)一標(biāo)準(zhǔn)

3.插件調(diào)用方法：所有插件的使用方式都非常類似，可以是HTML聲明式，也可以是調(diào)用式（JavaScript代碼），并且支持多種回調(diào)和可選參數(shù)

三、CSS布局

A.概述

1.移動(dòng)：<meta name="viewport" content="width=device-width,initial-scale=1.0"/>，添加user-scalable=no可以禁用其縮放（zooming）功能

2.響應(yīng)式圖片：.img-responsive樣式

3.Normalize.css，用于將不同瀏覽器的默認(rèn)CSS特性設(shè)置為統(tǒng)一效果 的CSS庫(kù)

4.居中容器：.container

B.基礎(chǔ)排版

1.樣式.h2-6沒(méi)有有margin，h2有，h2 .small顯示稍小一點(diǎn)的字體，灰色

2.<p>有額外的margin-bottom

3.相讓一個(gè)段落突出顯示，可以使用.lead樣式，增大字體大小、粗細(xì)、行間距和margin-bottom

4.默認(rèn)強(qiáng)調(diào)文本：small、strong、em、cite

5.對(duì)齊方式：text-left、text-center、text-right、text-justify

6.在abbr元素上實(shí)現(xiàn)了縮略詞功能，initialism可以讓字體小點(diǎn)

7.address元素主要是行間距和底部margin

8.blockquote定義了樣式，并且可以定義.pull-right

9.列表：去點(diǎn)列表.list-unstyled；內(nèi)聯(lián)列表.list-inline；水平定義列表.dl-horizontal

C.代碼

1.code單選內(nèi)聯(lián)代碼，kbd用戶輸入代碼，pre多行代碼塊

2.pre元素上應(yīng)用.pre-scrollable可以控制最大高度為340px，并滾動(dòng)

D.表格

1.基礎(chǔ)樣式：.table

2.隔行加背景色樣式：.table-striped

3.帶邊框的單元格：.table-bordered

4.鼠標(biāo)懸停高亮的表格：.table-hover

5.緊湊型表格：.table-condensed

6.行級(jí)元素樣式，可在tr、td上使用：

• .active表示當(dāng)前活動(dòng)的信息

• .warning表示警告

• .success表示成功或者正確的行為

• .danger表示危險(xiǎn)或者可能是錯(cuò)誤的行為

• .info表示中立的信息或行為

7.響應(yīng)式表格，在.table外部包裝.table-responsive樣式的div即可創(chuàng)建，在小于768px時(shí)水平滾動(dòng)

E.表單

1.基礎(chǔ)表單：只對(duì)表單內(nèi)的fieldset、legend、label標(biāo)簽進(jìn)行了設(shè)定，對(duì)margin、padding、border進(jìn)行了細(xì)化設(shè)置，如果在select、input、textarea元素上應(yīng)用了.form-control樣式，顯示的寬度會(huì)變成100%，并且placeholder的顏色變灰

2.內(nèi)聯(lián)表單：在form元素上應(yīng)用.form-inline樣式，此樣式只能在大于768px以上

3.label包住radio或checkbox，外部再用.checkbox或.radio樣式，label可使用.checkbox-inline或.radio-inline內(nèi)聯(lián)樣式

4.fieldset上應(yīng)用disabled屬性，則內(nèi)部控件都會(huì)禁用，除了第一個(gè)legend內(nèi)的控件

5.驗(yàn)證提示狀態(tài)：.has-warning、.has-error、.has-success，在form-group平緩的div元素上應(yīng)用

6.對(duì)應(yīng)小圖標(biāo)：has-feedback

7.控件大?。?input-lg、.input-sm

8.塊級(jí)幫助提示：.help-block

F.按扭

1.按扭樣式：.btn、.btn-default、.btn-primary、.btn-success、.btn-info、.btn-warning、.btn-danger、.btn-link

2.按扭大?。?btn-lg、.btn-sm、.btn-xs、.btn-block

3.可支持：a、button、input元素

4.活動(dòng)狀態(tài)：.active

5.禁用狀態(tài)：disabled屬性或.disabled樣式，樣式不禁止按扭的默認(rèn)行為

G.圖像

1.3種風(fēng)格效果：.img-rounded、.img-circle、img-thumbnail

H.輔助樣式

1.文本樣式：.text-muted、.text-primary、.text-success、.text-info、.text-warning、.text-danger

2.文本背景樣式：.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger

3.輔助圖標(biāo)：.close關(guān)閉圖標(biāo)、.caret向下箭頭

4.內(nèi)容浮動(dòng)：.pull-right、pull-left、center-block、clearfix

5.隱藏與顯示：.show、.hidden（不占文檔流）、.invisible

四、CSS組件

A.小圖標(biāo)

1.所有的icon樣式都以glyphicon-開(kāi)頭，由http://glyphicons.com/提供，使用時(shí)必須同時(shí)使用兩個(gè)樣式，.glyphicon和.glyphicon-*

2.新版本使用了CSS3中的@font-face特性

B.下拉菜單

C.按鈕組

1.只需要在多個(gè)按扭外部使用一個(gè)窗口元素（比如div），然后在容器元素上應(yīng)用 .btn-group樣式即可

2.按扭工具欄，在多個(gè)分組外再放一個(gè)大的容器元素，然后在容器元素上應(yīng)用 .btn-toolbar樣式

3.按扭組上可以應(yīng)用.btn-group-lg、.btn-group-sm、.btn-group-xs樣式

4.垂直分組使用.btn-group-vertical樣式

5.在一個(gè).btn-group容器上，如果使用了.btn-group-justified樣式，則所有的按扭會(huì)100%充滿容器元素，自適應(yīng)的功能

D.按扭下拉菜單

1.利用data-toggle=""來(lái)實(shí)現(xiàn)下拉菜單

2.樣式.dropup向上的下拉菜單

E.輸入框組

1.輸入框組，.input-group樣式，輸入框前后顯示的個(gè)性元素上可以使用.input-group-addon

2.避免在select元素上使用addon功能，不要將.form-group和.input-group混用

F.導(dǎo)航

1.使用.nav：

• .nav-tabs表示選項(xiàng)卡導(dǎo)航

• .nav-pills膠囊式選項(xiàng)卡導(dǎo)航

• .nav-pills .nav-stacked堆疊式導(dǎo)航

2.使用.nav-justified自適應(yīng)導(dǎo)航

G.導(dǎo)航條

1.使用樣式：.navbar

• .navbar-default基礎(chǔ)導(dǎo)航條

• .navbar-inverse反色導(dǎo)航條

2.使用.navbar-brand樣式給內(nèi)部元素，表示該元素是導(dǎo)航條的名稱

3.要增強(qiáng)可訪問(wèn)性，要給每個(gè)導(dǎo)航條加上role="navigation"

4.樣式.navbar-form導(dǎo)航條中的表彰樣式，指定浮動(dòng)：.navbar-left和.navbar-right

5.其他樣式：.navbar-btn（button）、.navbar-text（文本）、.navbar-link（普通鏈接）

6.底部和頂部固定：.navbar-fixed-top、.navbar-fixed-bottom

7.樣式.navbar-static-top，表示設(shè)置一個(gè)100%充滿父元素窗口的導(dǎo)航條，主要是去掉導(dǎo)航條的圓角樣式

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

1. 使用樣式：.breadcrumb

   
   

I.分頁(yè)導(dǎo)航

1.使用樣式：.pagination

2.支持大小：.pagination-lg和.pagination-sm

J.標(biāo)簽

1.使用樣式：.label

2.支持多種顏色，與button類似

K.徽章

1. 使用樣式：.badge

   
   

L.大屏幕展播

1. 使用樣式：.jumbotron

   
   

M.頁(yè)面標(biāo)題

1. 使用樣式：.page-header

   
   

N.縮略圖

1.使用樣式：.thumbnail

2.樣式：.caption，可配合圖文展示，在此樣式元素內(nèi)部添加任意風(fēng)格元素

O.警告框

1.使用樣式：.alert

2.屬性值data-dismiss="alert"，警告框的關(guān)閉，需要配合js使用

3.在.alert樣式上應(yīng)用一個(gè).alert-dismissable樣式即可實(shí)現(xiàn)一個(gè)可關(guān)閉的警告框

4.警告框也有多種顏色樣式

5.使用.alert-link樣式高亮警告框中的鏈接

P.進(jìn)度條

1.樣式.progress用于設(shè)置進(jìn)度條的容器樣式

2.樣式.progress-bar用于限制進(jìn)度條的進(jìn)度

3.樣式.progress-bar-xxx，提供鑫種顏色

4.樣式.progress-striped條紋樣式，同時(shí)應(yīng)用.active可出現(xiàn)動(dòng)畫樣式

5.多個(gè).progress-bar-xxx可以堆疊

Q.媒體對(duì)象

1. 使用樣式包括：.media、.media-object、.media-body、.media-heading和用于控制左右浮動(dòng)的pull-left或pull-right樣式

   
   

R.列表組

1.基本樣式：.list-group、.list-group-item

2.用a標(biāo)簽配合.active樣式可以達(dá)到高亮選中的效果

3.樣式.list-group-item-xxx支持多種顏色

4.自定義列表組：.list-group-item-heading、.list-group-item-text

S.面板

1.基礎(chǔ)面板：.panel、.panel-default（.panel-xxx多彩）、panel-body

2.頭尾樣式：.panel-heading、.panel-footer

3.panel-body有內(nèi)邊距，要放置無(wú)邊距的表格只需要將table和panel-body并列放置就行，不要放在body里面

T.洼地

1.樣式.well與.jumbotron類似，多了邊框

2.也提供大小設(shè)置：.well-lg、.well-sm

U.主題

五、JavaScript插件

A.動(dòng)畫過(guò)度效果

1.默認(rèn)情況下，以下組件使用了動(dòng)畫過(guò)渡效果：

• 模態(tài)彈窗（Modal）的滑動(dòng)和漸變效果

• 選項(xiàng)卡（Tab）的漸變效果

• 警告框（Alert）的漸變效果

• 旋轉(zhuǎn)輪播（Carousel）的滑動(dòng)效果

  
  

B.模態(tài)彈窗

1.彈窗組件使用了3層div容器元素，分別應(yīng)用了modal、modal-dialog、modal-content樣式，在modal-content內(nèi)包括了彈窗的頭（header）、內(nèi)容（body）、尾（footer），分別對(duì)應(yīng)3個(gè)樣式：modal-header、modal-body、modal-footer

2.聲明式用法：data-toogle=和data-target=

3.js用法：$('#id').modal()

4.支持四種事件訂閱：show.bs.modal、shown.bs.modal、hide.bs.modal、hidden.bs.modal

C.下拉菜單

1.一般在導(dǎo)航條（navbar）和選項(xiàng)卡（tab）上實(shí)現(xiàn)

2.首先navbar的父容器上要應(yīng)用.navbar樣式，其次頂級(jí)ul塊上要應(yīng)用.nav和.navbar-nav樣式

3.使用規(guī)則：

• 菜單樣式和菜單項(xiàng)保持一致

• 被單擊的鏈接或者按扭上需要應(yīng)用data-toggle="dropdown"

4.js用法：$('#id').dropdown();，也包含事件訂閱等功能，與modal類似

D.滾動(dòng)偵測(cè)

1.滾動(dòng)偵測(cè)（ScrollSpy）插件是根據(jù)滾動(dòng)的位置自動(dòng)更新導(dǎo)航條中相應(yīng)的導(dǎo)航項(xiàng)

2.用法：

• 設(shè)置滾動(dòng)容器，即在所要偵測(cè)的元素上設(shè)置data-target="@selector" data-spy="scroll"屬性

• 設(shè)置菜單鏈接容器，設(shè)置id或樣式懷data-target一致

• 在菜單容器內(nèi)，必須有.nav樣式的元素，并且在其內(nèi)部有l(wèi)i元素，li內(nèi)鈊的a元素才是可以偵測(cè)高亮的菜單鏈接，即符合.nav li > a這種選擇符條件

3.js用法：$('滾動(dòng)偵測(cè)容器選擇符').scrollspy({target:'#某單容器的選擇器'});

E.選項(xiàng)卡

1.滿足要求：

• 選項(xiàng)卡導(dǎo)航和選項(xiàng)卡面板要同時(shí)有

• 導(dǎo)航鏈接里要設(shè)置data-toggle="tab"，并且還要設(shè)置data-target="選擇符"或href="選擇符"

• tab-pane要放在tab-content里面，要有id或樣式并與data-target或href一致

  
  

F.提示框

1.默認(rèn)沒(méi)有聲明式的用法

2.data-toggle="tooltip"

G.彈出框

1. 與提示框類似，data-toggle="popover"

   
   

H.警告框插件

1.關(guān)閉按扭需要dismiss="alert"，配合data-target="xxx"，可以在外部關(guān)閉

2.JS用法：$(xxx).alert()或$(xxx).alert('close');

I.按扭

1. 普通button使用data-toggle="button"，input需要使用data-toggle="buttons"

   
   

J.折疊

1.data-toggle="collapse"配合data-target=""使用，折疊區(qū)域使用collapse和in樣式

2.默認(rèn)隱藏折疊區(qū)域，觸發(fā)元素上添加一個(gè).collapsed樣式，去掉折疊區(qū)域的in樣式

3.JS用法：$(xxx).collapse();

K.旋轉(zhuǎn)輪播

L.自動(dòng)定位浮標(biāo)

1.Affix的效果就是浮動(dòng)的左右菜單

2.使用data-spy="affix"，包括affix-top、affix-bottom，配合data-offset使用

六、實(shí)戰(zhàn)：擴(kuò)展現(xiàn)有組件

七、實(shí)戰(zhàn)：Win8磁貼組件開(kāi)發(fā)

九、第三方擴(kuò)展

1.Font Awesome，.icon-xxx相關(guān)樣式

2.BSIE擴(kuò)展，支持IE8以下瀏覽器

3.Buttons擴(kuò)展，基于Sass和Compass構(gòu)建的CSS按扭樣式庫(kù)

4.DateTime Picker插件

5.Cikonss，純CSS實(shí)現(xiàn)的響應(yīng)式Icon插件，兼容IE8+

6.Flat UI，基于Bootstrap進(jìn)行了扁平化風(fēng)格改造

7.Bootstrap Switch，用于模擬iPhone開(kāi)關(guān)效果

8.Messager，彈框（alert）組件

關(guān)于怎么深入理解bootstrap就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。