Bootstrapのリストの使い方をサンプルコード付き解説！

コンテンツ [表示]

Bootstrapは導入するだけで洗礼したデザインを簡単に実装することが出来るデザインフレームワークです。 Bootstrapではレスポンシブデザインやボタン、チェックボックスなど様々なデザインを用意していますが、今回はリストの使い方について紹介していきたいと思います。

それでは早速、Bootstrapのリストの使い方をサンプルコードを使って紹介していきます。

まずはBootstrapを使ったシンプルなリストの使い方を見ていきましょう。

リストをまとめる親要素にはlist-groupクラスを与えます。リスト項目の要素にはlist-group-itemクラスを与えてあげます。これだけで基本的なリストを使うことが出来ます。

リスト項目の要素にactiveクラスを与えることでその項目が現在選択されている項目のように表現することが出来ます。 また、disabledクラスを与えるとその項目が無効化されているように表現できます。

リンク要素やボタン要素にはlist-group-item-actionクラスを追加することでマウスが乗った時やクリック時にアニメーションが付いた押下可能なリストを実装することもできます。

リスト項目をまとめる親要素にlist-group-flushクラスを追加することで、フラッシュというボーダーのないリストを表示することが出来ます。

水平リストを用いることで、縦並びから横並びのリストを表現することが出来ます。 また、水平リストを使用するとボーダーの無いリストを表現するフラッシュは併用することはできないので注意してください。

コンテキストクラスを使用することで、リストの背景色と文字色をデザインすることができます。