教程推薦：bootstrap教程

創(chuàng)新互聯(lián)長期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為秦淮企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)，秦淮網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

Bootstrap中文網(wǎng)：http://www.bootcss.com/

1.什么是 Bootstrap？

官方介紹：簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，讓web開發(fā)更迅速、簡單。

2.Bootstrap下載

Bootstrap3下載地址：http://v3.bootcss.com/getting...

3.Bootstrap文件目錄結(jié)構(gòu)

dist
    -css
        -bootstrap.css
        -bootstrap.css.map
        -bootstrap.min.css（常用）
        -bootstrap-theme.css
        -bootstrap-theme.css.map
        -bootstrap-theme.min.css
    -fonts
        -glyphicons-halflings-regular.eot
        -glyphicons-halflings-regular.svg
        -glyphicons-halflings-regular.ttf
        -glyphicons-halflings-regular.woff
    -js
        -bootstrap.js
        -bootstrap.min.js（常用）
        -npm.js

4.Bootstrap依賴

要想使用 Bootstrap，那么必須先引入 jQuery（jquery.min.js）文件。

5.使用 Bootstrap

壓縮版本適于實(shí)際應(yīng)用，未壓縮版本適于開發(fā)調(diào)試過程

直接引用官網(wǎng)下載下來的文件。

使用 Bootstrap 中文網(wǎng)提供的免費(fèi) CDN 服務(wù)。

6.Bootstrap基本模板

  
    
    
    
    

    
    

    
    
    
  
  
    
你好，世界！

    
    
    
    
  

Bootstrap 實(shí)例精選：http://v3.bootcss.com/getting-started/#examples

Bootstrap 使用到的某些 HTML 元素和 CSS 屬性需要將頁面設(shè)置為 HTML5 文檔類型。

  ...

在 bootstrap3 中移動設(shè)備優(yōu)先考慮的。為了保證適當(dāng)?shù)睦L制和觸屏縮放，需要在之中添加 viewport元數(shù)據(jù)標(biāo)簽。

在移動設(shè)備瀏覽器上，可以通過視口 viewport 設(shè)置meta屬性為user-scalable=no可以禁用其縮放（zooming）功能，這樣后用戶只能滾動屏幕。（看情況而定）

Bootstrap 排版、鏈接樣式設(shè)置了基本的全局樣式。分別是：

為 body元素設(shè)置 background-color: #fff;

使用 @font-family-base、@font-size-base和 @line-height-basea變量作為排版的基本參數(shù)

為所有鏈接設(shè)置了基本顏色 @link-color，并且當(dāng)鏈接處于 :hover狀態(tài)時才添加下劃線

這些樣式都能在 scaffolding.less文件中找到對應(yīng)的源碼。

為了增強(qiáng)跨瀏覽器表現(xiàn)的一致性，bootstrap使用了 Normalize.css，這是由 Nicolas Gallagher 和 Jonathan Neal 維護(hù)的一個CSS 重置樣式庫。

Bootstrap 需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個 .container容器。Bootstrap提供了兩個作此用處的類。注意，由于 padding等屬性的原因，這兩種容器類不能互相嵌套。

.container類用于固定寬度并支持響應(yīng)式布局的容器。

  ...

.container-fluid類用于 100% 寬度，占據(jù)全部視口（viewport）的容器。

  ...

Bootstrap 提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin 用于生成更具語義的布局。

柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。下面就介紹一下 Bootstrap 柵格系統(tǒng)的工作原理：

“行（row）”必須包含在 .container（固定寬度）或 .container-fluid（100% 寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。

通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。

你的內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。

類似 .row和 .col-xs-4這種預(yù)定義的類，可以用來快速創(chuàng)建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創(chuàng)建語義化的布局。

通過為“列（column）”設(shè)置 padding屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為 .row元素設(shè)置負(fù)值margin從而抵消掉為 .container元素設(shè)置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。

The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.

Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md-class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-class is not present.

通過研究后面的實(shí)例，可以將這些原理應(yīng)用到你的代碼中。

在柵格系統(tǒng)中，我們在 Less 文件中使用以下媒體查詢（media query）來創(chuàng)建關(guān)鍵的分界點(diǎn)閾值。

/* 超小屏幕（手機(jī)，小于 768px） */
/* 沒有任何媒體查詢相關(guān)的代碼，因為這在 Bootstrap 中是默認(rèn)的（還記得 Bootstrap 是移動設(shè)備優(yōu)先的嗎？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面顯示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面顯示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

偶爾也會在媒體查詢代碼中包含 max-width從而將 CSS 的影響限制在更小范圍的屏幕大小之內(nèi)

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

通過下表可以詳細(xì)查看 Bootstrap 的柵格系統(tǒng)是如何在多種屏幕設(shè)備上工作的。

使用單一的一組 .col-md-*柵格類，就可以創(chuàng)建一個基本的柵格系統(tǒng)，在手機(jī)和平板設(shè)備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設(shè)備上變?yōu)樗脚帕小Ｋ小傲校╟olumn）必須放在 ” .row內(nèi)。

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1


  
.col-md-8
  
.col-md-4


  
.col-md-4
  
.col-md-4
  
.col-md-4


  
.col-md-6
  
.col-md-6

是否不希望在小屏幕設(shè)備上所有列都堆疊在一起？那就使用針對超小屏幕和中等屏幕設(shè)備所定義的類吧，即 .col-xs-*和 .col-md-*。請看下面的實(shí)例，研究一下這些是如何工作的。

  
.col-xs-12 .col-md-8
  
.col-xs-6 .col-md-4




  
.col-xs-6 .col-md-4
  
.col-xs-6 .col-md-4
  
.col-xs-6 .col-md-4




  
.col-xs-6
  
.col-xs-6

HTML 中的所有標(biāo)題標(biāo)簽，到 均可使用。另外，還提供了 .h1到 .h6類，為的是給內(nèi)聯(lián)（inline）屬性的文本賦予標(biāo)題的樣式

h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading

在標(biāo)題內(nèi)還可以包含 標(biāo)簽或賦予 .small類的元素，可以用來標(biāo)記副標(biāo)題。

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text
h3. Bootstrap heading Secondary text
h4. Bootstrap heading Secondary text
h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text

...

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.

Lowercased text.
Uppercased text.
Capitalized text.