Bulma-hero-banner
提供:Dev Guides
ブルマ-ヒーローバナー
説明
Bulmaはヒーローバナーを提供して、ウェブページに全幅のバナーを指定します。 Bulmaは_hero_クラスをコンテナーとして使用し、_hero-body_を子として使用します。ここで、ページコンテンツを追加できます。
以下に示すように、_hero_クラスを使用してヒーローバナーの簡単な例を作成しましょう-
以下の出力が表示されます-
勾配
Bulmaでは、_is-bold_修飾子を使用して指定した領域を塗りつぶすために使用される2つ以上の色の間の遷移を作成できます。
以下に示すように_is-bold_修飾子を使用して、_gradients_の簡単な例を作成しましょう-
以下の出力が表示されます-
フルハイトヒーロー
フルハイトヒーローバナーには3つの垂直部分が含まれています-
- hero-head -ヒーローバナーの上部を指定します。
- hero-body -ヒーローバナーの体の部分を指定します。
- hero-foot -ヒーローバナーの下部を指定します。
以下の例は、以下に示すように、フルハイトヒーローの上記の3つの部分の使用を指定します-
_ 注-コーディンググラウンド出力ウィンドウのサイズを変更して、ウィンドウサイズに応じて発生する変更を確認します。_
以下の出力が表示されます-
_is-large_クラスと_is-fullheight_クラスを使用して、フルハイトのヒーローを_large_および_fullwidth_として表示することもできます。 _section_タグの_is-medium_クラスを置き換えることにより、これらのクラスを使用します。