ブートストラップに背景を追加する方法-ブートストラップのチュートリアル-php.cn

ブートストラップに背景を追加する方法

下次还敢

リリース： 2024-04-05 02:15:20

オリジナル

996 人が閲覧しました

Bootstrap で背景を追加するには 2 つの方法があります: .bg- (モノクロ背景) や .bg-gradient- (グラデーション背景) などの組み込み CSS クラスを使用する方法と、次のようなカスタム CSS ルールを使用する方法です。背景色と背景画像のプロパティの設定として。

ブートストラップに背景を追加する方法

Bootstrap で背景を追加する方法

Bootstrap は、簡単な方法を提供する人気のフロントエンドフレームワークです。 HTML要素に背景を追加します。これを行うには、主に 2 つの方法があります。

方法 1: CSS クラスを使用する

Bootstrap には、さまざまなタイプの背景を追加する一連の組み込み CSS クラスが用意されています。

.bg-*: 要素に単色の背景を追加します。* には任意の色を指定できます (例: bg-primary) 、bg-warning など。
.bg-gradient-*: 要素にグラデーションの背景を追加します。* は primary、secondary# です。 ## 、 成功 など
.bg-image: 要素に画像の背景を追加します。画像への URL またはパスを指定する必要があります。

使用方法:

<code class="html"><div class="bg-primary">This is a blue background.</div>
<div class="bg-gradient-primary">This is a blue gradient background.</div>
<div class="bg-image" style="background-image: url('image.png');">This is a background image.</div></code>

ログイン後にコピー

方法 2: カスタム CSS を使用する

より詳細な制御が必要な場合、カスタム CSS ルールを使用して要素に背景を追加することもできます:

<code class="css">body {
  background-color: #ccc;
}

.my-background {
  background-image: url('image.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}</code>

ログイン後にコピー

使用法:

<code class="html"><body class="my-background"></body></code>

ログイン後にコピー

カスタム CSS ルールはブートストラップの組み込みルールよりも優先されることに注意してください。 CSS クラス。

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