1 2 3 4 5 6 | < div class = "list-group" > < a href = "#" class = "list-group-item" >りんご < span class = "badge" >5</ span ></ a > < a href = "#" class = "list-group-item active" >みかん< span class = "badge" >3</ span ></ a > < a href = "#" class = "list-group-item" >いちご</ a > < a href = "#" class = "list-group-item" >めろん</ a > </ div > |
これもサイドバーとかに良さそうですね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | < div class = "panel panel-primary" > < div class = "panel-heading" > < h2 class = "panel-title" >くだもの</ h2 > </ div > < div class = "panel-body" > みかん </ div > </ div > < div class = "panel panel-success" > < div class = "panel-heading" > < h2 class = "panel-title" >野菜</ h2 > </ div > < div class = "panel-body" > キャベツ </ div > </ div > < div class = "panel panel-warning" > < div class = "panel-heading" > < h2 class = "panel-title" >魚</ h2 > </ div > < div class = "panel-body" > ほっけ </ div > </ div > |
ボーターが二重(テーマによります)になるし、くっつけるようなものじゃ無さそうですね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < div class = "panel panel-primary" > < div class = "panel-heading" > < h2 class = "panel-title" >くだもの</ h2 > </ div > < div class = "panel-body" > < a href = "#" class = "list-group-item" >りんご</ a > < a href = "#" class = "list-group-item active" >みかん</ a > < a href = "#" class = "list-group-item" >いちご</ a > < a href = "#" class = "list-group-item" >めろん</ a > </ div > </ div > < div class = "panel panel-success" > < div class = "panel-heading" > < h2 class = "panel-title" >くだもの</ h2 > </ div > < a href = "#" class = "list-group-item" >りんご</ a > < a href = "#" class = "list-group-item active" >みかん</ a > < a href = "#" class = "list-group-item" >いちご</ a > < a href = "#" class = "list-group-item" >めろん</ a > </ div > |
ダメですね
1 2 3 4 5 | < div class = "list-group" > < p class = "list-group-item" ></ p >< div class = "bg-danger" >くだもの</ div >< p ></ p > < a href = "#" class = "list-group-item" >いちご</ a > < a href = "#" class = "list-group-item" >めろん</ a > </ div > |
インラインで書く方が早いですね
1 2 3 4 5 | < div class = "list-group" > < p class = "list-group-item" style = "background-color: red" >くだもの</ p > < a href = "#" class = "list-group-item" >いちご</ a > < a href = "#" class = "list-group-item" >めろん</ a > </ div > |