【Bootstrap 初心者】ジャンボトロンの使い方を分かりやすく解説します

ジャンボトロンを使ってデザイン
あーwebサイトでダイナミックなデザインが作りたいな~

そんな時はジャンボトロンがおススメです!

 

ティロ

こんにちは、ティロといいます

プログラミング好きな理系大学生です



Bootstrapを使えば手軽にジャンボトロンを使うことが出来ます。

Bootsrap(ブートストラップ)ってなんだーって人はこちらの記事を見てね

関連記事

Bootstrapってなに?Bootstrapの基本的な使い方が知りたい ティロこんにちは、ティロといいます Bootstrapを使うと何が良いのか、また基本的な使い方[…]

bootstrapの導入から使い方

 

Bootstrapをcdnで読み込む

以下のコードをhead内に貼り付けてください。

 

 

ジャンボトロンを作る方法

ジャンボトロンとはどんなものなのか、まずはデモをご覧ください。

 

See the Pen
xxOyPpB
by hiro web制作とブログ (@hiroweb9)
on CodePen.

背景の幅が画面いっぱいまで広がり、その中にタイトルがあります。これがジャンボトロンです。

コードはこんな感じです。

 

 

 
クラスの役割は以下の通りです。

jumbotron基本的なジャンボトロンを作る
jumbotron-fluidジャンボトロンを横幅いっぱいまで広げる
container幅を設定している。レスポンシブデザインに対応している。グリッドデザインを作るとき便利。
text-white文字を白色にする
bg-dark背景を黒っぽい色にする

 

文字の色と背景の色は以下のようなクラスをつけるだけで変更することが出来ます。

文字

text-primary青色
text-secondaryグレー
text-info水色
text-light白っぽい
text-success
text-danger
text-dark黒っぽい
text-muted鼠色
text-white
text-black-5050%透明の黒
text-white-5050%透明の白

 

背景

bg-primary
bg-secondaryグレー
bg-success
bg-warning
bg-info水色
bg-light薄いグレー
bg-dark濃いグレー
bg-white
bg-transparent透明
bg-dangerオレンジ

 

ジャンボトロンをサイトに使ってみる

上の例だけだと寂しいので他のコンポーネントと一緒に使ってみます。

 

ジャンボトロンを使ってデザイン

 

具体的にはグローバルナビゲーションとカードを作りました。

すべてBootstrapで作っているのでcssは一切書いていません。クラスをつけただけです。

ヘッダーのデザインについてはこちらの記事に詳しく書きました!

関連記事

bootstrapでドロップダウンメニューが作りたいけどどうやるのか分からん今回はこんな疑問を解決していきます!もちろん、レスポンシブデザインに対応しています。 ティロこんにちは、テ[…]

ドロップダウンメニューの作り方

全体のコードは以下のようなりました。

 

いかがでしょうか。Bootstrapを使うとデザインが苦手は私でも今風のwebサイトが簡単に作れそうです。

Bootstrapの機能をもっと知りたい!という方はこちらの書籍がおススメです。

Bootstrapの機能はほぼ載っています。

また実際にサイトを作りながら勉強したい!という方はこちらがおすすめです.