XOOPS輕鬆架 - 線上書籍

:::

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

### 一、套用display方法

1. 練習素材 ```
 
 <a href="#">考生</a>
 <a href="#">新生</a>
 <a href="#">學生</a>
 <a href="#">教師</a>
 <a href="#">職員</a>
 <a href="#">家長</a>
 <a href="#">訪客</a>
 <a href="#">畢業生及校友</a>
 ```
2. `display` 可以改變元件的呈現方式，以下是 BootStrap4 支援的： 
 - `.d-none`
 - `.d-inline`
 - `.d-inline-block`
 - `.d-block`
 - `.d-table`
 - `.d-table-cell`
 - `.d-flex`
 - `.d-inline-flex`
3. flexbox 可以讓我們簡單靈活的進行排版。
4. 但並不是所有元件的呈現方式都改成了 `flexbox`
5. 若想讓元件套用Flexbox，可以用 `.d-flex` 的方式來套用（`display: flex` 之意）。
6. 若想使用行內的flexbox，可以用 `.d-inline-flex`
7. 不管是 `.d-flex` 或`.d-inline-flex` 均可套用斷點，例如：`.d-sm-flex` 或 `.d-sm-inline-flex`
8. 詳情：<http://bootstrap.hexschool.com/docs/4.0/utilities/display/>
 
### 二、在大螢幕換行呈現，在手機不斷行的作法

1. 由於手機呈現時，會用單欄式呈現，故一些選項無須斷行。
2. 視斷點換行的方式，`display` 預設為 `inline`，但符合 lg 斷點時，改變 `display`為 `block`： ```
 
 <div class="col-sm">
 <a href="#" class="btn-tools">考生</a>
 <a href="#" class="btn-tools">新生</a>
 <a href="#" class="btn-tools">學生</a>
 <a href="#" class="btn-tools">教師</a>
 <a href="#" class="btn-tools">職員</a>
 <div class="d-inline d-lg-block"></div>
 <a href="#" class="btn-tools">家長</a>
 <a href="#" class="btn-tools">訪客</a>
 <a href="#" class="btn-tools">畢業生及校友
 </a>
 </div>
 ```

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

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

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器