? ? ?Bootstrap

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

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

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

響應式布局：當進行瀏覽器窗口的放大縮小的時候，還能完整地看到里面的內容

百度：半響應式

淘寶京東這樣的大型網站為什么不做成響應式：

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

2.適配各種手機的屏幕

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

4.用戶體驗：消耗流量

大型網站單獨給手機端做了一個網站

列如（m.taobao.com）,mobile

適合做成響應式的：閱讀性的網站Bootstrap其實是以移動端優先的框架（柵格系統）bootstrap的官網：www.getbootstrap.com

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

Boostrap內容：

css：設置樣式

fonts:設置字體

js:js操作，js插件，必須結合jQuery使用

github網站：可以進行框架的下載，也可以在里面分享自己所寫的內容Bootstrap

用法：

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

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

CDN:內容分發網絡，將文件放入到服務器目錄下面，直接將url地址放入到link里面就可以直接進行框架的使用（必須得有網）

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

2.進行類名的設置排版：

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

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

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

中心內容：.lead,使段落突出顯示

5.mark標簽: 使文字高亮

6.刪除線：del

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

8.下劃線：ins ? ?u

9.小號文本：,將字體大小變為85%,將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.縮略語： ,結合title屬性使用

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

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

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

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

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

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

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

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

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

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

5.有關于表格的許多效果都只在tbody里面生效

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

7.緊縮表格，將表格的padding縮?。?table-condensed

8.狀態類表格，給每一行單元格設置不同的狀態.active: 激活狀態

,斑馬線表格的顏色

.success: 成功狀態,淺綠色

.info:顯示信息,淺藍色

.warning:標識警告

.danger:標識危險

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

1.響應式圖片：.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標簽在表單里面會觸發提交的操作。

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.轉化為塊級元素：btn-block,寬度是button父元素的寬度

16.button的激活狀態：.active

17.button的禁用狀態：設置disabled屬性

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

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

按鈕的：.

btn-狀態單詞背景顏色：.bg-狀態的單詞

2.關閉按鈕：給button設置.close,可以關閉模態框和警告框，關閉按鈕的實體字符(×)

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

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

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

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

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

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

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

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

3.內聯表單：在form標簽里面設置.form-inline，可以使表單里面的元素共處一行顯示

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

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

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

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

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

10.柵格系統：將瀏覽器窗口分為了12等份

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

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

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