【Bootstrap パンくずリスト】webサイトですぐに使えるパンくずリストの使い方を分かりやすく解説します

パンくずリスト

Bootstrapを使ってパンくずリストを使いたい

こんな方向けの記事となっています。

Bootstrapって何ぞや?という方はこちらの記事をご覧ください。

関連記事

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

bootstrapの導入から使い方

 

 

ティロ

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

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

 

Bootstrapを使うのでcdnで読み込みます。

Bootstrapをcdnで読み込む

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

 

 

パンくずリストを使いたい

パンくずリストは以下のようなコードになります。

 

各クラスの意味はこんな感じです。

breadcrumbdisplay=flexで横並び、マージンやパディングで位置を調整している
breadcrumb-itemli要素同士の位置調整
active現在位置の項目のli要素につける

 

パンくずリストの背景の色を変えたい

背景の色はclass=”bg-(色の指定)”で出来ます。

クラスはこんな感じです。

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

この背景のクラスを

のように付け足すだけです。

パンくずリストの背景を変える

全体のコードは以下の通りです。

 

いかがでしたでしょうか?

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

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

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

参考にしたサイト
Breadcrumb – Bootstrap 4.2 – 日本語リファレンス

 

こちらの記事もおススメです。

他にも便利な機能を紹介しています。

関連記事

グリッドシステムってなんだ?グリッドシステムを詳しく知りたい... 今回はこんな疑問を解消していきます! ティロこんにちは、ティロといいますプログラ[…]

グリッドシステムを詳しく解説します

 

関連記事

簡単におしゃれたサイトを作りたいなそんなときはBootstrapのカードが便利です。クラスをつけるだけで簡単に作れます。 ティロこんにちは、ティロといいますプログラミング好きな理系大[…]

背景の色を変える

 

関連記事

あーwebサイトでダイナミックなデザインが作りたいな~そんな時はジャンボトロンがおススメです! ティロこんにちは、ティロといいますプログラミング好きな理系大学生です[…]

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

 

関連記事

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

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