boostrap

Bootstrap 圖片

在本章中，咱們將學習 Bootstrap 對圖片的支持。Bootstrap 提供了三個可對圖片應用簡單樣式的 class：

• .img-rounded：添加 border-radius:6px 來得到圖片圓角。
• .img-circle：添加 border-radius:50% 來讓整個圖片變成圓形。
• .img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框。

• <img> 類

  如下類可用於任何圖片中。

  類	描述	實例
  .img-rounded	爲圖片添加圓角 (IE8 不支持)	嘗試一下
  .img-circle	將圖片變爲圓形 (IE8 不支持)	嘗試一下
  .img-thumbnail	縮略圖功能	嘗試一下
  .img-responsive	圖片響應式 (將很好地擴展到父元素)	嘗試一下

  響應式圖片

  經過在 <img> 標籤添加 .img-responsive 類來讓圖片支持響應式設計。 圖片將很好地擴展到父元素。

  .img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應用在圖片上：