ブートストラップで背景色を設定する方法

背景色を設定するブートストラップ メソッドは次のとおりです。 インライン メソッド: style 属性を通じて CSS クラスを直接設定します: クラスを作成し、要素に適用します。 ブートストラップ ユーティリティ クラス: 指定されたカラー クラスを使用して CSS をカスタマイズします。変数: 変数を使用し、 -- を通じて背景のグラデーションにアクセスします。: 背景画像属性を使用して、グラデーションの背景画像を作成します。背景画像属性を使用して、画像を設定します。

Bootstrap は背景色を設定します。 メソッド

#1. インライン メソッド

#style 属性を使用して、要素に背景色を直接設定します:

<code class="html"><div style="background-color: #ffffff;">内容</div></code>

2. CSS クラス

必要な背景色を持つ CSS クラスを作成し、それを要素に適用します:

<code class="css">.my-background {
  background-color: #ffffff;
}</code>

<code class="html"><div class="my-background">内容</div></code>

3. ブートストラップ ユーティリティ クラス

ブートストラップには、背景色を設定するための一連のユーティリティ クラスが用意されており、各クラスは色に対応しています:

• .bg-primary
• .bg-secondary
• .bg-success
• .bg-danger
• .bg-warning
• .bg-info
• ## .bg-light
• .bg-dark

<code class="html"><div class="bg-primary">内容</div></code>

4. カスタム CSS 変数

CSS 変数を使用して背景色を定義し、

- - アクセス変数:

<code class="css">:root {
  --my-background-color: #ffffff;
}</code>

<code class="html"><div style="background-color: var(--my-background-color);">内容</div></code>

5. 背景のグラデーション

background を使用します。 -image プロパティを使用して背景のグラデーションを作成します:

<code class="css">.my-gradient {
  background-image: linear-gradient(to right, #ffffff, #000000);
}</code>

<code class="html"><div class="my-gradient">内容</div></code>

6. 背景画像

background-image 属性を使用して、背景画像:

<code class="css">.my-image {
  background-image: url("image.jpg");
}</code>

<code class="html"><div class="my-image">内容</div></code>

以上がブートストラップで背景色を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。