bootstrap 3, 全局樣式、組件學習總結。

時間 2019-11-16

原文原文鏈接

全局樣式css

概覽
1. 移動設備優先爲了確保適當的繪製和觸屏縮放，須要在 <head> 之中添加 viewport 元數據標籤。 user-scalable=no表示禁止縮放。

2. 佈局容器
    .container 類用於固定寬度並支持響應式佈局的容器       
    .container-fluid  類用於 100% 寬度，佔據所有視口（viewport）的容器

柵格系統
1. .row > .col- 列必須包含在行內, 默認12列根據媒體查詢將列前綴分爲4種 col-lg-* ， col-md-* , col-sm-* , col-xs-*
  在閾值處改變做用範圍。分別爲 width 等於 768px ，992px ，1200px。
2. ```
列偏移    col-lg-offset-*    表示向右偏移*列。
```
排版
1. 對齊： .text-left .text-right .text-center .justify (兩端對齊) .nowrap (不換行)
2. 改變大小寫： .text-lowercase .text-uppercase .text-capitalize
3. 基本縮略語 : <abbr title=""></abbr>
4. 首字母縮略語 : <abbr title="" class=「initialism」></abbr>
5. 引用 :<blockquote></blockquote>
6. 列表 : .list-unstyled 無樣式列表 .list-inline 內聯列表
代碼
1. 內聯代碼 : <code></code>
2. 用戶輸入 : <kbd></dbd>
3. 代碼塊 : <pre></pre>
4. 變量 : <var></var>
5. 程序輸出 :<samp></samp>

表格

