:::

16. 無間隔+直角邊框

一、取消欄位間間隔

  1. 在 BootStrap4 中可以透過 .no-gutters 來取消間隔
    <div class="container">
        <div class="row no-gutters">
            <div class="col">col 等寬 1/3</div>
            <div class="col">col 等寬 2/3</div>
            <div class="col">col 等寬 3/3</div>
        </div>
    </div>

二、滿版按鈕

  1. 滿版按鈕,可以加入 .btn-block 使按鈕變成滿版,例如:
    <a href="#" class="btn btn-green btn-block">新生入學專區</a>
  2. 上面的 .btn-green 是用自定義按鈕工具:http://blog.koalite.com/bbg/ 做出來的。

  3. 利用間隔工具 .p-3 讓按鈕間變大一點,並利用 .mb-1 在按鈕下方加點距離。

    <div class="container">
        <div class="row no-gutters">
            <div class="col-sm-6"><a href="#" class="btn btn-green btn-block p-3 mb-1">106年度教育部技職校院教學卓越計畫10年成果展</a></div>
            <div class="col-sm-6"><a href="#" class="btn btn-green btn-block p-3 mb-1">新生入學專區</a></div>
        </div>
    </div>
  4. 按鈕詳情:http://bootstrap.hexschool.com/docs/4.0/components/buttons/

三、直角及邊框

  1. 若想讓按鈕變成直角,可利用 .rounded-0 來設定之,例如:
    <a href="#" class="btn rounded-0 btn-green2 btn-block p-3 mb-1">本國學生招生</a>
  2. 若是想替按鈕加上邊框,可加上 .border-white 將框線設為白色,並用 .border-top-0 指定上方不用框線。

    <a href="#" class="btn btn-green btn-block p-3 mb-1 rounded-0 border-white border-top-0">新生入學專區</a>
  3. 詳情:http://bootstrap.hexschool.com/docs/4.0/utilities/borders/

:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D940

計數器

今天: 1031103110311031
昨天: 3438343834383438
總計: 7391360739136073913607391360739136073913607391360