Bootstrap 基礎トレーニング

Bootstrap プラグイン

Bootstrap リストグループ

この章では、リストグループについて説明します。リストコンポーネントは、複雑でカスタマイズされた内容をリスト形式で表示するために使用されます。基本的なリストグループを作成する手順は以下の通りです：

<ul>にclassを追加 .list-group。
<li>にclassを追加 .list-group-item。

以下の例がこの点を示しています：

在线示例

示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　基本的なリストグループ</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="list-group">
	<li class="list-group-item">無料ドメイン登録</li>
	<li class="list-group-無料　Window　スペースホスティング</li>
	<li class="list-group-画像の数</li>
	<li class="list-group-item">24*7　支持</li>
	<li class="list-group-item">年間更新費用</li>
</ul>
</body>
</html>

テストをしてみる ‹/›

以下の結果が表示されました：

リストグループにバッジを追加

どのリストアイテムにもバッジコンポーネントを追加できます。それが自動的に右側に配置されます。ただし、<li>要素に追加する必要があります <span> これで完了です。以下の例がこの点を示しています：

在线示例

示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　リストグループにバッジを追加</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="list-group">
	<li class="list-group-item">無料ドメイン登録</li>
	<li class="list-group-無料　Window　スペースホスティング</li>
	<li class="list-group-画像の数</li>
	<li class="list-group-item">
		<span class="badge">新</span>
		24*7　支持
	</li>
	<li class="list-group-item">年間更新費用</li>
	<li class="list-group-item">
		<span class="badge">新</span>
		割引オファー
	</li>
</ul>
</body>
</html>

テストをしてみる ‹/›

以下の結果が表示されました：

リストグループにリンクを追加

リストアイテムの代わりにアンカータグを使用することで、リストグループにリンクを追加できます。リストアイテムの代わりに <a> を使用する必要があります。以下の例がこの点を示しています：

在线示例

示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　リストグループにリンクを追加</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<a　href="#"　class="list-group-item　active">
	免费域名注册
</a>
<a　href="#"　class="list-group-item">24*7　支持</a>
<a　href="#"　class="list-group-無料　Window　スペースホスティング</a>
<a　href="#"　class="list-group-画像の数</a>
<a　href="#"　class="list-group-item">年間更新費用</a>
</body>
</html>

テストをしてみる ‹/›

以下の結果が表示されました：

向列表组添加自定义内容

我们可以向上面已添加链接的列表组添加任意的 HTML 内容。下面的示例演示了这点：

在线示例

示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　向列表组添加自定义内容</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="list-group">
	<a　href="#"　class="list-group-item　active">
		<h4　class="list-group-item-heading">
			入门网站包
		</h4>
	</a>
	<a　href="#"　class="list-group-item">
		<h4　class="list-group-item-heading">
			免费域名注册
		</h4>
		<p　class="list-group-item-text">
			您将通过网页进行免费域名注册。
		</p>
	</a>
	<a　href="#"　class="list-group-item">
		<h4　class="list-group-item-heading">
			24*7　支持
		</h4>
		<p　class="list-group-item-text">
			我们提供　24*7　支持。
		</p>
	</a>
</div>
<div　class="list-group">
	<a　href="#"　class="list-group-item　active">
		<h4　class="list-group-item-heading">
			商务网站包
		</h4>
	</a>
	<a　href="#"　class="list-group-item">
		<h4　class="list-group-item-heading">
			免费域名注册
		</h4>
		<p　class="list-group-item-text">
			您将通过网页进行免费域名注册。
		</p>
	</a>
	<a　href="#"　class="list-group-item">
		<h4　class="list-group-item-heading">24*7　支持</h4>
		<p　class="list-group-item-text">我们提供　24*7　支持。</p>
	</a>
</div>
</body>
</html>

テストをしてみる ‹/›

以下の結果が表示されました：

水平列表

上面示例中列表都是按垂直显示的，如果我们需要一个水平列表，可以通过以下代码实现：

在线示例

示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　实现水平列表</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
	.list-group-horizontal　.list-group-item　{
		display:　inline-block;
	}
	.list-group-horizontal　.list-group-item　{
		margin-bottom:　0;
		margin-left:-4px;
		margin-right:　0;
	}
	.list-group-horizontal　.list-group-item:first-child　{
		border-top-right-radius:0;
		border-bottom-left-radius:4px;
	}
	.list-group-horizontal　.list-group-item:last-child　{
		border-top-right-radius:4px;
		border-bottom-left-radius:0;
	}
	</style>
</head>
<body>
<div　class="container">
	<div　class="row"　style="padding-top:50px">
　　　　　　　　<div　class="col-xs-12　col-sm-12　col-md-6　col-lg-6　text-center">
　　　　　　　　　　　　<div　class="list-group　list-group-horizontal">
　　　　　　　　　　　　　　　　<a　href="#"　class="list-group-item　active">Google</a>
　　　　　　　　　　　　　　　　<a　href="#"　class="list-group-item">w3codebox</a>
　　　　　　　　　　　　　　　　<a　href="#"　class="list-group-item">Taobao</a>
　　　　　　　　　　　　　　　　<a　href="#"　class="list-group-item">Github</a>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　　　<div　class="col-xs-12　col-sm-12　col-md-6　col-lg-6　text-center">
　　　　　　　　　　　　<div　class="list-group　list-group-horizontal">
　　　　　　　　　　　　　　　　<a　href="#"　class="list-group-item">Google</a>
　　　　　　　　　　　　　　　　<a　href="#"　class="list-group-item　active">w3codebox</a>
　　　　　　　　　　　　　　　　<a　href="#"　class="list-group-item">Taobao</a>
　　　　　　　　　　　　　　　　<a　href="#"　class="list-group-item">Github</a>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
	</div>
</div>
</body>
</html>

テストをしてみる ‹/›

以下の結果が表示されました：

Bootstrap パネル Bootstrap メディアオブジェクト