閱讀(973) 書簽贊(0) 我要糾錯

Bootstrap5 圖像形狀

2023-06-21 14:59 更新

圓角圖片

.rounded 類可以讓圖片顯示圓角效果：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>圓角圖片</h2>
  <p>.rounded 類可以讓圖片顯示圓角效果：</p>            
  <img src="https://atts.w3cschool.cn/attachments/image/20230621/1687330063543768.jpeg" class="rounded" alt="Cinque Terre" width="304" height="236"> 
</div>

</body>
</html>

橢圓圖片

.rounded-circle 類可以設(shè)置橢圓形圖片:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>橢圓圖片</h2>
  <p>.rounded-circle 類可以設(shè)置橢圓形圖片:</p>            
  <img src="https://atts.w3cschool.cn/attachments/image/20230621/1687330063543768.jpeg" class="rounded-circle" alt="Cinque Terre"> 
</div>

</body>
</html>

縮略圖

.img-thumbnail 類用于設(shè)置圖片縮略圖(圖片有邊框):

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
  <h2>縮略圖</h2>
  <p>.img-thumbnail 類用于設(shè)置圖片縮略圖(圖片有邊框):</p>             
  <img src="https://atts.w3cschool.cn/attachments/image/20230621/1687330063543768.jpeg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
</div>
</body>
</html>

圖片對齊方式

使用 .float-start 類來設(shè)置圖片左對齊，使用 .float-end 類設(shè)置圖片右對齊:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>圖片對齊方式</h2>
  <p>使用 .float-start 類來設(shè)置圖片左對齊，使用 .float-end 類設(shè)置圖片右對齊:</p>
  <img src="https://atts.w3cschool.cn/attachments/image/20230621/1687330063543768.jpeg" class="float-start" alt="Paris" width="304" height="236"> 
  <img src="https://atts.w3cschool.cn/attachments/image/20230621/1687330063543768.jpeg" class="float-end" alt="Paris" width="304" height="236"> 
</div>

</body>
</html>

圖片居中

使用 .mx-auto (margin:auto) 和 .d-block (display:block) 類來設(shè)置圖片居中對齊：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>圖片居中</h2>
  <p>使用 .mx-auto (margin:auto) 和 .d-block (display:block) 類來設(shè)置圖片居中對齊：</p> 
  <img src="https://atts.w3cschool.cn/attachments/image/20230621/1687330063543768.jpeg" class="mx-auto d-block" style="width:50%"> 
</div>

</body>
</html>

響應(yīng)式圖片

圖像有各種各樣的尺寸，我們需要根據(jù)屏幕的大小自動適應(yīng)。

我們可以通過在 <img> 標(biāo)簽中添加 .img-fluid 類來設(shè)置響應(yīng)式圖片。

.img-fluid 類設(shè)置了 max-width: 100%; 、 height: auto; :

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>響應(yīng)式圖片</h2>
  <p>.img-fluid 類可以設(shè)置響應(yīng)式圖片，重置瀏覽器大小查看效果:</p>
  <img src="https://atts.w3cschool.cn/attachments/image/20230621/1687330063543768.jpeg" class="img-fluid">
</div>

</body>
</html>

以上內(nèi)容是否對您有幫助：

← Bootstrap5 表格

Bootstrap5 Jumbotron(超大屏幕) →

寫筆記

我要補充