「増補改訂版Bootstrap4入門」ジャンボトロン【Udemyで学習】
このレクチャーではBootstrap4の「ジャンボトロン・コンポーネント」について説明します。
ジャンボトロンは大型映像表示装置のように、タイトルや画像を目立つように表示することができるコンポーネントです。通常Webサイトの上部に配置されます。
ジャンボトロンを表示させるには、まず一番外側にcontainerクラスを適用したdiv要素を準備します。その内側にjumbotronクラスを適用したdiv要素を作成します。その内部にはヘディング要素など自由にコンテンツを配置してください。
次に、横幅目一杯広がるジャンボトロンを紹介します。body要素の内側に、jumbotronクラスとjumbotron-fluidクラスを適用したdiv要素を配置します。その内側にcontainerクラスを適用したdiv要素を配置し、その内部に自由にコンテンツを配置します。これで横幅いっぱいのジャンボトロンを作ることができます。
では、デモをご覧いただきます。
まずは基本のジャンボトロンを作成してみます。ご覧の通り、ページタイトルの表示に適したインパクトのあるコンポーネントであることがわかります。この基本のコンポーネントは画面幅を変更することで、段階的に横幅が広がるレスポンシブ対応になっています。
次に、横幅目一杯広がるジャンボトロンを作成してみます。ご覧の通り、画面横一杯のジャンボトロンが表示されています。画面幅を変更してみましょう。ジャンボトロンの横幅が画面幅に追従していることがおわかりいただけたと思います。
以上で「ジャンボトロン・コンポーネント」の説明を終わります。次のレクチャーでは「メディアオブジェクト・コンポーネント」の説明をします。
★★★ 続きはUdemyで ★★★
https://www.udemy.com/bootstrap4_for_developer_2
★★★ コース内でお逢いできることを楽しみにしています。 ★★★
