BootstrapのList Group を利用する - Bootstrap

BootstrapのList Group を利用するコードを紹介します。

概要

BootstrapのList Groupを利用するには、ulタグのクラスに list-group を指定します。また、リスト項目のliタグのクラスにlist-group-itemを指定します。

プログラム例

List Groupを利用する例を紹介します。

事前準備

Bootstrapをインストールします。今回の例では、Visual Studioを利用し、NuGetを利用してBootstrapをインストールしています。Bootstrapのjsファイルは、ルートディレクトリ直下の Scripts ディレクトリ内に配置されています。

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="Content/bootstrap.css" />
  <script src="Scripts/jquery-3.0.0.js"></script>
  <script src="Scripts/bootstrap.js"></script>
</head>
<body>
  <ul class="list-group">
    <li class="list-group-item">ぺんぎんクッキー</li>
    <li class="list-group-item">らくだキャラメル</li>
    <li class="list-group-item">しろくまアイス</li>
    <li class="list-group-item">あひるケーキ</li>
    <li class="list-group-item">ふくろうサブレ</li>
  </ul>
</body>
</html>

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

BootstrapのList Group を利用する - Bootstrap

概要

プログラム例

事前準備

コード

実行結果

関連するページ