Borders

使用 Border 通用類別迅速設計一個元素的 border 和邊框 border-radius。可用於圖像、按鈕、或任何其它元素。

六角學院 六角學院

六角學院的 Bootstrap 課程上線囉,立即與萬人一同學習最專業、最深入的 Bootstrap 課程。

立即上課去

Border

對一個元素增加 class,以移除所有 border 或部分 border。

<span class="border"></span>
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>

Border color

Change the border color using utilities built on our theme colors.

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

Border-radius

對一個元素增加 class 以方便的使其角部變圓。

Example rounded image Example top rounded image Example right rounded image Example bottom rounded image Example left rounded image Completely round image Example non-rounded image (overrides rounding applied elsewhere)
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-0">