【Bootstrap リスト】リストの使い方を分かりやすく解説します。

リストの使い方を分かりやすく解説します

Bootstrapでリストを使いたい

リストをカスタマイズしたい

こんな疑問を解決します。

 

ティロ

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

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

 

Bootstrapのボタンやリストの使い方を紹介します。

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

関連記事

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

bootstrapの導入から使い方



Bootstrapをcdnで読み込む

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

 

 

 

リストの使い方

リストの基本的な使い方を紹介します。

ul要素とli要素に指定のクラスをつけるだけでリストを作ることが出来ます。

基本的なリスト

アクティブのリストを目立たせる場合はli要素にclass=”active”をつけます。

activeがあるリスト

ボーダーがないシンプルなリストを使いたい場合は以下のコードになります。

ul要素にclass=”list-group-flush”をつけるだけです。

ボーダーがないリスト

リストにリンクを貼りたい場合はこんな感じになります。

a要素にclass=”list-group-item-action”をつけるだけです。ホバーするとリストの色が薄いグレーになります。

 

リストリンクあり

次にバッジ付きのリストを作ります。

 

バッジ付きリストd-flexで横並びにしてjustify-content-betweenで両サイドに「リスト1」と「バッジ」を配置しています。またalign-items-centerで縦方向の中央に配置しています。

またバッジの色も変更できます。

badge-primaryのprimaryをinfoやdarkなど(背景で紹介する色 リストのカスタマイズ参照)に変更できます。

またbadge-pillはバッジの形状を指定しています。

例としてバッジの色をそれぞれ変えて、badge-pillを除いたものをご覧ください。

リストカスタマイズ

 

リストのカスタマイズしたい

リストの背景の色を変えます。

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薄い黄

 

リストの背景の色

 

リストのボーダーの色を変えます。

これもクラスをつけるだけです。

li要素にclass=”border-(色の指定)”をつけます。

ボーダーの色を変える

色の種類は背景と同じです。

 

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

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

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

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