詳解Bootstrap四種圖片樣式

2019-11-20 10:52:13

字體：大中小

來源：轉載

供稿：網友

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

img-rounded 添加 border-radius:6px 來獲得圖片圓角
img-circle 添加 border-radius:50% 來讓整個圖片變成圓形
img-thumbnail 添加一些內邊距（padding）和一個灰色的邊框
img-responsive 圖片響應式

1、img-rounded

<!doctype html> <html lang="en"> <head>   <!--網站編碼格式，UTF-8 國際編碼，GBK或 gb2312 中文編碼-->   <meta http-equiv="content-type" content="text/html;charset=utf-8" />   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="Keywords" content="關鍵詞一，關鍵詞二">   <meta name="Description" content="網站描述內容">   <meta name="Author" content="Yvette Lau">   <meta name = "viewport" content = " width = device-width, initial-scale = 1 ">   <title>BootstrapDemo</title>   <!--css js 文件的引入-->   <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> </head>   <body style="padding: 20px;">     <div class = "container">       <img src = "5.jpg" class="img-rounded" >        </div>   </body> </html>

.img-rounded{border-radius:6px;}

效果：

2、img-circle

<body style="padding: 20px;">   <div class = "container">     <img src = "5.jpg" class="img-circle" >      </div> </body>

.img-circle{border-radius:50%;}

效果(因為本圖片的寬高大小不同，所以呈現出橢圓，如果將width和height設置相同，那么會呈現出一個圓)：

3、img-thumbnail

<body style="padding: 20px;">   <div class = "container">     <img src = "5.jpg" class="img-thumbnail" >      <img src = "4.jpg" class="img-thumbnail" >      <img src = "3.jpg" class="img-thumbnail" >    </div> </body>

.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;
background-color:#FFF;border:1px solid #DDD;border-radius:4px;transition:all 0.2s ease-in-out;}

效果：

4、img-responsize

<body style="padding: 20px;">   <div class = "container" style = "width:150px;">     <img src = "5.jpg" class="img-responsive" width="400px" >      </div> </body>

.img-responsive{display:block;max-width:100%;height:auto;}

效果(img中的width屬性值被忽略)：