English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 基本チュートリアル

Bootstrap4 リストグループ

リストグループは非常に有用で柔軟なコンポーネントで、要素リストを美しい方法で表示するために使用されます。最も基本的な形式では、リストグループはただ.listを持っています。-groupクラスの無序列表で、リストアイテムには.listがあります。-group-itemクラス。

大部分基本リストグループは無序列です。

リストグループを作成するには、<ul>要素に .list を追加します。-group クラスを追加して、 <li>要素に .list-group-item クラス:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>基本的なリストグループ</h2>
　　<ul　class="list-group">
　　　　<li　class="list-group-item">第一項目</li>
　　　　<li　class="list-group-item">第二項目</li>
　　　　<li　class="list-group-item">第三項目</li>
　　</ul>
</div>
</body>
</html>
テストを見てみる ‹/›

実行後の効果は以下の通りです：

アクティブ状態のリスト項目

.active クラスを追加することでアクティブ状態のリスト項目を設定します：

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>アクティブ状態のリスト項目</h2>
　　<ul　class="list-group">
　　　　<li　class="list-group-item　active">アクティブアイテム</li>
　　　　<li　class="list-group-item">Second　item</li>
　　　　<li　class="list-group-item">Third　item</li>
　　</ul>
</div>
</body>
</html>
テストを見てみる ‹/›

無効なリスト項目

.disabled クラスは無効なリスト項目を設定するために使用されます：

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>無効なリスト項目</h2>
　　<ul　class="list-group">
　　　　<li　class="list-group-item　disabled">無効なアイテム</li>
　　　　<li　class="list-group-item">Second　item</li>
　　　　<li　class="list-group-item">Third　item</li>
　　</ul>
</div>
</body>
</html>
テストを見てみる ‹/›

リンクリスト項目

リンクリスト項目を作成するには、<ul> を <div> に置き換えます。 、 <a> を <li> に置き換えます。グレーの背景をマウスオーバーで表示する場合は .list クラスを追加します。-group-item-action クラス:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>リンクリスト項目</h2>
　　<div　class="list-group">
　　　　<a　href="#"　class="list-group-item　list-group-item-action">First　item</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-action">Second　item</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-action">Third　item</a>
　　</div>
</div>
</body>
</html>
テストを見てみる ‹/›

リストの色の種類

リスト項目の色は以下のリストで設定できます： .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark そして list-group-item-light:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>多色リストアイテム</h2>
　　<ul　class="list-group">
　　　　<li　class="list-group-item　list-group-item-success">成功リストアイテム</li>
　　　　<li　class="list-group-item　list-group-item-secondary">準要リストアイテム</li>
　　　　<li　class="list-group-item　list-group-item-info">情報リストアイテム</li>
　　　　<li　class="list-group-item　list-group-item-warning">警告リストアイテム</li>
　　　　<li　class="list-group-item　list-group-item-danger">危険リストアイテム</li>
　　　　<li　class="list-group-item　list-group-item-primary">主要リストアイテム</li>
　　　　<li　class="list-group-item　list-group-item-dark">暗灰色リストアイテム</li>
　　　　<li　class="list-group-item　list-group-item-light">淡色リストアイテム</li>
　　</ul>
</div>
</body>
</html>
テストを見てみる ‹/›

链接的多种颜色列表项

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>多色リストアイテム</h2>
　　<div　class="list-group">
　　　　<a　href="#"　class="list-group-item　list-group-item-action">アクティブリストアイテム</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-success">成功リストアイテム</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-secondary">準要リストアイテム</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-info">情報リストアイテム</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-warning">警告リストアイテム</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-danger">危険リストアイテム</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-primary">主要リストアイテム</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-dark">暗灰色リストアイテム</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-light">淡色リストアイテム</a>
　　</div>
</div>
</body>
</html>
テストを見てみる ‹/›
Bootstrap4 カードBootstrap4 ページネーション