PR
bootstrap@5.3.0のデザインスタイルシート適応

背景色/アラート(Bootstrap)v5.0.2/v5.3.x

Bootstrap
BootstrapHTML
スポンサーリンク
このページは英語が苦手なナナヨが、フロントエンドライブラリ Bootstrapを
快適に使う為、作ったメモページです。
悪戦苦闘する過程の中で、得たヒントを少しでも、参考にしていただけると幸いです。
詳しく知りたい方は、ネット検索もしくは、こちらのリンクからどうそhttps://getbootstrap.jp/

Bootstrapは、登場してからずっと更新され続けています。
コードをコピーする際は、必ず使用しているバージョンをきちんとご確認ください。
バージョンによっては、クラス名の確認また書き換えだけで、大変なことになる場合もあります。(私がそうでした。)

背景色のクラス名

使い方:例
HTMLソースコード
<div class="p-3 mb-2 bg-dark text-white">class="bg-dark"</div>
ブラウザ表示
class=”bg-dark”

通常の背景色(原色)

基本設定されている背景の色の指定クラス名一覧です。

※-subtleは、(V5.3)から指定できます

class=”bg-primary”
class=”bg-primary-subtle”
class=”bg-secondary”
class=”bg-secondary-subtle”
class=”bg-success”
class=”bg-success-subtle”
class=”bg-danger”
class=”bg-danger-subtle”
class=”bg-warning”
class=”bg-warning-subtle”
class=”bg-info”
class=”bg-info-subtle”
class=”bg-light”
class=”bg-light-subtle”
class=”bg-dark”
class=”bg-dark-subtle”

class=”bg-body-secondary”

class=”bg-body-tertiary”

class=”bg-body”
class=”bg-black”
class=”bg-white”
class=”bg-transparent”

原色+グラデーション

.bggradient を追加することにより、線形グラデーションが上から背景画像として追加。

グラデーション/半透明の白から始まる

class=”bg-primary bg-gradient”
class=”bg-secondary bg-gradient”
class=”bg-success bg-gradient”
class=”bg-danger bg-gradient”
class=”bg-warning bg-gradient”
class=”bg-info bg-gradient”
class=”bg-light bg-gradient”
class=”bg-dark bg-gradient”
class=”bg-body bg-gradient”
class=”bg-white bg-gradient”
class=”bg-transparent bg-gradient”

アラート

アラートタグ「class=”alert”」と一緒に使用すると、角が丸くなり枠線が追加されるなど、

デザインが調整された状態になります。

アラート

一括指定されている、カラーコードはこちら↓

タイトルとURLをコピーしました