第10節(jié) Bootstrap的圖片和輪廓組件
10.1 圖片
本文節(jié)將學(xué)習(xí)如何讓圖片支持響應(yīng)式行為（這樣它們就不會(huì)超出父元素的范圍）以及如何通過類（class）添加些許樣式。
10.1.1 響應(yīng)式圖片
通過 Bootstrap 所提供的.img-fluid 類讓圖片支持響應(yīng)式布局。其原理是將max-width: 100%; 和 height: auto; 賦予圖片，以便隨父元素一起縮放。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>圖片演示</title> </head> <body> <div> <img src="pic/taohua.jpg" alt="桃花朵朵開"> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
上面container是為了讓圖片居中顯示切四周有邊距，不是圖像組件的一部分，下面是演示錄像。
10.1.2 圖片縮略圖
除了通用類提供的提供的border-radius外，你還可以使用.img-thumbnail 使圖片的外觀具有 1px 寬度的圓形邊框。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<style>
.div1{width: 300; height: 300px;text-align: center;padding-top: 50px;}
</style>
<title>圖片演示</title>
</head>
<body>
<div>
<img src="pic/taohua.jpg" width="50%" alt="點(diǎn)擊查看大圖">
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>這個(gè)組件也是響應(yīng)式的，不過我只給出了截圖,上面css的樣式是為了讓圖片不靠近邊上，不要不可能看不到邊框，其實(shí)直接使用container也一樣，在此只是為了不使用container免得大家以為container也是其中一部分。
10.1.3 picture標(biāo)簽
picture元素通過包含一個(gè)或多個(gè)source元素和一個(gè)img元素再結(jié)合media（媒體查詢）來使用， 根據(jù)屏幕匹配的不同尺寸顯示不同圖片，如果沒有匹配到或?yàn)g覽器不支持 picture 屬性則使用 img 元素，一個(gè)picture元素?zé)o論指定幾個(gè)source，只會(huì)顯示其中的一個(gè)或者img。
如果你使用 元素為某個(gè) <img> 指定多個(gè) <source> 元素的話，請確保將 .img-* 類添加到 <img> 元素而不是<picture> 元素或者source元素上。
source元素排列是有順序的。媒體查詢的值，如果是max-width，則從小到大排序；如果是min-width，則按從大到小的順序排列。下面是源碼，源碼中js代碼是獲取屏幕寬度，作為對照。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>圖片演示</title>
</head>
<body>
<div>
<p>
<span id="info"></span>
<script>
getwidth();
window.onresize = function(){
getwidth();
}
function getwidth(){
document.getElementById("info").innerHTML="寬度："+document.documentElement.clientWidth+"，高度："+document.documentElement.clientHeight;
}
</script>
</p>
<picture>
<source media="(max-width: 600px)" srcset="pic/girl1.jpg">
<source media="(max-width: 700px)" srcset="pic/girl2.jpg">
<img src="pic/taohua.jpg">
</picture>
<picture>
<source media="(min-width: 700px)" srcset="pic/girl1.jpg">
<source media="(min-width: 600px)" srcset="pic/girl2.jpg">
<img src="pic/taohua.jpg">
</picture>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>下面是演示
10.2 輪廓（Figures）
通過 Bootstrap 的輪廓（figure）組件來顯示相關(guān)聯(lián)的圖片和文本。任何時(shí)候需要顯示一段內(nèi)容（例如帶有可選標(biāo)題的圖片），請使用 <figure>標(biāo)簽。
使用內(nèi)置的.figure、.figure-img和.figure-caption類別，可提供HTML5 <figure>和<figcaption>標(biāo)簽一些基本樣式設(shè)定。圖片沒有明確尺寸，請務(wù)必在<img>標(biāo)簽加上 .img-fluid類別設(shè)定為響應(yīng)式圖片。
事實(shí)上，輪廓組件不僅用于圖片，在前一節(jié)文字排版部分，引用來源部分就已經(jīng)使用了輪廓組件。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>figure演示</title> </head> <body> <div> <figure> <img src="pic/taohua.jpg" class="figure-img img-fluid rounded" alt="..."> <figcaption class="figure-caption text-center">桃花朵朵開</figcaption> </figure> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
簡單解釋一下img標(biāo)簽里面的類rounded是圖片四周為圓角，不需要可以不寫。 figcaption標(biāo)簽里面的類text-center是圖片居中對齊，還可以用text-end為右對齊，默認(rèn)可以不寫為左對齊。
今天的課程就到這里。請關(guān)注我，及時(shí)學(xué)習(xí) 俺老劉原創(chuàng)的《Bootstrap5零基礎(chǔ)到精通》第11節(jié) Bootstrap中的表格，表格的用處非常廣泛，設(shè)計(jì)起來也比較麻煩，幸運(yùn)的是借助bootstrap我們可以很輕松地做出好看的表格。