BootStrap入門(mén)教程 (一)

文檔集成 2015-10-21

展開(kāi)全文

2011年，twitter的“一小撮”工程師為了提高他們內(nèi)部的分析和管理能力，用業(yè)余時(shí)間為他們的產(chǎn)品構(gòu)建了一套易用、優(yōu)雅、靈活、可擴(kuò)展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所設(shè)計(jì)和建立，在github上開(kāi)源之后，迅速成為該站上最多人watch&fork的項(xiàng)目。大量工程師踴躍為該項(xiàng)目貢獻(xiàn)代碼，社區(qū)驚人地活躍，代碼版本進(jìn)化非常快速，官方文檔質(zhì)量極其高(可以說(shuō)是優(yōu)雅)，同時(shí)涌現(xiàn)了許多基于Bootstrap建設(shè)的網(wǎng)站：界面清新、簡(jiǎn)潔;要素排版利落大方。如下圖所示：

https:///

http://www./

GitHub上這樣介紹 bootstrap：簡(jiǎn)單靈活可用于架構(gòu)流行的用戶界面和交互接口的html,css,javascript工具集?；趆tml5、css3的bootstrap，具有大量的誘人特性：友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計(jì)，12列格網(wǎng)，樣式向?qū)臋n，自定義JQuery插件，完整的類(lèi)庫(kù)，基于Less等。本系列教程遵循官方文檔結(jié)構(gòu)來(lái)介紹bootstrap，包括手腳架（Scaffolding),基礎(chǔ)CSS,組件,javascript插件，使用LESS與自定義.本文主要介紹Bootstrap的基礎(chǔ)布局--Scaffolding.

Bootstrap建立了一個(gè)響應(yīng)式的12列格網(wǎng)布局系統(tǒng)，它引入了fixed和fluid-with兩種布局方式。我們從全局樣式(Global Style),格網(wǎng)系統(tǒng)(Grid System),流式格網(wǎng)(Fluid grid System),自定義(Customing),布局(Layouts),~~響應(yīng)式設(shè)計(jì)(Responsive Design)~~這六五個(gè)方面深入講解Boostrap的scaffolding.

全局樣式(Global Style).Bootstrap要求html5的文件類(lèi)型，所以必須在每個(gè)使用bootstrap頁(yè)面的開(kāi)頭都引用:
```
<!DOCTYPE html>
<html lang="en">
  ...
</html>
```
同時(shí)，它通過(guò)Bootstrap.less文件來(lái)設(shè)置全局的排版和連接顯示風(fēng)格.其中去掉了Body的margin，使用@baseFontFamily,@baseFontSize,@linkColor等變量來(lái)控制基本排版。
格網(wǎng)系統(tǒng)(Grid System).默認(rèn)的Bootstrap格網(wǎng)系統(tǒng)提供一個(gè)寬達(dá)940像素的,12列的格網(wǎng)。這意味著你頁(yè)面默認(rèn)寬度是940px,最小的單元要素寬度是940/12px.Bootstrap能夠使得你的網(wǎng)頁(yè)可以更好地適應(yīng)多種終端設(shè)備(平板電腦，智能手機(jī)等)。默認(rèn)格網(wǎng)系統(tǒng)直觀概念如圖1-1所示：圖1-1 默認(rèn)格網(wǎng)系統(tǒng)(Default Grid System) 以下簡(jiǎn)單的代碼則是實(shí)現(xiàn)圖1-1中，第三列的寬度為4和寬度為8的兩個(gè)div.
```
<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>
```
2.2 偏移列. 有時(shí)候，頁(yè)面要素前面需要一些空白，bootstrap提供了偏移列來(lái)實(shí)現(xiàn)，如圖1-2所示：

圖1-２偏移列(Offset columns)

以下代碼實(shí)現(xiàn)了是實(shí)現(xiàn)圖1-2中，第一列的寬度為4和偏移度為4寬度為4的兩個(gè)div.
```
<div class="row">
  <div class="span4">...</div>
  <div class="span4 offset4">...</div>
</div>
```
2.3 嵌套列. 嵌套列是容許用戶實(shí)現(xiàn)更復(fù)雜的頁(yè)面要素布局。在bootstrap中實(shí)現(xiàn)嵌套列非常簡(jiǎn)單，只需要在原有的div中加入.row 和相應(yīng)的長(zhǎng)度的span* div即可。如圖1-3所示：

