Bootstrap基本チュートリアル

Bootstrapプラグイン

Bootstrap 画像

本章では、Bootstrapが画像に提供するサポートを学習します。Bootstrapは、画像に簡単なスタイルを適用するために3つのクラスを提供しています：

.img-rounded：追加します border-radius:6px を画像に丸みを加えます。
.img-circle：追加します border-radius:50% 全体の画像を円形にします。
.img-thumbnail：内部マージン(padding)と灰色の枠を追加します。

以下の例を確認してください：

オンライン例

例

!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>
<img　src="/run/images/download.png"　class="img-rounded">
<img　src="/run/images/download.png"　class="img-circle">
<img　src="/run/images/download.png"　class="img-thumbnail">
</body>
</html>

テストして見て‹/›

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

<img> クラス

以下のクラスはどの画像にも使用できます。

クラス	説明	例
.img-rounded	画像に丸みを加えます (IE8 サポートしていません)	試してみてください
.img-circle	画像を円形に変換 (IE8 サポートしていません)	試してみてください
.img-thumbnail	サムネイル機能	試してみてください
.img-responsive	画像レスポンシブ (親要素に非常によく拡張されます)	試してみてください

レスポンシブ画像

<img> タグに .img-responsive クラスを使用して画像がレスポンシブデザインをサポートするようにします。　画像は親要素に非常によく拡張されます。

.img-responsive クラスは max-width: 100%; そして height: auto; スタイルが画像に適用されます：

オンライン例

例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>基本チュートリアルサイト(oldtoolbag.com)</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="container">
	<h2>画像</h2>
	<p>　.img-responsiveクラスは画像がリスポンシブにサポートされ、親要素に良く拡張されます（ウィンドウサイズを変更して効果を確認してください）:</p>　　　　　　　　　　　　　　　　　　
	<img　src="cinqueterre.jpg"　class="img-responsive"　alt="Cinque Terre"　width="304"　height="236">　
</div>
</body>
</html>

テストして見て‹/›

Bootstrap 助手クラス Bootstrap ボタン