第10節 Bootstrap的圖片和輪廓組件
10.1 圖片
本文節將學習如何讓圖片支持響應式行為（這樣它們就不會超出父元素的范圍）以及如何通過類（class）添加些許樣式。
10.1.1 響應式圖片
通過 Bootstrap 所提供的.img-fluid 類讓圖片支持響應式布局。其原理是將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="點擊查看大圖">
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>這個組件也是響應式的，不過我只給出了截圖,上面css的樣式是為了讓圖片不靠近邊上，不要不可能看不到邊框，其實直接使用container也一樣，在此只是為了不使用container免得大家以為container也是其中一部分。
10.1.3 picture標簽
picture元素通過包含一個或多個source元素和一個img元素再結合media（媒體查詢）來使用， 根據屏幕匹配的不同尺寸顯示不同圖片，如果沒有匹配到或瀏覽器不支持 picture 屬性則使用 img 元素，一個picture元素無論指定幾個source，只會顯示其中的一個或者img。
如果你使用 元素為某個 <img> 指定多個 <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）組件來顯示相關聯的圖片和文本。任何時候需要顯示一段內容（例如帶有可選標題的圖片），請使用 <figure>標簽。
使用內置的.figure、.figure-img和.figure-caption類別，可提供HTML5 <figure>和<figcaption>標簽一些基本樣式設定。圖片沒有明確尺寸，請務必在<img>標簽加上 .img-fluid類別設定為響應式圖片。
事實上，輪廓組件不僅用于圖片，在前一節文字排版部分，引用來源部分就已經使用了輪廓組件。
<!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標簽里面的類rounded是圖片四周為圓角，不需要可以不寫。 figcaption標簽里面的類text-center是圖片居中對齊，還可以用text-end為右對齊，默認可以不寫為左對齊。
今天的課程就到這里。請關注我，及時學習 俺老劉原創的《Bootstrap5零基礎到精通》第11節 Bootstrap中的表格，表格的用處非常廣泛，設計起來也比較麻煩，幸運的是借助bootstrap我們可以很輕松地做出好看的表格。