ブートストラップ CSS をオーバーライドする
この記事は、Bootstrap として知られる有名な CSS UI フレームワークに関するものです。 Bootstrap CSS をカスタム スタイルでオーバーライドするプロセスについて説明します。
ブートストラップの概要
Bootstrap CSS を使用すると、プレーンな CSS だけを使用するよりも、レスポンシブ Web サイトをすばやく簡単に作成できます。
これは、このオープンソース ツールキットが事前に設計されたテンプレートとコンポーネントを提供し、Bootstrap ボタン、フォーム、テーブルなどの重要な設計コンポーネントを使用してレイアウトをすばやく簡単に作成できるためです。
しかし、その手順は、これらの再利用可能なコードをコピーして貼り付けるだけの単純なものではありません。 最初に、Bootstrap のテンプレートとコンポーネントをカスタマイズして、Web サイトが独自のブランディングを正確に表していることを確認する必要があります。
たとえば、Bootstrap の 10 個のカラー ユーティリティ クラスのいずれかよりもカスタム カラーを好む場合があります。 または、Bootstrap でグリッド レイアウトのブレークポイントを変更することもできます。
独自のボタン用の .btn-cstm クラスのようなカスタマイズされたクラスを含めることもできます。 お勧めはできませんが、Bootstrap コア ファイルを直接編集して Web サイトを調整することができます。
ブートストラップ CSS の変更
Bootstrap のデフォルト スタイルシートを直接変更するのは困難です。 変更を思い出すのが難しくなり、改良されたバージョンの Bootstrap への更新がはるかに難しくなります。
アップグレード時にコア ファイルを置き換える必要があるため、すべての個人用設定が失われます。 ただし、Bootstrap のソース コードを変更せずに変更を加えることができます。
手順を詳しく見てみましょう。
ブートストラップ スタイリングのオーバーライド
Web サイトに Bootstrap 以外のカスタマイズされたスタイルを追加する必要がある場合は、別の外部スタイル シートを追加します。 これらのオーバーライドされたスタイルは、2つのスタイル シートのロード方法に基づいて、クラスと ID セレクターに適用されます。
- Bootstrap があるもの。
- カスタム スタイルシートを含むもの。
たとえば、Bootstrap にはボタン用のクラス、つまり btn-primary があります。 そのクラスでは、Bootstrap CSS によって設定される font-size は 16px です。 フォント サイズを 21px に変更する必要がある場合は、カスタム スタイルシートでこのクラスをオーバーライドできます。
最初のステップは、customStyles.cssなどのカスタム スタイル シートを作成することです。 スタイルシートは次のようになります。
.btn-primary{
font-size:21px;
}
次のように Bootstrap CSS を含めた後、このシートを HTML ページに含めることができます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="customStyling.css">
</head>
<body>
<h1>Custom Bootstrap demo</h1>
<button class="btn-primary">Demo</button>
</body>
</html>
出力から、font-size 以外のプロパティがデフォルトの Bootstrap CSS から継承され、font-size プロパティのみが新しい値に更新されていることがわかります。
これは、Bootstrap CSS をオーバーライドしてカスタム スタイルを Web サイトに追加する最も簡単な方法の 1つです。