bootstrap學習筆記--bootstrap佈局方式

時間 2019-11-11

標籤 bootstrap 學習筆記佈局方式欄目 Bootstarp 简体版

原文原文鏈接

Bootstrap 3 是移動設備優先的，在這個意義上，Bootstrap 代碼從小屏幕設備（好比移動設備、平板電腦）開始，而後擴展到大屏幕設備（好比筆記本電腦、臺式電腦）上的組件和網格。佈局

移動設備優先策略

內容
- 決定什麼是最重要的。
佈局
- 優先設計更小的寬度。
- 基礎的 CSS 是移動設備優先，媒體查詢是針對於平板電腦、臺式電腦。
漸進加強
- 隨着屏幕大小的增長而添加元素。

響應式網格系統隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。以下圖：測試

Bootstrap 網格系統（Grid System）的工做原理

網格系統經過一系列包含內容的行和列來建立頁面佈局。下面列出了 Bootstrap 網格系統是如何工做的：設計

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

媒體查詢

媒體查詢是很是別緻的"有條件的 CSS 規則"。它只適用於一些基於某些規定條件的 CSS。若是知足那些條件，則應用相應的樣式。blog

Bootstrap 中的媒體查詢容許您基於視口大小移動、顯示並隱藏內容。下面的媒體查詢在 LESS 文件中使用，用來建立 Bootstrap 網格系統中的關鍵的分界點閾值。排序

/* 超小設備（手機，小於 768px） */
/* Bootstrap 中默認狀況下沒有媒體查詢 */