表格基本樣式  .table   (每一個表格先加上的類 ，默認無邊框）

條紋狀表格    .table-striped    (給<tbody>裏行添加斑馬線效果)

```
帶邊框表格    .table-bordered
```
```
鼠標懸停效果   .table-hover
```
```
緊縮型表格    .table-condensed
```

狀態類 （改變單元格<td>或者行<tr>顏色）     .success    .info    .danger    .warning    .active

響應式表格（根據頁面大小改變大小，文字不隱藏，超出出現滾動條）    .table-responsive

表單
1. 基本格式 <form> <div class="form-group"> <label class="sr-only"></label><input class="form-control">...
  
  全部設置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認設置寬度屬性爲 width: 100%; 將 label 元素和前面提到的控件包裹在 .form-group 中能夠得到最好的排列。css
2. 內聯表單 .form-inline 只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單摺疊）。
3. 水平排列表單
經過爲表單添加 .form-horizontal 類，並聯合使用 Bootstrap 預置的柵格類，能夠將 label 標籤和控件組水平並排佈局。這樣作將改變 .form-group 的行爲，使其表現爲柵格系統中的行（row），所以就無需再額外添加 .row 了表單元素對不齊：標籤可能寫錯了 <label>--<lable>?java

> 內聯單選和多選框
經過將 .checkbox-inline 或 .radio-inline 類應用到一系列的多選框（checkbox）或單選框（radio）控件    上，可使這些控件排列在一行。

4. 下拉選

使用默認選項或添加 multiple 屬性能夠同時顯示多個選項。 eg: <select multiple class="form-control"> 5. 靜態控件若是須要在表單中將一行純文本和 label 元素放置於同一行，爲 <p> 元素添加 .form-control-static 類便可。 6. 校驗狀態 > Bootstrap 對錶單控件的校驗狀態，如 error、warning 和 success 狀態，都定義了樣式。使用時，添加 .has-warning、.has-error 或 .has-success 類到這些控件的父元素便可。任何包含在此元素以內的 .control-label、.form-control 和 .help-block 元素都將接受這些校驗狀態的樣式。 7. 控制尺寸經過 .input-lg 相似的類能夠爲控件設置高度，經過 .col-lg-* 相似的類能夠爲控件設置寬度。水平排列的表單組的尺寸--- 經過添加 .form-group-lg 或 .form-group-sm 類，爲 .form-horizontal 包裹的 label 元素和表單控件快速設置尺寸。api

按鈕
1. 聲明類.btn 預約義樣式類.btn-info .btn-danger .btn-warning .btn-success .btn-primary .btn-default
2. 按鈕尺寸類 .btn-lg .btn-sm .btn-xs
3. 經過給按鈕添加 .btn-block 類能夠將其拉伸至父元素100%的寬度，並且按鈕也變爲了塊級（block）元素。
4. 激活/禁用狀態 .active .disabled
5. <a>元素建立按鈕 .btn .btn-default(任意與定義樣式) .active(可選)
6. <input>元素建立按鈕同上
圖片
1. 響應式圖片

在 Bootstrap 版本 3 中，經過爲圖片添加 .img-responsive 類可讓圖片支持響應式佈局。其實質是爲圖片設置了 max-width: 100%; 和 height: auto; 屬性，從而讓圖片在其父元素中更好的縮放。ide

在 Internet Explorer 8-10 中，設置爲 .img-responsive 的 SVG 圖像顯示出的尺寸不勻稱。爲了解決這個問題，在出問題的地方添加 width: 100% \9; 便可。Bootstrap 並無自動爲全部圖像元素設置這一屬性，由於這會致使其餘圖像格式出現錯亂。 2. 圖片形狀類 .img-rounded .img-circle .img-thumbnail工具

響應式工具
1. 可用的類對應屏幕是否可見、如何顯示 .visible-xs-* .visible-sm-* .visible-md-* .visible-lg-*
  .hidden-xs .hidden-sm .hidden-md .hidden-lg ＊多是.visible--block .visible--inline .visible-*-inline-block
2. 打印類對應打印機是否可見、如何顯示 .visible-print-block .visible-print-inline .visible-print-inline-block .hidden-print

組件

Glyphicons 字體圖標佈局
1. 不要和其餘組件混合使用
2. 只對內容爲空的元素起做用
3. 應該建立一個嵌套的 <span> 標籤，並將圖標類應用到這個 <span> 標籤上。
4. 必須加一類 .glyphicon 再加一個名稱類如 glyphicon-ok-sign
下拉菜單用於顯示連接列表的可切換、有上下文的菜單。字體

將下拉菜單觸發器和下拉菜單都包裹在 .dropdown 裏，或者另外一個聲明瞭 position: relative; 的元素。而後加入組成菜單的 HTML 代碼。動畫
1. 結構。div .dropdown data-toggle="dropdown" > button + span.caret + ul .dropdown-menu > li
2. 對齊右對齊： div .dropdown .pull-right , ul .dropdown-menu dropdown-menu-right
3. 標題 li .dropdown-header
4. 分割線 li .divider
5. 禁用 li .disabled
按鈕組經過按鈕組容器把一組按鈕放在同一行裏。經過與按鈕插件聯合使用，能夠設置爲單選框或多選框的樣式和行爲。網站
1. 實例 div . btn-group
2. 工具欄 div .btn-toolbar > div btn-group + div btn-group ..
3. 尺寸 .btn-group-* (xs、sm、lg)
4. 嵌套 .btn-group > .btn-group
  把下拉選混入按鈕組。不須要.dropdown
5. 垂直排列 .btn-group .btn-group-vertical
6. 兩端對齊 .btn-group .btn-group-justified （如果<a>元素按鈕,justified可用。如果<button>，每個<button>元素都要單獨放在一個div .btn-group中）
按鈕式下拉菜單
1. 分列式下拉菜單，將<span class="caret"> 和按鈕名分別放在一個<button>中.
2. 向上彈出式菜單 .dropup
輸入框組經過在文本輸入框 <input> 前面、後面或是兩邊加上文字或按鈕，能夠實現對錶單控件的擴展。爲 .input-group 賦予 .input-group-addon 類，能夠給 .form-control 的前面或後面添加額外的元素。
1. 僅支持<input>元素不支持在輸入框的單獨一側添加多個額外元素不支持在單個輸入框組中添加多個表單控件
2. 尺寸 .input-group-*
3. 做爲額外元素的多選框和單選框寫在 <span input-group-addon>中
4. 做爲額外元素的按鈕：寫在 <span input-group-btn>中
5. 做爲額外元素的按鈕式下拉菜單：只能用按鈕式下拉菜單。
6. 做爲額外元素的分裂式按鈕下拉菜單：同上。
導航 Bootstrap 中的導航組件都依賴同一個 .nav 類，狀態類也是共用的。改變修飾類能夠改變樣式。
1. 標籤頁：ul .nav .nav-tabs > li
  
  注意 .nav-tabs 類依賴 .nav 基類。
2. 膠囊式標籤頁：ul .nav .nav-pills > li
3. 兩端對齊的標籤頁 : .nav-justified
4. 禁用的連接： li .disabled
5. 添加下拉菜單 : li .dropdown （下拉選）
6. 導航點擊交互效果 js 代碼

- 導航條
        導航條是在您的應用或網站中做爲導航頁頭的響應式基礎組件。它們在移動設備上能夠摺疊（而且可開可關），且在視口（viewport）寬度增長時逐漸變爲水平展開模式。
    1. 格式： nav .navbar .navbar-* > div .navbar-header + div .collapse  .navbar-collapse >導航ul .nav  .navbar-nav +form .navbar-form .navbar-left  + 導航.navbar-right  .navbar-nav .nav
    2. 表單    在導航條裏添加表單 加類 .navbar-form    
    3. 按鈕    在導航條裏添加按鈕   添加類.navbar-btn 可垂直居中   也能夠直接方法哦上述表單中，不需添加這個類。
    4. 文本    在導航條裏添加文本      .navbar-text
    5. 非導航的連接
            或許你但願在標準的導航組件以外添加標準連接，那麼，使用 .navbar-link 類可讓連接有正確的默認顏色和反色設置。
    6. 組件排列    .navbar-left     .navbar-right
    7. 固定在頂部    固定在底部
            添加 .navbar-fixed-top/.navbar-fixed-bottom 類可讓導航條固定在頂部，還可包含一個 .container 或 .container-fluid 容器，從而讓導航條居中，並在兩側添加內部（padding）。
    >這個固定的導航條會遮住頁面上的其它內容，除非你給 <body> 元素底部設置了 padding。用你本身的值，或用下面給出的代碼均可以。提示：導航條的默認高度是 50px。
    ```
body { padding-top: 70px; }    body { padding-bottom: 70px; }

8. 靜止在頂部    .navbar-static-top
        它會隨着頁面向下滾動而消失,不用給 body 添加任何內部（padding）
9. 反色的導航條         
          經過添加 .navbar-inverse 類能夠改變導航條的外觀

路徑導航 ul中添加 .breadcrumb
分頁 .pagination
1. 尺寸 .pagination-lg .pagination-sm
2. 翻頁（只有向前、向後）ul中添加 .pager
對齊連接在翻頁ul >li 中添加類 .previous .next 3. 可選的禁用狀態，激活狀態 li .active li .disabled
標籤 span .label .label-default

/ .label-primary / .label-success / .label-info /.label-danger /.label-warning

徽章給連接、導航等元素嵌套 <span class="badge"> 元素，能夠很醒目的展現新的或未讀的信息條目。
巨幕 .jumbotron
頁頭
頁頭組件可以爲 h1 標籤增長適當的空間，而且與頁面的其餘部分造成必定的分隔。它支持 h1 標籤內內嵌 small 元素的默認效果，還支持大部分其餘組件（須要增長一些額外的樣式）。
縮略圖 .thumbnail (圖片建議放在<a>元素中)
1. 自定義內容 div .thumbnail > img +div.caption
警告框
1. .alert ( 這個必須設置) .alert-success 等沒有默認選項。
2. 可關閉的警告框務必給 <button> 元素添加 data-dismiss="alert" 屬性。（× 是 ‘ × ’ 號）
3. 警告框中的連接 a .alert-link
進度條
1. ```
格式     div .progress > div .progress-bar style="width:**%" >**%
```
2. ```
進度條數字較低狀況  ： 在style 中添加   min-width:20px;
```
3. 根據情景變換效果 progress-bar-info 、..success 、 ..warning 、..danger
4. 條紋效果在 .progress裏添加 .progress-striped或在 .progress-bar 裏添加.progress-bar-striped
5. 動畫效果在 .progress 里加 active . 或者 .progress-bar里加active
6. 堆疊效果在 .progress裏添加多個 .progress-bar (超過100%會換行。。)
媒體對象
1. 默認樣式 div .media > (a .media-left > img ) +(div .media-body >h*.media-heading)
2. 媒體對象列表 ul .media-list > li .media .......
  
  （媒體對象的meida-body裏嵌入媒體對象可現實出層級縮進效果）
列表組
1. 基本實例 ul .list-group > li .list-group-item
2. 徽章在 li 中加入徽章 <span class="badge>
3. 連接把ul 元素換成 div，吧 li 標籤換成 <a>標籤。
4. 被禁用的條目 a .disabled
5. 情景類列表項.list-group-item 中添加類 .list-group-item-info ...等
6. 定製內容列表項中可添加　定製內容，能夠類　.list-group-item-heading .list-group-item-text
面板 panel 默認的 .panel 組件所作的只是設置基本的邊框（border）和內補（padding）來包含內容。
1. 帶標題的面板面板 .panel 面板標題.panel-heading 面板內容 .panel-body .panel-title
2. ```
帶腳註的面板    .panel-footer
```
3. 情景效果 .panel-primary ..info...danger...warning...success...default
4. 帶表格的面板在.panel 中 .panel-body外添加 table .table
5. 帶列表組的面板同上加入 ul .list-group
具備響應式特性的嵌入內容 div .embed-responsive-16by9 (或者 4by3) > <iframe>、<embed>、<video> 和 <object> 可直接行程響應式的元素。若是你但願讓最終樣式與其餘屬性相匹配，還能夠明確地使用一個派生出來的 .embed-responsive-item 類。