圖像在現代網頁設計中非常普遍。因此，對圖像進行樣式設置并將其正確放置在網頁上對于改善用戶體驗非常重要。
使用Bootstrap內置類，您可以輕松設置圖像的樣式，例如制作圓角或圓形圖像，或賦予它們類似縮略圖的效果。
.rounded 類可以讓圖片顯示圓角效果：
<!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 類可以讓圖片顯示圓角效果：</p> <img src="/run/images/cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236"> </div> </body> </html>測試看看 ?/?
.rounded-circle 類可以設置橢圓形圖片:
<!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 類可以設置橢圓形圖片:</p> <img src="/run/images/cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre"> </div> </body> </html>測試看看 ?/?
.img-thumbnail 類用于設置圖片縮略圖(圖片有邊框):
<!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 類用于設置圖片縮略圖(圖片有邊框):</p> <img src="/run/images/cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"> </div> </body> </html>測試看看 ?/?
使用 .float-right 類來設置圖片右對齊，使用 .float-left 類設置圖片左對齊:
<!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>使用 .float-right 類來設置圖片右對齊，使用 .float-left 類設置圖片左對齊:</p> <img src="/run/images/paris.jpg" class="float-left"> <img src="/run/images/cinqueterre.jpg" class="float-right"> </div> </body> </html>測試看看 ?/?
圖像有各種各樣的尺寸，我們需要根據屏幕的大小自動適應。
我們可以通過在 <img> 標簽中添加 .img-fluid 類來設置響應式圖片。
.img-fluid 類設置了 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>響應式圖片</h2> <p>.img-fluid 類可以設置響應式圖片，重置瀏覽器大小查看效果:</p> <img src="/run/images/paris.jpg" class="img-fluid"> </div> </body> </html>測試看看 ?/?