XOOPS輕鬆架 - 線上書籍

:::

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

### 一、取消欄位間間隔

1. 在 BootStrap4 中可以透過 `.no-gutters` 來取消間隔 ```
  <pre class="brush:xml;gutter:false;">
  <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` 使按鈕變成滿版，例如： ```
  <pre class="brush:xml;gutter:false;">
  <a href="#" class="btn btn-green btn-block">新生入學專區</a>
  ```
2. 上面的 `.btn-green` 是用自定義按鈕工具：<http://blog.koalite.com/bbg/> 做出來的。
3. 利用間隔工具 `.p-3` 讓按鈕間變大一點，並利用 `.mb-1` 在按鈕下方加點距離。
  
   ```
  <pre class="brush:xml;gutter:false;">
  <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` 來設定之，例如： ```
  <pre class="brush:xml;gutter:false;">
  <a href="#" class="btn rounded-0 btn-green2 btn-block p-3 mb-1">本國學生招生</a>
  ```
2. 若是想替按鈕加上邊框，可加上 `.border-white` 將框線設為白色，並用 `.border-top-0` 指定上方不用框線。
  
   ```
  <pre class="brush:xml;gutter:false;">
  <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/>

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

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

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器