Twitter Bootstrapによる画像の装飾

Twitter Bootstrapを使うと画像の角を丸めて表示するなどの操作を簡単に行うことができます。

img-rounded

画像の角を丸める場合に使えます。

<img src="photo.jpg" alt="" class="img-rounded" width="240" height="240" />
Bootstrapによる画像の装飾
Bootstrapによる画像の装飾

img-circle

画像を円で表示します。

<img src="photo.jpg" alt="" class="img-circle" width="240" height="240" />
Bootstrapによる画像の装飾
Bootstrapによる画像の装飾

img-polaroid

写真を表示する場合に便利そうな表示です。

<img src="photo.jpg" alt="" class="img-polaroid" width="240" height="240" />
Bootstrapによる画像の装飾
Bootstrapによる画像の装飾

サンプルの写真について

サンプルの写真は無料の写真素材集サイトで紹介している2000ピクセル以上のフリー写真素材集の写真素材を利用しています。

デモページ

この記事で紹介した画像装飾のデモページは下記でご覧になれます。
Bootstrapによる画像の装飾

コメントを残す

メールアドレスが公開されることはありません。