Bootstrapでリストを使いたい
リストをカスタマイズしたい
こんな疑問を解決します。
こんにちは、ティロといいます
プログラミング好きな理系大学生です
Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。
Bootstrapの機能はほぼ載っています。
Bootstrapの機能を詳しく知りたいという方はこちらの書籍がおススメです。
Bootstrapの機能はほぼ載っています。
Bootstrapのボタンやリストの使い方を紹介します。
Bootstrapって何ぞや？という方はこちらの記事をご覧ください。
Bootstrapってなに？Bootstrapの基本的な使い方が知りたい Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。Bootstrapの機能はほぼ載っています。[…]
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 | <ul class="list-group"> <li class="list-group-item">リスト1</li> <li class="list-group-item">リスト2</li> <li class="list-group-item">リスト3</li> </ul> |
ul要素とli要素に指定のクラスをつけるだけでリストを作ることが出来ます。
アクティブのリストを目立たせる場合はli要素にclass=”active”をつけます。
1 2 3 4 5 | <ul class="list-group"> <li class="list-group-item active">リスト1</li> <li class="list-group-item">リスト2</li> <li class="list-group-item">リスト3</li> </ul> |
ボーダーがないシンプルなリストを使いたい場合は以下のコードになります。
ul要素にclass=”list-group-flush”をつけるだけです。
1 2 3 4 5 | <ul class="list-group list-group-flush"> <li class="list-group-item">リスト1</li> <li class="list-group-item">リスト2</li> <li class="list-group-item">リスト3</li> </ul> |
リストにリンクを貼りたい場合はこんな感じになります。
a要素にclass=”list-group-item-action”をつけるだけです。ホバーするとリストの色が薄いグレーになります。
1 2 3 4 5 | <ul class="list-group"> <a href="#" class="list-group-item list-group-item-action">リスト1</a> <a href="#" class="list-group-item list-group-item-action">リスト2</a> <a href="#" class="list-group-item list-group-item-action">リスト3</a> </ul> |
次にバッジ付きのリストを作ります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> リスト1 <span class="badge badge-primary badge-pill">10</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> リスト2 <span class="badge badge-primary badge-pill">5</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> リスト3 <span class="badge badge-primary badge-pill">1</span> </li> </ul> |
d-flexで横並びにしてjustify-content-betweenで両サイドに「リスト１」と「バッジ」を配置しています。またalign-items-centerで縦方向の中央に配置しています。
またバッジの色も変更できます。
badge-primaryのprimaryをinfoやdarkなど（背景で紹介する色 リストのカスタマイズ参照）に変更できます。
またbadge-pillはバッジの形状を指定しています。
例としてバッジの色をそれぞれ変えて、badge-pillを除いたものをご覧ください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <ul class="list-group" style="max-width: 400px;"> <li class="list-group-item d-flex justify-content-between align-items-center"> リスト1 <span class="badge badge-info">10</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> リスト2 <span class="badge badge-dark">5</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> リスト3 <span class="badge badge-success">1</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> リスト4 <span class="badge badge-light">4</span> </li> </ul> |
リストのカスタマイズしたい
リストの背景の色を変えます。
li要素にclass=”list-group-item-(色の指定)”を加えるだけです。リンク付きのリストも同様です。
クラスは以下の通りです。
| list-group-item-primary | 青 |
| list-group-item-secondary | グレー |
| list-group-item-danger | オレンジ |
| list-group-item-dark | 濃いグレー |
| list-group-item-light | 薄いグレー |
| list-group-item-info | 青みどり |
| list-group-item-success | 緑 |
| list-group-item-warning | 薄い黄 |
1 2 3 4 5 6 7 8 9 10 | <ul class="list-group"> <li class="list-group-item list-group-item-primary">primary</li> <li class="list-group-item list-group-item-secondary">secondary</li> <li class="list-group-item list-group-item-danger">danger</li> <li class="list-group-item list-group-item-dark">dark</li> <li class="list-group-item list-group-item-light">light</li> <li class="list-group-item list-group-item-info">info</li> <li class="list-group-item list-group-item-success">success</li> <li class="list-group-item list-group-item-warning">warning</li> </ul> |
リストのボーダーの色を変えます。
これもクラスをつけるだけです。
li要素にclass=”border-(色の指定)”をつけます。
1 2 3 4 5 | <ul class="list-group"> <li class="list-group-item border-warning">warning</li> <li class="list-group-item border-info">info</li> <li class="list-group-item border-danger">danger</li> </ul> |
色の種類は背景と同じです。
実際にサイトを作りながら勉強したい！という方はこちらがおすすめです．