Bootstrap5 卡片

簡單的卡片

我們可以通過 Bootstrap5 的 .card 與 .card-body 類來創(chuàng)建一個簡單的卡片，卡片可以包含頭部、內(nèi)容、底部以及各種顏色設(shè)置，實例如下:

創(chuàng)新互聯(lián)建站是專業(yè)的滄源網(wǎng)站建設(shè)公司，滄源接單;提供成都網(wǎng)站制作、網(wǎng)站設(shè)計、外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行滄源網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

實例

<
div

class
=
"
card
"
>

<
div

class
=
"
card-body
"
>
簡單的卡片
div
>

div
>

嘗試一下 ?

頭部和底部

.card-header類用于創(chuàng)建卡片的頭部樣式， .card-footer 類用于創(chuàng)建卡片的底部樣式：

實例

<
div

class
=
"
card
"
>

<
div

class
=
"
card-header
"
>
頭部
div
>

<
div

class
=
"
card-body
"
>
內(nèi)容
div
>

<
div

class
=
"
card-footer
"
>
底部
div
>

div
>

嘗試一下 ?

多種顏色卡片

Bootstrap 5 提供了多種卡片的背景顏色類： .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

實例

<
div

class
=
"
container
"
>

<
h2
>
多種顏色卡片
h2
>

<
div

class
=
"
card
"
>

<
div

class
=
"
card-body
"
>
基礎(chǔ)卡片
div
>

div
>

<
br
>

<
div

class
=
"
card bg-primary text-white
"
>

<
div

class
=
"
card-body
"
>
主要卡片
div
>

div
>

<
br
>

<
div

class
=
"
card bg-success text-white
"
>

<
div

class
=
"
card-body
"
>
成功卡片
div
>

div
>

<
br
>

<
div

class
=
"
card bg-info text-white
"
>

<
div

class
=
"
card-body
"
>
信息卡片
div
>

div
>

<
br
>

<
div

class
=
"
card bg-warning text-white
"
>

<
div

class
=
"
card-body
"
>
警告卡片
div
>

div
>

<
br
>

<
div

class
=
"
card bg-danger text-white
"
>

<
div

class
=
"
card-body
"
>
危險卡片
div
>

div
>

<
br
>

<
div

class
=
"
card bg-secondary text-white
"
>

<
div

class
=
"
card-body
"
>
次要卡片
div
>

div
>

<
br
>

<
div

class
=
"
card bg-dark text-white
"
>

<
div

class
=
"
card-body
"
>
黑色卡片
div
>

div
>

<
br
>

<
div

class
=
"
card bg-light text-dark
"
>

<
div

class
=
"
card-body
"
>
淺色卡片
div
>

div
>

div
>

嘗試一下 ?

標(biāo)題、文本和鏈接

我們可以在頭部元素上使用 .card-title 類來設(shè)置卡片的標(biāo)題 。 .card-body 類用于設(shè)置卡片正文的內(nèi)容。.card-text 類用于設(shè)置卡 .card-body 類中的

標(biāo)簽，如果說最后一行可以移除底部邊距。 .card-link 類用于給鏈接設(shè)置顏色。

實例

<
div

class
=
"
card
"
>

<
div

class
=
"
card-body
"
>

<
h4

class
=
"
card-title
"
>
Card title
h4
>

<
p

class
=
"
card-text
"
>
Some example text. Some example text.
p
>

<
a

href
=
"
#
"

class
=
"
card-link
"
>
Card link
a
>

<
a

href
=
"
#
"

class
=
"
card-link
"
>
Another link
a
>

div
>

div
>

嘗試一下 ?

圖片卡片

我們可以給 添加 .card-img-top（圖片在文字上方） 或 .card-img-bottom（圖片在文字下方 來設(shè)置圖片卡片：

實例

<
div

class
=
"
card
"

style
=
"
width:400px
"
>

<
img

decoding
=
"
async
"

class
=
"
card-img-top
"

src
=
"
img_avatar1.png
"

alt
=
"
Card image
"
>

<
div

class
=
"
card-body
"
>

<
h4

class
=
"
card-title
"
>
John Doe
h4
>

<
p

class
=
"
card-text
"
>
Some example text.
p
>

<
a

href
=
"
#
"

class
=
"
btn btn-primary
"
>
See Profile
a
>

div
>

div
>

嘗試一下 ?

如果圖片要設(shè)置為背景，可以使用 .card-img-overlay 類:

實例

<
div

class
=
"
card
"

style
=
"
width:500px
"
>

<
img

decoding
=
"
async
"

class
=
"
card-img-top
"

src
=
"
img_avatar1.png
"

alt
=
"
Card image
"
>

<
div

class
=
"
card-img-overlay
"
>

<
h4

class
=
"
card-title
"
>
John Doe
h4
>

<
p

class
=
"
card-text
"
>
Some example text.
p
>

<
a

href
=
"
#
"

class
=
"
btn btn-primary
"
>
See Profile
a
>

div
>

div
>

嘗試一下 ?

分享名稱：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5卡片
標(biāo)題網(wǎng)址：http://uogjgqi.cn/article/dpdgpjs.html