Bootstrap CSS

這裡不打算詳細的介紹bootstrap的css元素及功能 我只是提取一些很罕見但是會用到的一些屬性 可能大家平時不會注意的一些使用

• 移動裝置相容

Bootstrap 開發的網站對移動裝置友好，確保適當的繪製和觸屏縮放，需要在網頁的 head 之中新增 viewport meta 標籤

<meta name="viewport" content="width=device-width, initial-scale=1.0">

initial-scale=1.0 確保網頁載入時，以 1:1 的比例呈現，不會有任何的縮放。

在移動裝置瀏覽器上，通過為 viewport meta

通常情況下，maximum-scale=1.0 與 user-scalable=no 一起使用。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, 
                                     user-scalable=no">

• 跨瀏覽器

Bootstrap 使用 Normalize 來建立跨瀏覽器的一致性。

Normalize.css 是一個很小的 CSS 檔案，在 HTML 元素的預設樣式中提供了更好的跨瀏覽器一致性。

• 容器

Bootstrap 3 CSS 有一個申請響應的媒體查詢，在不同的媒體查詢閾值範圍內都為 container 設定了max-width，用以匹配網格系統。

@media (min-width: 768px) {
   .container {
      width: 750px;
}

偽元素

:before 偽元素防止上邊距崩塌，:after 偽元素清除浮動。

.container:before,
.container:after {
  display: table;
  content: " ";
}

• Bootstrap 網格系統

Bootstrap 提供了一套響應式、移動裝置優先的流式網格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。

（援引）網格系統通過一系列包含內容的行和列來建立頁面佈局。下面列出了 Bootstrap 網格系統是如何工作的：

• 行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。
• 使用行來建立列的水平組。
• 內容應該放置在列內，且唯有列可以是行的直接子元素。
• 預定義的網格類，比如 .row 和 .col-xs-4，可用於快速建立網格佈局。LESS 混合類可用於更多語義佈局。
• 列通過內邊距（padding）來建立列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。
• 網格系統是通過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 .col-xs-4

Bootstrap 網格的基本結構

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

使用 .clearfix class和 響應式實用工具來解決 

<div class="container">
    <div class="row" >
        <div class="col-xs-6 col-sm-3" 
            style="background-color: #dedef8;
            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
        </div>
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

        </div>
 
        <div class="clearfix visible-xs"></div>
 
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;
        box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

        </div>
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

        </div>
    </div>
</div>

巢狀列

新增一個新的 .row，並在一個已有的 .col-md-* 列內新增一組 .col-md-* 列。被巢狀的行應包含一組列，這組列個數不能超過12（其實，沒有要求你必須佔滿12列）。

列排序

.col-md-push-* 和 .col-md-pull-* 類的內建網格列的順序，其中 * 範圍是從 1 到 11

排版

• 縮寫

Bootstrap 定義 <abbr> 元素的樣式為顯示在文字底部的一條虛線邊框，當滑鼠懸停在上面時會顯示完整的文字（只要您為 <abbr> title 屬性添加了文字）

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

• 引用

HTML 文字旁使用預設的 <blockquote>。其他選項包括，新增一個 <small> 標籤來標識引用的來源，使用 class .pull-right 向右對齊引用。