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


Posted by itiswonderfall on 2021-11-22

前言

「 黑的白的紅的黃的紫的綠的藍的灰的 」
歌會唱到斷氣,但接下來顏色的通用類別不會讓你背到生氣氣。

 


 

官方網站的 Colors 頁面

 

顏色通用類別

使用 color 通用類別為文字上色。

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-black-50">.text-black-50</p>

<div class="bg-dark">
    <p class="text-warning">.text-warning</p>
    <p class="text-info">.text-info</p>
    <p class="text-light">.text-light</p>
    <p class="text-white">.text-white</p>
    <p class="text-white-50">.text-white-50</p>
</div>

.text-black-50 為 50% 透明度的黑色 rgba(0,0,0,.5)

.text-white-50 為 50% 透明度的白色 rgba(255,255,255,.5)

 


 

連結顏色

你可以使用 .link-* 類別為連結著色,這些類別具有 :hover 和 :focus 狀態。

<a href="#" class="link-primary">Primary link</a>
<a href="#" class="link-secondary">Secondary link</a>
<a href="#" class="link-success">Success link</a>
<a href="#" class="link-danger">Danger link</a>
<a href="#" class="link-warning">Warning link</a>
<a href="#" class="link-info">Info link</a>
<a href="#" class="link-light">Light link</a>
<a href="#" class="link-dark">Dark link</a>

 


 

參考資料

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

#f2e #F2E合作社 #bootstrap5 #網頁框架開發 #顏色







Related Posts

 Git 與 GitHub

Git 與 GitHub

[Swift 學習筆記] Closure : Inline function process

[Swift 學習筆記] Closure : Inline function process

程式導師實驗計畫 Week 15 題目

程式導師實驗計畫 Week 15 題目


Comments