イメージ
画像表示の形式
角丸
サークル
サムネイル
角丸
.img-rounded
クラスは画像に丸みのあるコーナーを追加します（IE8はサポートしません）。
<img src="img.jpg" class="img-rounded" alt="参考画像" width="200" height="200">
サークル
.img-circle
クラスは画像をサークルで表示します（IE8はサポートしません）。
<img src="img.jpg" class="img-circle" alt="参考画像" width="200" height="200">
サムネイル
.img-thumbnail
クラスは画像をサムネイル表示します。
<img src="img.jpg" class="img-thumbnail" alt="参考画像" width="200" height="200">
レスポンシブ画像
画像は自動的に画面のサイズに合わせて調整されます。
.img-responsive
クラスを
<img>
タグに追加することで、レスポンシブイメージを作成します。イメージは親要素にうまくスケールされます。
.img-responsive
クラスは次のCSSを適用します。
display: block;
max-width: 100%;
height: auto;
<img src="img.jpg" class="img-responsive img-rounded" alt="参考画像" width="400" height="400">
イメージギャラリー
Bootstrapのグリッドシステムと
.thumbnail
クラスを組み合わせて画像ギャラリーを作成することもできます。
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="#">
<img src="img.jpg" alt="参考画像" style="width:100%">
<div class="caption">
<p>トラクターとは、ラテン語の「引く」という言葉に由来した機械で、単体では動かすことのできないものを動かす牽引車のことを言い、稲作に使われるものは農業用トラクターと呼ばれます。</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#">
<img src="img.jpg" alt="参考画像" style="width:100%">
<div class="caption">
<p>農業用トラクターは、農業機械などを牽引するだけでなく、農用作業機を取り付けることによって田んぼを耕したり、肥料を散布したりと様々な農作業を行うことが出来ます。</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#">
<img src="img.jpg" alt="参考画像" style="width:100%">
<div class="caption">
<p>牽引(けんいん)自動車。農作業や土木工事などで、ものをひっぱるのに使う。</p>
</div>
</a>
</div>
</div>
</div>
レスポンシブな埋め込み
どのデバイスでもビデオやスライドショーを適切なサイズに調整できます。
クラスは
<iframe>
、
<embed>
、
<video>
、
<object>
要素に直接適用できます。
次の例では、レスポンシブビデオを作成します。
.embed-responsive-item
を
<iframe>
タグに追加します（動画は親要素にうまく調整されます）。
<div>
タグで動画のアスペクト比が定義できます。
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/B2D3lGOrdVQ"></iframe> </div>
アスペクト比とは?
アスペクト比は、その幅と高さとの比例関係を表します。 一般的なビデオ縦横比は、4:3（20世紀のビデオフォーマット）と16:9（HDテレビ）です。