ブートストラップでリストグループを作成する

ブートストラップでリストグループを作成する

2019.07.05

リストグループは、Webサイトでよく見かけるブートストラップの重要な要素です。私たちのほとんどはさまざまなメニューを作るのに使います。あるいは、Bootstrapが作成したListグループに使用するためのさまざまな機能がある、長い行に表示されるテキスト

リストグループ基本
<ul class = “list-group”>
<liクラス= “リストグループ項目”> Cras justo odio </li>
<liクラス= “リストグループ項目”> Dapibus ac facilisis in </li>
< li class = “リストグループ項目”> Morbi leo risus </li>
<liクラス= “リストグループ項目”> Port ac consectetur ac </li>
<liクラス= “リストグループ項目”>エロスの前庭</li>
</ul>

Listグループの作成では “<ul>”のタグで “list-group”クラスを定義し、各項目に表示されるテキストは “<li>”タグで作成し、そのクラスで定義する必要があります。”リストグループ項目”

リストグループリンク
<div class = “list-group”>
<a href=”#” class=”list-group-item
active”>最新のおすすめ
</a>
<a href = “#” class = “list-group-item “> Dapibus facilisis ac in </a>
<a href=”#” class=”list-group-item”> Morbi leo risus </a>
<a href =”# “class =” list-group-item ” > Porta ac
consectetur ac </a> <a href=”#” class=”list-group-item”>英語での説明</a>
</div>

タグ “<ul>”をタグ “<div>”に変更し、タグ “<li>”の代わりに “<a>”タグを使用する必要があることがわかります。

リストグループセットリストの背景色
<ul class = “リストグループ”>
<liクラス= “リストグループアイテムリストグループアイテム成功”> Dliibus ac facilisis in </li>
<liクラス= “リストグループアイテムリストグループ” -item-info “>最新のライブラリが見つかりません</li>
<li class =”リストグループ項目リストグループ項目警告 “> port ac consectetur ac </li>
<li class =”リストグループ-it list-group-item-danger “>エロスの前衛</li>
</ul>
<div class =” list-group “>
<a href =”# “class =”リストグループ項目リストグループ-item-success “> Dapibus facilisis ac in </a>
<a href=”#” class=”list-group-item list-group-item-info”>最新のリベロ</a>
<a href=”#” class=”list-group-item list-group-item-warning”> Porta ac consectetur ac </a>
<a href=”#” class=”list-group-item list-group-item-danger”>エロスの前書き</a>
</div>

– リストグループ項目成功 背景が緑色の場合
– list-group-item-info 背景が青色の場合
– list-group-item-warning 黄色の背景
– リスト – グループ – アイテム – 危険 赤い背景用


Top