文字色のクラス名
通常の色
HTMLソースコードの書き方no
<p class="text-primary">文字が青色になります</p>ブラウザ表示
文字が青色になります
基本設定されているテキストの色の指定クラス名一覧です。
| CSSクラス名(表示見本) | 呼び出し用コード |
|---|---|
| class=”text-primary” | –bs-blue |
| class=”text-primary-emphasis” | –bs-primary-text-emphasis |
| class=”text-secondary” | –bs-secondary-rgb |
| class=”text-secondary-emphasis” | –bs-secondary-text-emphasis |
| class=”text-success” | –bs-success |
| class=”text-success-emphasis” | –bs-success-text-emphasis |
| class=”text-danger” | –bs-danger |
| class=”text-danger-emphasis” | –bs-danger-text-emphasis |
| class=”text-warning” (bg-dark) | –bs-warning |
| class=”text-warning-emphasis” | –bs-warning-text-emphasis |
| class=”text-info” (bg-dark) | –bs-info |
| class=”text-info-emphasis” | –bs-info-text-emphasis |
| class=”text-light” (bg-dark) | –bs-light |
| class=”text-light-emphasis” | –bs-light-text-emphasis |
| class=”text-dark bg-white” | –bs-dark |
| class=”text-dark-emphasis” | –bs-emphasis-color |
| class=”text-body” | –bs-body-color |
| class=”text-body-emphasis” | –bs-emphasis-color: |
| class=”text-body-secondary” | –bs-secondary-color: |
| class=”text-body-tertiary” | –bs-tertiary-color: |
| class=”text-black” (bg-white) | –bs-black |
| class=”text-white” (bg-dark) | –bs-white |
| class=”text-black-50″ (bg-white) | color: rgba(0,0,0,.5)!important; |
| class=”text-white-50″ (bg-dark) | color: rgba(255,255,255,.5)!important; |
不透明度
HTMLソースコードの書き方no
<p class="text-primary text-opacity-75">文字が半透明の青色になります</p>ブラウザ表示
文字が半透明の青色になります
.text-opacity-75 を追加することにより、不透明度を調整します。
| CSSクラス名 | 表示見本 |
class=”text-primary” | This is default primary text |
class=”text-primary text-opacity-75″ | This is 75% opacity primary text |
class=”text-primary text-opacity-50″ | This is 50% opacity primary text |
class=”text-primary text-opacity-25″ | This is 25% opacity primary text |
一括指定されている、カラーコードはこちら↓
こちらもよろしく