java 網(wǎng)站設(shè)計都有什么推廣平臺
Bootstrap-HTML（五）圖像基礎(chǔ)樣式
- 前言
- 一、圓角圖片
- 二、圓形圖片
- 三、縮略圖
- 四、對齊圖像
- 五、圖片居中
- 六、響應(yīng)式圖片
前言
- 在之前的博客中，我們已經(jīng)詳細(xì)了解了 Bootstrap5 中諸多實用的組件和樣式類，比如徽章與表格等，它們在網(wǎng)頁布局和內(nèi)容展示方面發(fā)揮著重要作用。
- 在這篇文章里，我們將深入探討 Bootstrap5 中圖像相關(guān)的樣式類，看看如何利用它們打造出更美觀、更符合網(wǎng)頁設(shè)計需求的圖片展示效果。
一、圓角圖片
- 在網(wǎng)頁設(shè)計中，有時我們希望圖片呈現(xiàn)出圓角的效果，使頁面看起來更加柔和、美觀。Bootstrap5 中提供了
.rounded類來輕松實現(xiàn)這一需求。只需要在<img>標(biāo)簽上添加 .rounded 類，就能為圖像添加圓角，示例代碼如下：
我們以這張照片為例
使用方法
<img src="1.png" class="rounded">
<!DOCTYPE html>
<html lang="en"><head><!-- 最新的 Bootstrap5 核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><div class=""><img src="../圖片/山.jpg" class="rounded">
</div>
</body></html>
效果圖
二、圓形圖片
- 如果想要把橢圓形的圖片設(shè)置成圓形展示，
.rounded-circle類就派上用場了。使用這個類可以將圖片變成圓形，代碼示例如下：
使用方法
<img src="1.png" class="rounded-circle">
<!DOCTYPE html>
<html lang="en"><head><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><div class=""><img src="../圖片/山.jpg" class="rounded-circle"></div>
</body></html>
三、縮略圖
當(dāng)需要展示圖片縮略圖且希望圖片帶有邊框時，可以使用
.img-thumbnail類。它能為圖片添加合適的邊框，營造出縮略圖的效果，示例如下：
<img src="1.png" class="img-thumbnail">
<!DOCTYPE html>
<html lang="en"><head><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><div class=""><img src="../圖片/縮略圖示例圖.jpg" class="img-thumbnail"></div>
</body></html>
四、對齊圖像
對于圖像在頁面中的對齊方式，Bootstrap5 也提供了便捷的樣式類。使用 .float-start 類可以將圖像向左浮動，讓其靠頁面左側(cè)排列；而使用 .float-end 類則能使圖像向右浮動，靠頁面右側(cè)排列，示例代碼如下：
- 我們通過兩張不同圖片展示左右對齊效果
- 向左浮動使用方法
<img src="1.png" class="float-start">
<!DOCTYPE html>
<html lang="en"><head><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><div class=""><img src="../圖片/左對齊示例圖.jpg" class="float-start"></div>
</body></html>
- 向右浮動使用方法
<img src="2.png" class="float-end">
<!DOCTYPE html>
<html lang="en"><head><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><div class=""><img src="../圖片/右對齊示例圖.jpg" class="float-end"></div>
</body></html>
五、圖片居中
-
要讓圖片在頁面中居中對齊，需要同時使用 .mx-auto（margin:auto） 和 .d-block（display:block） 這兩個類，示例如下：
-
使用方法
<img src="1.png" class="mx-auto d-block">
<!DOCTYPE html>
<html lang="en"><head><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><div class=""><img src="../圖片/山.jpg" class="mx-auto d-block"></div>
</body></html>
六、響應(yīng)式圖片
- 由于圖像有著各種各樣的尺寸，為了讓它們能根據(jù)屏幕的大小自動適應(yīng)，Bootstrap5 提供了 .img-fluid 類。將這個類添加到
<img>標(biāo)簽中，它主要會把樣式 max-width:?100%; 和 height:?auto; 應(yīng)用于圖像，使得圖像可以很好地縮放以適合包含元素，示例如下： - 使用方法
<img src="1.png" class="img-fluid">
<!DOCTYPE html>
<html lang="en"><head><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><div class=""><img src="../圖片/響應(yīng)式示例圖.jpg" class="img-fluid"></div>
</body></html>
| 非常感謝您的閱讀，喜歡的話記得三連哦 |
