使用 Bootstrap 引入圖片有兩種常用方法:使用
元素指定 src 屬性;使用 img-fluid 類別使圖片適應容器寬度。
如何使用Bootstrap 引入圖片
Bootstrap 提供了多種方式來引入圖片,這裡介紹兩種最常用的方法:
使用img
元素
這是最直接的方法,只需要使用
元素,並指定src
屬性指向圖片的路徑即可。例如:
![图片说明](image.jpg)
使用img-fluid
類別
Bootstrap 提供了img-fluid
類,可以讓圖片自動適應容器的寬度。要使用此方法,需要在
元素上新增 img-fluid
類別。例如:
![图片说明](image.jpg)
其他選項
除了上述兩種方法外,Bootstrap 還提供了其他選項來控制圖片的外觀:
img-thumbnail
類別:建立帶有邊框和圓角的縮圖。 img-rounded
類別:建立帶有圓角的圖片。 img-circle
類別:建立圓形圖片。 figure
元素:為圖片新增標題和說明。 提示
img-fluid
類,以確保圖片在不同裝置上都能正確顯示。 alt
屬性提供圖片的替換文本,以便在圖片無法顯示時使用。 以上是bootstrap怎麼引入圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章!