XOOPS輕鬆架 - 線上書籍

:::

BootStarp4實做入門
==============

### 一、使用網格的注意事項

1. BootStrap4的網格系統以 flexbox（CSS3）為基礎（取代 table、floats…），因此可以做到自動等寬等高的欄位 、自動平均欄位、垂直置中等以往很難做的功能。
2. 同時也代表對 IE9（以下）不再支援，至少要用IE10才行。
3. 網格系統必須在容器（`.container`）中才有作用
 
### 二、指定欄寬用法

1. 一般使用範例： ```
    
    <div class="container">
        <div class="row">
            <div class="col-sm-3">側邊三欄</div>
            <div class="col-sm-9">右邊九欄</div>
        </div>
    </div>
    ```
2. `.row` 代表一個橫列，以確保裡面的欄位可以對齊、排序。
3. `.col-sm` 式斷點前綴詞，後面接的是欄位寬度設定，預設滿版為12欄
4. 若超過12欄，則會自動新增一個 `.row`
 
### 三、自動等寬用法

1. 在 BootStrap4 中也可以這樣使用等寬欄位：
    
     ```
    
    <div class="container">
        <div class="row">
            <div class="col">col 等寬 1/5</div>
            <div class="col">col 等寬 2/5</div>
            <div class="col">col 等寬 3/5</div>
            <div class="col">col 等寬 4/5</div>
            <div class="col">col 等寬 5/5</div>
        </div>
        <div class="row">
            <div class="col-sm">col-sm 等寬 1/5</div>
            <div class="col-sm">col-sm 等寬 2/5</div>
            <div class="col-sm">col-sm 等寬 3/5</div>
            <div class="col-sm">col-sm 等寬 4/5</div>
            <div class="col-sm">col-sm 等寬 5/5</div>
        </div>
    </div>
    ```
2. 上方的用法就是不管螢幕多大，都要分成五欄
3. 下方的用法是當螢幕在 576 以上時，才分五欄，在 576 以下的時候，會自動調成單欄式。
 
### 小技巧：  
 輸入 `.row>.col-sm*5` 然後按 <kbd>tab</kbd> 鍵，可以快速產生以上語法

### 四、指定欄寬+自動欄寬

1. 可以指定某幾欄的欄寬，其餘的自行自動平均 ```
    
    <div class="container">
        <div class="row">
            <div class="col-sm">自動平均分配</div>
            <div class="col-sm-7">指定佔 7 欄</div>
            <div class="col-sm">自動平均分配</div>
        </div>
    </div>
    ```
 
### 五、根據內容多寡自動調整欄寬

1. 若不確定該站多少欄寬，亦可讓電腦自行根據內容多寡來判斷： ```
    
    <div class="container">
        <div class="row">
            <div class="col-sm">自動平均分配</div>
            <div class="col-sm-auto">根據中間內容多多寡來判斷欄寬</div>
            <div class="col-sm">自動平均分配</div>
        </div>
    </div>
    ```
 
### 六、不同斷點的欄寬搭配

1. 可以在同一個欄位根據不同斷點給予不同大小 ```
    
    <div class="container">
        <div class="row">
            <div class="col">自動平均分配</div>
            <div class="col-sm-6 col-md-7 col-lg-8">根據不同螢幕大小來指定中間欄位欄寬</div>
            <div class="col">自動平均分配</div>
        </div>
    </div>
    ```
2. 如果是只有用col，那麼，任何裝置都會按照 col 設定來分欄位（不管螢幕多大多小）
3. 可以同時用多個斷點，例如：`col-sm-4 col-md-3`，意思就是用手機看時，該區域寬度佔4欄，用平板看時，該區域寬度佔3欄。
4. 詳情：<http://bootstrap.hexschool.com/docs/4.0/layout/grid/>

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D935

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器