Bootstrapを使ってパンくずリストを使いたい
こんな方向けの記事となっています。
Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。
Bootstrapの機能はほぼ載っています。
Bootstrapって何ぞや？という方はこちらの記事をご覧ください。
Bootstrapってなに？Bootstrapの基本的な使い方が知りたい Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。Bootstrapの機能はほぼ載っています。[…]
こんにちは、ティロといいます
プログラミング好きな理系大学生です
Bootstrapを使うのでcdnで読み込みます。
Bootstrapをcdnで読み込む
以下のコードをhead内に貼り付けてください。
1 2 3 4 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM |
パンくずリストを使いたい
パンくずリストは以下のようなコードになります。
1 2 3 4 5 6 7 | <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active" aria-current="page">Data</li> </ol> </nav> |
各クラスの意味はこんな感じです。
| breadcrumb | display=flexで横並び、マージンやパディングで位置を調整している |
| breadcrumb-item | li要素同士の位置調整 |
| active | 現在位置の項目のli要素につける |
パンくずリストの背景の色を変えたい
背景の色はclass=”bg-(色の指定)”で出来ます。
クラスはこんな感じです。
| bg-primary | 青 |
| bg-secondary | グレー |
| bg-success | 緑 |
| bg-warning | 黄 |
| bg-info | 水色 |
| bg-light | 薄いグレー |
| bg-dark | 濃いグレー |
| bg-white | 黒 |
| bg-transparent | 透明 |
| bg-danger | オレンジ |
この背景のクラスを
1 | <ol class="breadcrumb bg-dark"> |
のように付け足すだけです。
全体のコードは以下の通りです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <nav aria-label="breadcrumb"> <ol class="breadcrumb bg-dark "> <li class="breadcrumb-item "><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active" aria-current="page">Data</li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item "><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active" aria-current="page">Data</li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="breadcrumb bg-success "> <li class="breadcrumb-item "><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active" aria-current="page">Data</li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="breadcrumb bg-secondary"> <li class="breadcrumb-item "><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active" aria-current="page">Data</li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="breadcrumb bg-info"> <li class="breadcrumb-item "><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active" aria-current="page">Data</li> </ol> </nav> |
また実際にサイトを作りながら勉強したい！という方はこちらがおすすめです．
参考にしたサイト
Breadcrumb – Bootstrap 4.2 – 日本語リファレンス
こちらの記事もおススメです。
他にも便利な機能を紹介しています。
グリッドシステムってなんだ？グリッドシステムを詳しく知りたい... 今回はこんな疑問を解消していきます!Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。[…]
簡単におしゃれたサイトを作りたいなそんなときはBootstrapのカードが便利です。クラスをつけるだけで簡単に作れます。Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。Bootstrapの[…]
あーwebサイトでダイナミックなデザインが作りたいな～そんな時はジャンボトロンがおススメです！Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。Bootstrapの機能はほぼ載っています。[…]
bootstrapでドロップダウンメニューが作りたいけどどうやるのか分からん今回はこんな疑問を解決していきます！もちろん、レスポンシブデザインに対応しています。Bootstrapの機能をもっと知りたい！という方はこち[…]