亚洲区国产区激情区无码区,国产成人mv视频在线观看,国产A毛片AAAAAA,亚洲精品国产首次亮相在线

Bootstrap4 圖像形狀

圖像在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中非常普遍。因此，對(duì)圖像進(jìn)行樣式設(shè)置并將其正確放置在網(wǎng)頁(yè)上對(duì)于改善用戶(hù)體驗(yàn)非常重要。

使用Bootstrap內(nèi)置類(lèi)，您可以輕松設(shè)置圖像的樣式，例如制作圓角或圓形圖像，或賦予它們類(lèi)似縮略圖的效果。

圓角圖片

.rounded 類(lèi)可以讓圖片顯示圓角效果：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>圓角圖片</h2>
  <p>.rounded 類(lèi)可以讓圖片顯示圓角效果：</p>            
  <img src="/run/images/cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236"> 
</div>
</body>
</html>
測(cè)試看看 ?/?

橢圓圖片

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>橢圓圖片</h2>
  <p>.rounded-circle 類(lèi)可以設(shè)置橢圓形圖片:</p>            
  <img src="/run/images/cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre"> 
</div>
</body>
</html>
測(cè)試看看 ?/?

縮略圖

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>縮略圖</h2>
  <p>.img-thumbnail 類(lèi)用于設(shè)置圖片縮略圖(圖片有邊框):</p>            
  <img src="/run/images/cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
</div>
</body>
</html>
測(cè)試看看 ?/?

圖片對(duì)齊方式

使用 .float-right 類(lèi)來(lái)設(shè)置圖片右對(duì)齊，使用 .float-left 類(lèi)設(shè)置圖片左對(duì)齊:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>圖片對(duì)齊方式</h2>
  <p>使用 .float-right 類(lèi)來(lái)設(shè)置圖片右對(duì)齊，使用 .float-left 類(lèi)設(shè)置圖片左對(duì)齊:</p>
  <img src="/run/images/paris.jpg" class="float-left"> 
  <img src="/run/images/cinqueterre.jpg" class="float-right">
</div>
</body>
</html>
測(cè)試看看 ?/?

響應(yīng)式圖片

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

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>響應(yīng)式圖片</h2>
  <p>.img-fluid 類(lèi)可以設(shè)置響應(yīng)式圖片，重置瀏覽器大小查看效果:</p>
  <img src="/run/images/paris.jpg" class="img-fluid">
</div>
</body>
</html>
測(cè)試看看 ?/?