web前端卡片样式_WEB前端第五十课——BootStrap组件（二）Card、Carousel

1.Card卡片

一个可以添加图像、标题、文本、列表、按钮等多种或一种内容的容器。

⑴ 基本样式

主要构成：

① 卡片容器，

③ 图片，，可以放在 body之前或之后

④ 卡片体，

，一个 card内可以多个 body

⑤ 卡片标题，

⑥ 卡片文本，

⑦ 卡片连接，，可以多个连接按钮或其他按钮

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

⑵ 添加列表组

卡片中可以根据需要添加列表组，即在卡片内部添加 ul>li列表

主要构成：

① 卡片容器，

② 列表 ul，

③ 列表 li，

• Cras justo odio
• Dapibus ac facilisis in
• Vestibulum at eros

⑶ 页眉页脚

① 可根据需求在卡片内某个位置添加头部样式，示例如下：

HeaderText

“.card-header”也可以添加到标签或其他标签中。

② 可以在卡片内添加页脚样式，示例如下：

 FooterText

ps：可以向 card内的文本内容添加“.text-* ”字体样式或对齐样式。

⑷ 响应式卡片

可以根据需要将卡片包裹在栅格系统中，达到响应式需求。示例如下：

Special title treatment

With support