/* 小型設備（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型設備（臺式電腦，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型設備（大臺式電腦，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

咱們有時候也會在媒體查詢代碼中包含 max-width，從而將 CSS 的影響限制在更小範圍的屏幕大小以內。頁面佈局

@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) { ... }

媒體查詢有兩個部分，先是一個設備規範，而後是一個大小規則。在上面的案例中，設置了下列的規則：table

讓咱們來看下面這行代碼：class

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

對於全部帶有 min-width: @screen-sm-min 的設備，若是屏幕的寬度小於 @screen-sm-max，則會進行一些處理。容器

網格選項

下表總結了 Bootstrap 網格系統如何跨多個設備工做：基礎

	超小設備手機（<768px）	小型設備平板電腦（≥768px）	中型設備臺式電腦（≥992px）	大型設備臺式電腦（≥1200px）
網格行爲	一直是水平的	以摺疊開始，斷點以上是水平的	以摺疊開始，斷點以上是水平的	以摺疊開始，斷點以上是水平的
最大容器寬度	None (auto)	750px	970px	1170px
Class 前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-
列數量和	12	12	12	12
最大列寬	Auto	60px	78px	95px
間隙寬度	30px （一個列的每邊分別 15px）	30px （一個列的每邊分別 15px）	30px （一個列的每邊分別 15px）	30px （一個列的每邊分別 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

基本的網格結構

下面是 Bootstrap 網格的基本結構：

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

下面是個具體代碼實例：

<div class="container">
        <h1>Hello, world!</h1>
        <div class="row">
            <!--超小設備手機（<768px） -->
            <div class="col-xs-1" style="background: #f00">1</div>
            <div class="col-xs-1" style="background: #b2b0b0">2</div>
            <div class="col-xs-1" style="background: #ff6a00">3</div>
            <div class="col-xs-1" style="background: #ffd800">4</div>
            <div class="col-xs-1" style="background: #4cff00">5</div>
            <div class="col-xs-1" style="background: #0ff">6</div>
            <div class="col-xs-1" style="background: #0094ff">7</div>
            <div class="col-xs-1" style="background: #b200ff">8</div>
            <div class="col-xs-1" style="background: #ff00dc">9</div>
            <div class="col-xs-1" style="background: #ff006e">10</div>
            <div class="col-xs-1" style="background: #ac5050">11</div>
            <div class="col-xs-1" style="background: #54bd4f">12</div>
        </div>
        <div class="row">
            <!--小型設備平板電腦（≥768px） -->
            <div class="col-sm-4" style="background: #b2b0b0">1</div>
            <div class="col-sm-4" style="background: #ffd800">1</div>
            <div class="col-sm-4" style="background: #ac5050">1</div>
        </div>
        <div class="row">
            <!--中型設備臺式電腦（≥992px） -->
            <div class="col-md-4" style="background: #ac5050">1</div>
            <div class="col-md-8" style="background: #54bd4f">1</div>
        </div>
        <div class="row">
            <!--大型設備臺式電腦（≥1200px） -->
            <div class="col-lg-8" style="background: #ac5050">1</div>
            <div class="col-lg-4" style="background: #54bd4f">1</div>
        </div>
    </div>

偏移列

偏移是一個用於更專業的佈局的有用功能。它們可用來給列騰出更多的空間。例如，.col-xs=* 類不支持偏移，可是它們能夠簡單地經過使用一個空的單元格來實現該效果。

爲了在大屏幕顯示器上使用偏移，請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增長 * 列，其中 * 範圍是從 1到 11。

在下面的實例中，咱們有 <div class="col-md-6">..</div>，咱們將使用 .col-md-offset-3 class 來居中這個 div。

<div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-offset-3"
                style="background-color: #dedef8;">
                <p>
               測試偏移列---此處往右偏移了3列
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-1" style="background: #f00">1</div>
            <div class="col-xs-1" style="background: #b2b0b0">2</div>
            <div class="col-xs-1" style="background: #ff6a00">3</div>
            <div class="col-xs-1" style="background: #ffd800">4</div>
            <div class="col-xs-1" style="background: #4cff00">5</div>
            <div class="col-xs-1" style="background: #0ff">6</div>
            <div class="col-xs-1" style="background: #0094ff">7</div>
            <div class="col-xs-1" style="background: #b200ff">8</div>
            <div class="col-xs-1" style="background: #ff00dc">9</div>
            <div class="col-xs-1" style="background: #ff006e">10</div>
            <div class="col-xs-1" style="background: #ac5050">11</div>
            <div class="col-xs-1" style="background: #54bd4f">12</div>
        </div>
    </div>

顯示效果：

嵌套列

爲了在內容中嵌套默認的網格，請添加一個新的 .row，並在一個已有的 .col-md-* 列內添加一組 .col-md-* 列。被嵌套的行應包含一組列，這組列個數不能超過12（其實，沒有要求你必須佔滿12列）。

在下面的實例中，佈局有兩個列，第二列被分爲兩行四個盒子。

<div class="container">
        <div class="row">
            <div class="col-xs-4" style="background: #b2b0b0">第一列</div>
            <div class="col-xs-8" style="background: #dedef8">第二列--裏面嵌套了四個DIV
                <div class="row">
                    <div class="col-xs-6" style="background: #0094ff">我是內容一<br /><br /><br /></div>
                    <div class="col-xs-6" style="background: #b200ff">我是內容二</div>
                </div>
                <div class="row">
                    <div class="col-xs-6" style="background: #ff00dc">我是內容三<br /><br /><br /></div>
                    <div class="col-xs-6" style="background: #ff006e">我是內容四</div>
                </div>
            </div>
        </div>
    </div>

顯示效果：

列排序

Bootstrap 網格系統另外一個完美的特性，就是您能夠很容易地以一種順序編寫列，而後以另外一種順序顯示列。

您能夠很輕易地改變帶有 .col-md-push-* 和 .col-md-pull-* 類的內置網格列的順序，其中 * 範圍是從 1 到 11。

在下面的實例中，咱們有兩列布局，左列很窄，做爲側邊欄。咱們將使用 .col-md-push-* 和 .col-md-pull-* 類來互換這兩列的順序。

<div class="container">
        <div class="row">
            <div class="col-xs-4 col-md-push-8" style="background: #ff00dc">左邊</div>
            <div class="col-xs-8 col-md-pull-4" style="background: #ff006e">右邊</div>
        </div>
    </div>

顯示效果：