[Bootstrap] パンくずリストのスタイルを変更

Twitter Bootstrapのパンくずリストのスタイルを自分好みにカスタマイズする方法のまとめです。

Bootstrapのパンくずリストのデフォルトのデザインはこれ。

背景色とセパレーターを変えれば印象は大きく変わりそうです。

背景色を変えるのは簡単です。

.breadcrumb {
  background:transparent;
}

スタイルを上書きすれば良いだけなので, bootstrap.cssより後でbreadcrumbクラスの背景を好きなものに変えます。デフォルトではグレー（#f5f5f5）が設定されているので、透明にしたいなら上記のようにbackground:transparent;とします。

次にセパレータを変更します。パンくずリストのセパレータはやはりスラッシュより右方向を示唆する記号が良いですね。ということで“»”に変更します。

.breadcrumb {
  background:transparent;
}
.breadcrumb li+li:before {
  content:'»';
}

cssに.breadcrumb li+li:before{content:'»';}を付け加えました。

これでパンくずリストのデザインは上のように変わりました。

あとはフォントやサイズも変えればさらに良くなりそうです。