9.
套用不同的呈現方式
一、套用display方法
- 練習素材
<a href="#"><span>考生</span></a>
<a href="#"><span>新生</span></a>
<a href="#"><span>學生</span></a>
<a href="#"><span>教師</span></a>
<a href="#"><span>職員</span></a>
<a href="#"><span>家長</span></a>
<a href="#"><span>訪客</span></a>
<a href="#"><span>畢業生及校友</span></a>
display
可以改變元件的呈現方式,以下是 BootStrap4 支援的:
.d-none
.d-inline
.d-inline-block
.d-block
.d-table
.d-table-cell
.d-flex
.d-inline-flex
- flexbox 可以讓我們簡單靈活的進行排版。
- 但並不是所有元件的呈現方式都改成了
flexbox
- 若想讓元件套用Flexbox,可以用
.d-flex
的方式來套用(display: flex
之意)。
- 若想使用行內的flexbox,可以用
.d-inline-flex
- 不管是
.d-flex
或.d-inline-flex
均可套用斷點,例如:.d-sm-flex
或 .d-sm-inline-flex
- 詳情:http://bootstrap.hexschool.com/docs/4.0/utilities/display/
二、在大螢幕換行呈現,在手機不斷行的作法
- 由於手機呈現時,會用單欄式呈現,故一些選項無須斷行。
- 視斷點換行的方式,
display
預設為 inline
,但符合 lg 斷點時,改變 display
為 block
:
<div class="col-sm">
<a href="#" class="btn-tools"><span>考生</span></a>
<a href="#" class="btn-tools"><span>新生</span></a>
<a href="#" class="btn-tools"><span>學生</span></a>
<a href="#" class="btn-tools"><span>教師</span></a>
<a href="#" class="btn-tools"><span>職員</span></a>
<div class="d-inline d-lg-block"></div>
<a href="#" class="btn-tools"><span>家長</span></a>
<a href="#" class="btn-tools"><span>訪客</span></a>
<a href="#" class="btn-tools"><span>畢業生及校友</span>
</a>
</div>