溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Bootstrap中的圖片組件和輪廓組件舉例分析”，在日常操作中，相信很多人在Bootstrap中的圖片組件和輪廓組件舉例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Bootstrap中的圖片組件和輪廓組件舉例分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
本文節將學習如何讓圖片支持響應式行為（這樣它們就不會超出父元素的范圍）以及如何通過類（class）添加些許樣式。
通過 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是為了讓圖片居中顯示切四周有邊距，不是圖像組件的一部分。
除了通用類提供的提供的border-radius外，你還可以使用.img-thumbnail 使圖片的外觀具有 1px 寬度的圓形邊框。
<!doctype html>
<html lang="zh-CN">
<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 class="div1">
<img src="pic/taohua.jpg" width="50%" class="img-thumbnail" alt="點擊查看大圖">
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>這個組件也是響應式的，不過我只給出了截圖,上面css的樣式是為了讓圖片不靠近邊上，不要不可能看不到邊框，其實直接使用container也一樣，在此只是為了不使用container免得大家以為container也是其中一部分。
picture元素通過包含一個或多個source元素和一個img元素再結合media（媒體查詢）來使用， 根據屏幕匹配的不同尺寸顯示不同圖片，如果沒有匹配到或瀏覽器不支持 picture 屬性則使用 img 元素，一個picture元素無論指定幾個source，只會顯示其中的一個或者img。
如果你使用 元素為某個 <img> 指定多個 <source> 元素的話，請確保將 .img-* 類添加到 <img> 元素而不是<picture> 元素或者source元素上。
source元素排列是有順序的。媒體查詢的值，如果是max-width，則從小到大排序；如果是min-width，則按從大到小的順序排列。下面是源碼，源碼中js代碼是獲取屏幕寬度，作為對照。
<!doctype html>
<html lang="zh-CN">
<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 class="container">
<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" class="img-thumbnail">
</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" class="img-thumbnail">
</picture>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>通過 Bootstrap 的輪廓（figure）組件來顯示相關聯的圖片和文本。任何時候需要顯示一段內容（例如帶有可選標題的圖片），請使用 <figure>標簽。
使用內置的.figure、.figure-img和.figure-caption類別，可提供HTML5 <figure>和<figcaption>標簽一些基本樣式設定。圖片沒有明確尺寸，請務必在<img>標簽加上 .img-fluid類別設定為響應式圖片。
事實上，輪廓組件不僅用于圖片，在前一節文字排版部分，引用來源部分就已經使用了輪廓組件。
<!doctype html> <html lang="zh-CN"> <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 class="container"> <figure class="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為右對齊，默認可以不寫為左對齊。
到此，關于“Bootstrap中的圖片組件和輪廓組件舉例分析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
