? ? ?Bootstrap

css框架框架：就是一些文件，css類型，js類型，就是常見的css或者是js代碼，在開發(fā)網(wǎng)頁的過程中，會有許多操作或者是樣式重復(fù)使用，那么就將這些重復(fù)使用到的代碼集合到了一個文件里面，假如開發(fā)者想用此功能或者此樣式，就直接導(dǎo)入這個文件，直接進行使用。

死代碼：僵尸代碼，就是代表的一個意思

Bootstrap里面放置了很多的常用的樣式，只需要直接調(diào)用類名就行Bootstrap支持響應(yīng)式布局的框架

響應(yīng)式布局：當(dāng)進行瀏覽器窗口的放大縮小的時候，還能完整地看到里面的內(nèi)容

百度：半響應(yīng)式

淘寶京東這樣的大型網(wǎng)站為什么不做成響應(yīng)式：

1.內(nèi)容太多，展示的商品特別多，用戶體驗不好

2.適配各種手機的屏幕

3.開發(fā)過程很是繁瑣，都得考慮兼容性，不容易維護

4.用戶體驗：消耗流量

大型網(wǎng)站單獨給手機端做了一個網(wǎng)站

列如（m.taobao.com）,mobile

適合做成響應(yīng)式的：閱讀性的網(wǎng)站Bootstrap其實是以移動端優(yōu)先的框架（柵格系統(tǒng)）bootstrap的官網(wǎng)：www.getbootstrap.com

Bootstrap三部分：樣式，組件,js插件

Boostrap內(nèi)容：

css：設(shè)置樣式

fonts:設(shè)置字體

js:js操作，js插件，必須結(jié)合jQuery使用

github網(wǎng)站：可以進行框架的下載，也可以在里面分享自己所寫的內(nèi)容Bootstrap

用法：

1.必須先在html文件里面外鏈bootstrap.csslinkbootstrap.css:相當(dāng)于我們自己寫的css文件，樣式，注釋，空格

bootstrap.min.css:經(jīng)過壓縮的css文件，只有樣式，沒有注釋也沒有空格，文件比較小，占內(nèi)存空間小，用戶體驗，流量消耗

CDN:內(nèi)容分發(fā)網(wǎng)絡(luò)，將文件放入到服務(wù)器目錄下面，直接將url地址放入到link里面就可以直接進行框架的使用（必須得有網(wǎng)）

CDN好處：快速，有緩存，流量

2.進行類名的設(shè)置排版：

1.標題h1--h6:和原來的樣式有些不一樣，還提供.h1--.h6的使用

2.副標題(small)：放置在h級標簽里面使用

3.頁面主體：只要使用了bootstrap，那么body里面的文字大小默認為14px,字體類型 Helvetica Neue ，line-height是 1.428571434.

中心內(nèi)容：.lead,使段落突出顯示

5.mark標簽: 使文字高亮

6.刪除線：del

7.無用文本：,也是刪除線

8.下劃線：ins ? ?u

9.小號文本：,將字體大小變?yōu)?5%,將small標簽加入h級標簽里面使用的時候，會額外地添加一些樣式

10.字體加粗：strong

11.斜體: em

12.對齊：.text-left,.text-right,.text-center,.justify,text-nowrap

13.文字大小寫

（text-transform）:.text-uppercase: 全部大寫

.text-lowwercase：全部小寫

.text-capitalize:首字母大寫

14.縮略語： ,結(jié)合title屬性使用

15.首字母縮略語：.initialism,縮略語的文字變小

16.地址：address，將地址放入標簽里面

17.引用：blockquote，在標簽里面放入p標簽代表引用的內(nèi)容，樣式為居中顯示

18.列表:在列表里面加入.list-inline,就可以使列表項在一行顯示.list-unstyled: 列表沒有默認樣式代碼：

1.:和mark效果是一樣的，使內(nèi)容高亮，一般用來使某個代碼高亮

2.:原型輸出，和以前用法一樣，可以在里面放置許多代碼表格：

1.去掉了一些默認樣式，邊距

2.在table標簽里面加上.table

