9. 套用不同的呈現方式

一、套用display方法

1. 練習素材

   <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>

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"><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>