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

前言

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

官方網站的 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>