Bootstrap基本チュートリアル

Bootstrapプラグイン

Bootstrapウェル

Wellは、コンテンツを内側に凹ませる表示やイラスト効果を持つコンテナ<div>です。Wellを作成するには、単に内容をclass .well の<div>内に配置してください。以下の例では、デフォルトのWellを示しています：

オンラインサンプル

サンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　デフォルトの　Well</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="well">こんにちは、私はWellの中で！</div>
</body>
</html>

テストしてみる ‹/›

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

サイズ

オプションクラスを使用して、サイズを変更できます。 well-lg または well-sm を使用して、Wellのサイズを変更します。これらのクラスは .well クラスを組み合わせることで、インラインパディング（padding）に影響を与えます。使用するクラスによって、Wellが大きくなったり小さくなったりします。

オンラインサンプル

サンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　Well　のサイズ</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="well well-lg">こんにちは、私は大きな Well です！</div>
<div class="well well-sm">こんにちは、私は小さい Well です！</div>
</body>
</html>

テストしてみる ‹/›

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

Bootstrap 網頁の作成 Bootstrap パネル