:::

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 斷點時,改變 displayblock
    <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>

     


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D32%26tbdsn%3D945

計數器

今天: 2805280528052805
昨天: 3438343834383438
總計: 7393134739313473931347393134739313473931347393134