3.加上表格的邊框線：.table-bordered

4.鼠標移入到表格的哪行：.table-hover

5.有關(guān)于表格的許多效果都只在tbody里面生效

6.條紋狀表格（斑馬線）：.table-striped

7.緊縮表格，將表格的padding縮小：.table-condensed

8.狀態(tài)類表格，給每一行單元格設(shè)置不同的狀態(tài).active: 激活狀態(tài)

,斑馬線表格的顏色

.success: 成功狀態(tài),淺綠色

.info:顯示信息,淺藍色

.warning:標識警告

.danger:標識危險

9.響應(yīng)式表格：默認為就是響應(yīng)式的，將.table加入到.table-responsive元素里面，在沒有bordered的情況下，給表格增加了上面和下面的線，用來標識表格的范圍圖片：

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

2.圖片的形狀：

圓角框：.img-rounded

圓形：.img-circle

縮略圖：.img-thumbnail(多上一個邊框)

按鈕：button,a(input type="button",在IE8里面存在兼容性問題)

1.必須給button標簽寫上.btn類

2.默認樣式：.btn-default

3.在a標簽里面使用role屬性，告知此標簽是用來做什么的，SEO

4.button標簽在表單里面會觸發(fā)提交的操作。

5.使用了類只是改變了樣式，并不能改變其原有的操作

6.樣式：首選項，btn-primary

7.成功：btn-success

8.信息：btn-info

9.警告：btn-warning

10.危險：btn-danger

11.鏈接：btn-link

12.最大尺寸：btn-lg

13.小尺寸: btn-sm

14.超小尺寸：btn-xs

15.轉(zhuǎn)化為塊級元素：btn-block,寬度是button父元素的寬度

16.button的激活狀態(tài)：.active

17.button的禁用狀態(tài)：設(shè)置disabled屬性

18.隱藏元素的樣式：.sr-only

輔助類：1.情景顏色：文本的：.text-狀態(tài)的單詞（success,primary,info,warning,danger）

按鈕的：.

btn-狀態(tài)單詞背景顏色：.bg-狀態(tài)的單詞

2.關(guān)閉按鈕：給button設(shè)置.close,可以關(guān)閉模態(tài)框和警告框，關(guān)閉按鈕的實體字符(×)

3.三角框，一般用來做下拉列表右邊顯示的部分：.caret,一般加在行內(nèi)元素里面(span,i)

4.快速浮動：.pull-left:左浮動.pull-right:右浮動

5.清除浮動.clearfix6.居中顯示：.center-block

7.顯示：.show(display:block)

8.隱藏：.hidden屏幕閱讀器：屏幕的閱讀軟件，可以將屏幕上的文字，圖片，視頻之類的內(nèi)容以閱讀出來。

.sr-only這個類對屏幕閱讀器無效，.hidden是支持屏幕閱讀器表單：

1. .form-control： 表單控制類，加了此樣式，就能看到bootstrap里面的表單樣式了，寬度是100%

2.將label和表單控件都放置在一個.form-group里面，可以獲得更好的排列

3.內(nèi)聯(lián)表單：在form標簽里面設(shè)置.form-inline，可以使表單里面的元素共處一行顯示

4.form-block: 塊級表單,每個元素獨占一行顯示

5.一定要將label標簽放于表單控件一起寫，是為了防止屏幕閱讀器不能正確地識別表單元素

6.label的隱藏使用sr-only，要保證屏幕閱讀器能識別，并且在界面上顯示不出來此提示內(nèi)容7.aria-* 不需要去管，還是為了讓屏幕閱讀器識別

8.如果以上屬性不存在，可以在控件里面寫上placeholder

9.如果要講輸入框和其他元素放置在一起顯示，則需要將這些元素都放置在.input-group

10.柵格系統(tǒng)：將瀏覽器窗口分為了12等份

11.表單控件的type屬性必須得寫

12.如果要使控件不能點擊，則設(shè)置.disabled類

13.單選按鈕和復(fù)選框的用法都是一樣的，將控件與選擇的文字放置同一個label標簽里面，再將label放置在有.checkbox或者.radio的類里面