Bootstrap 圖片

2022-05-21 15:17 更新

Bootstrap 圖片

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

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

請看下面的實例演示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 圖片</title>
   <link  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" ></script>
</head>
<body>

<img src="http://www.o2fo.com/statics/demosource/download.png" class="img-rounded">
<img src="http://www.o2fo.com/statics/demosource/download.png" class="img-circle">
<img src="http://www.o2fo.com/statics/demosource/download.png" class="img-thumbnail">

</body>
</html>

結果如下所示：

圖片

<img> 類

以下類可用于任何圖片中。

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

響應式圖片

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

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

實例

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">

嘗試一下 ?

提示：通過使用Bootstrap的圖片響應式類.img-responsive，你可以讓圖片適配手機顯示！

以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號