Cerulean
Cosmo
Cyborg
Darkly
Flatly
Journal
Lumen
Paper
Sandstone
Simplex
Slate
United
  • LINEで送る

サイドバーのメニューに良さそうなリストを作る

list-group

効果が解りやすいこちらのテーマで見ると良いかもです。

サイドバーのメニューに良さそうな感じですね

class="badge"を後ろに付けると個数なんか表示出来たりします。

りんご 5 みかん3 いちご めろん
?
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>

グループ化されたパネルを作る

panel panel-{prefix}

これもサイドバーとかに良さそうですね。

くだもの

みかん

野菜

キャベツ

魚

ほっけ
?
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>

list-groupとpanelを合体してみる

ボーターが二重(テーマによります)になるし、くっつけるようなものじゃ無さそうですね。

くだもの

りんご みかん いちご めろん

くだもの

りんご みかん いちご めろん
?
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>