F2E合作社|border通用類別|Bootstrap 5網頁框架開發入門


Posted by itiswonderfall on 2021-11-28

前言

border 主要用途是設定物件的邊框線, outline 是設定物件的外框線,這兩個很類似,但卻有一些細節有所差異,可以簡單用下列兩點快速比較:

  1. border 可以有「 占據空間 」的特性, outline 則沒有。
  2. border 的外觀可以做圓角, outline 則永遠為矩形( 物件的矩形空間 )。

因為 border 可以支援圓角,所以在實務使用次數上面, border 的機會也多過於 outline 。( 以我來說啦哈哈哈 )

圖片來源

之前也有寫過相關文章,所以這裡只會簡略說明,想看更詳盡的介紹 這邊 歡迎光臨!

 


 

官方網站的 Borders 頁面

 

增加邊框

<span class="border">border</span>
<span class="border-top">border-top</span>
<span class="border-end">border-end</span>
<span class="border-bottom">border-bottom</span>
<span class="border-start">border-start</span>

 


 

減少邊框

<span class="border border-0">border-0</span>
<span class="border border-top-0">border-top-0</span>
<span class="border border-end-0">border-end-0</span>
<span class="border border-bottom-0">border-bottom-0</span>
<span class="border border-start-0">border-start-0</span>

 


 

邊框顏色

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

 


 

邊框寬度

<span class="border border-1">border-1</span>
<span class="border border-2">border-2</span>
<span class="border border-3">border-3</span>
<span class="border border-4">border-4</span>
<span class="border border-5">border-5</span>

 


 

邊框圓角

<img src="https://via.placeholder.com/100" class="rounded-top" alt="">
<img src="https://via.placeholder.com/100" class="rounded-end" alt="">
<img src="https://via.placeholder.com/100" class="rounded-bottom" alt="">
<img src="https://via.placeholder.com/100" class="rounded-start" alt="">
<img src="https://via.placeholder.com/100" class="rounded-circle" alt="">
<img src="https://via.placeholder.com/200x100" class="rounded-pill" alt="">

 


 

邊框尺寸

使用縮放的 class 將圓角放大或縮小,尺寸的範圍為 0 到 3 。

<img src="https://via.placeholder.com/150" class="rounded-0" alt="">
<img src="https://via.placeholder.com/150" class="rounded-1" alt="">
<img src="https://via.placeholder.com/150" class="rounded-2" alt="">
<img src="https://via.placeholder.com/150" class="rounded-3" alt="">

 


 

參考資料

  1. Borders · Bootstrap v5.0
  2. 邊框 (Borders) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
  3. 共用項目border-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學

#f2e #F2E合作社 #bootstrap5 #網頁框架開發 #border #border-radius







Related Posts

javascript判斷式 & 迴圈

javascript判斷式 & 迴圈

[筆記]ASIC Flow 01-ASIC是什麼?

[筆記]ASIC Flow 01-ASIC是什麼?

C# The way to store a temporary data: Memory Cache, Redis

C# The way to store a temporary data: Memory Cache, Redis


Comments