ブートストラップ画像
この章では、Bootstrap による画像のサポートについて学びます。 Bootstrap には、画像に単純なスタイルを適用できる 3 つのクラスが用意されています:
.img-rounded: 画像の角を丸くするには、border-radius:6px を追加します。
.img-circle: border-radius:50%を追加して、画像全体を円形にします。
.img-thumbnail: パディングとグレーの境界線を追加します。
以下の例を参照してください:
<!DOCTYPE html>
<html>
<head>
<title>ブートストラップの例 - Image</title>
<link href= "/ bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/ bootstrap/ js/bootstrap.min.js"></script>
</head>
<body>
<img src="/wp-content/uploads/2014/06/download.png "
class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png"
class="img-circle">
<img src=" /wp -content/uploads/2014/06/download.png"
class="img-thumbnail">
</body>
</html>
<html>
<head>
<title>ブートストラップの例 - Image</title>
<link href= "/ bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/ bootstrap/ js/bootstrap.min.js"></script>
</head>
<body>
<img src="/wp-content/uploads/2014/06/download.png "
class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png"
class="img-circle">
<img src=" /wp -content/uploads/2014/06/download.png"
class="img-thumbnail">
</body>
</html>
Example
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 图片</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <img src="/wp-content/uploads/2014/06/download.png" class="img-rounded"> <img src="/wp-content/uploads/2014/06/download.png" class="img-circle"> <img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail"> </body> </html>
実行例»
「サンプルの実行」ボタンをクリックして、オンラインサンプルを表示します
<img> クラス
次のクラスは、どのイメージでも使用できます。
| クラス | 説明 | インスタンス |
|---|---|---|
| .img-rounded | 画像に角丸を追加します(IE8はサポートしていません) | 試してみる |
| .img-circle | 写真Circle になります (IE8 ではサポートされていません) | 試してみる |
| .img-thumbnail | サムネイル機能 | 試してみる |
| .img-sensitive | 画像応答性 (親要素に合わせて適切に拡大縮小されます) | 試してみてください |
レスポンシブ画像
画像をレスポンシブ デザインに対応させるには、<img> タグに .img-sensitive クラスを追加します。 画像は親要素まで適切に展開されます。
.img レスポンシブ クラスは、max-width: 100%; および height: auto; スタイルを画像に適用します:
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> </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> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </body> </html>
[Run Instance] ボタンをクリックして、オンラインインスタンスを見る
