Bootstrap4 卡片

簡單的卡片

我們可以通過 Bootstrap4 的 .card 與 .card-body 類來創(chuàng)建一個簡單的卡片，實例如下:

創(chuàng)新互聯公司是一家以成都網站建設、網頁設計、品牌設計、軟件運維、營銷推廣、小程序App開發(fā)等移動開發(fā)為一體互聯網公司。已累計為成都加固等眾行業(yè)中小客戶提供優(yōu)質的互聯網建站和軟件開發(fā)服務。

實例

<
div

class
=
"
card
"
>

<
div

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

div
>

嘗試一下 ?

Bootstrap4 的卡片類似 Bootstrap 3 中的面板、圖片縮略圖、well。

頭部和底部

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

實例

<
div

class
=
"
card
"
>

<
div

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

<
div

class
=
"
card-body
"
>
內容
div
>

<
div

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

div
>

嘗試一下 ?

多種顏色卡片

Bootstrap 4 提供了多種卡片的背景顏色類： .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
"
>
Basic card
div
>

div
>

<
br
>

<
div

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

<
div

class
=
"
card-body
"
>
Primary card
div
>

div
>

<
br
>

<
div

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

<
div

class
=
"
card-body
"
>
Success card
div
>

div
>

<
br
>

<
div

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

<
div

class
=
"
card-body
"
>
Info card
div
>

div
>

<
br
>

<
div

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

<
div

class
=
"
card-body
"
>
Warning card
div
>

div
>

<
br
>

<
div

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

<
div

class
=
"
card-body
"
>
Danger card
div
>

div
>

<
br
>

<
div

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

<
div

class
=
"
card-body
"
>
Secondary card
div
>

div
>

<
br
>

<
div

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

<
div

class
=
"
card-body
"
>
Dark card
div
>

div
>

<
br
>

<
div

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

<
div

class
=
"
card-body
"
>
Light card
div
>

div
>

div
>

嘗試一下 ?

標題、文本和鏈接

我們可以在頭部元素上使用 .card-title 類來設置卡片的標題 。 .card-text 類用于設置卡片正文的內容。 .card-link 類用于給鏈接設置顏色。

實例

<
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（圖片在文字下方 來設置圖片卡片：

實例

<
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
>

嘗試一下 ?

如果圖片要設置為背景，可以使用 .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)新互聯Bootstrap4教程：Bootstrap4卡片
轉載源于：http://uogjgqi.cn/article/cdphege.html