圖1-3 嵌套列(Nesting columns)

以下代碼實(shí)現(xiàn)了是實(shí)現(xiàn)圖1-3中，第一層的寬度為12和第二層兩個(gè)寬度為6的兩個(gè)div.
```
<div class="row">
  <div class="span12">
    Level 1 of column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>
```
嵌套的div長(zhǎng)度之和不能大于它的父div，否則會(huì)溢出疊加。各位可以試試將第一層的div長(zhǎng)度改為其他值，看看效果。
流式格網(wǎng)系統(tǒng)(Fluid grid system).它使用%，而不是固定的px,來(lái)確定頁(yè)面要素的寬度.只需要簡(jiǎn)單的將.row 改成.row-fluid ，就可以將fixed行改為fluid.如圖1-4所示：圖1-4 流式格網(wǎng)系統(tǒng)(Fluid grid system) 以下代碼實(shí)現(xiàn)了是實(shí)現(xiàn)圖1-4中，兩個(gè)不同長(zhǎng)度的流式頁(yè)面要素.
```
<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>
```
嵌套的流式格網(wǎng)和嵌套的固定格網(wǎng)，稍微有些不同。嵌套流式格網(wǎng)(Fluid nesting)的子要素不用匹配父要素的寬度，子要素用100%來(lái)表示占滿父要素的頁(yè)面寬度。

自定義格網(wǎng)(Grid customization).Bootstrap允許通過(guò)修改variables.less的參數(shù)值來(lái)自定義格網(wǎng)系統(tǒng)。主要包括如表1-1所示的變量：

變量	默認(rèn)值	說(shuō)明
`@gridColumns`	12	列數(shù)
`@gridColumnWidth`	60px	每列的寬度
`@gridGutterWidth`	20px	列間距

表1-1 格網(wǎng)變量我們通過(guò)修改以上值，并重新編譯Bootstrap來(lái)實(shí)現(xiàn)自定義格網(wǎng)系統(tǒng)。如果添加新的列，需要同時(shí)修改grid.less.同樣的,需要修改responsive.less來(lái)獲得多設(shè)備兼容.

布局(Layout).本文最后我們討論創(chuàng)建頁(yè)面基礎(chǔ)模板的布局。如前面所言，Bootstrap提供兩種布局方式，包括固定(Fixed)和流式(Fliud)布局。如圖1-5所示，左邊為Fixed布局，右邊為Fluid布局：圖1-5 布局(Layout) 固定布局代碼如下：
```
<body>
  <div class="container">
    ...
  </div>
</body>
```
流式布局代碼如下：
```
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      
    </div>
    <div class="span10">
      
    </div>
  </div>
</div>
```
如果對(duì)Bootstrap提供的布局不夠滿意，可以參見(jiàn)Less Frame Work 提供的模板。

最后，再次強(qiáng)調(diào)，官方文檔極其優(yōu)秀，強(qiáng)烈推薦各位直接參考和學(xué)習(xí)之。http://twitter.github.com/bootstrap/index.html

參考文獻(xiàn)與延伸閱讀：

1.Bootstrap的來(lái)由和發(fā)展。http://www./articles/building-twitter-bootstrap/

2.Less與Sass的介紹與對(duì)比.http://coding./2011/09/09/an-introduction-to-less-and-comparison-to-sass/

3.Html5模板 http:///

4.Html5與Bootstrap混合項(xiàng)目(H5BP)https://gist.github.com/1422879

5.20個(gè)有用的Bootstrap資源 http://www./20-beautiful-resources-that-complement-twitter-bootstrap/

6.Bootstrap按鈕生成器 http:///bootstrap_buttons/

7.前后端結(jié)合討論 http:///questions/9525170/backend-technology-for-front-end-technologies-like-twitter-bootstrap

8. Bootstrap英文教程 http://webdesign./tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/

本作品由VentLam創(chuàng)作，采用知識(shí)共享署名-非商業(yè)性使用-相同方式共享 2.5 中國(guó)大陸許可協(xié)議進(jìn)行許可。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：文檔集成 > 《web》

舉報(bào)/認(rèn)領(lǐng)