Bootstrapピクチャ【応答式class=“img-responsive”をサポート】
9170 ワード
Bootstrap画像
本章では、Bootstrapの画像サポートについて学習します.Bootstrapは、画像に簡単なスタイルを適用できる3つのclassを提供しています.
.img-rounded:border-radius:6 pxを追加してピクチャフィレットを取得します.
.img-circle:border-radius:50%を追加して、画像全体を円形にします.
.img-thumbnail:内側の余白と灰色の枠線を追加します.
次の例を参照してください.<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - </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>
試してみる»
結果は次のとおりです.
<img>クラス
以下のクラスは、任意のピクチャで使用できます.
クラス#クラス#
説明
≪インスタンス｜Instance｜emdw≫
.img-rounded
画像にフィレットを追加(IE 8ではサポートされていません)
試してみる
.img-circle
画像を円形に変更(IE 8ではサポートされていません)
試してみる
.img-thumbnail
サムネイル機能
試してみる
.img-responsive
ピクチャレスポンス(親要素にうまく拡張)
試してみる
レスポンス画像
![]()
タグに追加する.img-responsiveクラスは、画像に応答設計をサポートさせる.画像は親要素によく拡張されます.
.img-responsiveクラスはmax-width:100%;とheight:auto;画像にスタイルを適用するには、次の手順に従います.
≪インスタンス｜Instance｜emdw≫
<
img
src=
"cinqueterre.jpg"
class=
"img-responsive"
alt=
"Cinque Terre"
>
試してみる»
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - </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>