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 supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

⑸ 卡片排版

① 卡片大小

卡片的宽度可以通过行内样式设置，如：style="width: 18rem;

也可以通过 BootStrap预置的尺寸类，如：class="w-25";

② 文本对齐

对卡片设置统一的对齐或字体样式，只需要在 card容器上定义“.text-* ”类即可。

③ 卡片背景色

通过定义 card容器的“.bg-* ”类设置卡片的背景颜色，如：bg-primary、bg-secondary等

④ 卡片边框

为 card容器定义“.border-* ”类设置卡片的边框样式，如：border-success、bg-danger等

⑤ 卡片字体

可以分别设置 card容器或 body的字体样式，如：text-white、text-muted、text-warning等

ps：卡片的页眉、页脚、卡片体都是可以分别设置不同字体、边框、背景等样式的。

⑹ 卡片导航

可以通过在卡片中添加导航条，实现选项卡的效果(配合 js代码切换 card-body内容)。

在 card-body前增加 ul列表(由 div包裹)，

ul元素添加的类主要有三个：.nav， .nav-tabs， .card-header-tabs；

li元素添加的类主要有：.nav-item；

在内容元素中定义选项卡的活动状态。

• 除定义“ *-tabs”样式，还可定义其他样式，如：

示例如下：

• Active

• Link

• Disabled

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

⑺ 图像覆盖

卡片中的图片可以作为文本内容的背景图片呈现，

此时基本样式中所说的 图片 和 卡片体 需要设置不同的类。

① 图片，

② 卡片体，

示例如下：

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

⑻ 水平排列

通过将图像与文本内容分别放在响应式布局的容器中实现二者的水平方向排列。

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

ps：在 .row类的div中增加了“.no-gutters”样式，作用是去掉 row的外边距和子选择器 col的内边距。

⑼ 卡片组

多个具有相同宽度和高度的卡片外部再嵌套一个组容器，就形成了卡片组。

class="card-group"，每个卡片紧挨在一起

class="card-deck"，每个卡片之间有间隔(也称为卡片甲板)

⑽ 其他

栅格卡片，可以控制每行最多显示的卡片数量

卡片列，可以类似于瀑布流布局卡片

2.轮播图

⑴ 基础框架

由4层构成：

① 外层容器，整个轮播图所有控件的容器，

“.carousel”类为必须的轮播样式

“.slide”类定义滑动效果

data-ride="carousel"属性用于自启动轮播

“id”用于内部控件间调用

② 内部容器

用于包裹轮播图主体内容

class="carousel-inner"

③ 图片容器

用于包裹 img图像

class="carousel-item active"

④ img图像

class="d-block w-25"，定义为块级元素，设置大小样式

示例如下：

⑵ 在基础框架中还可以添加多种元素内容和轮播效果：

① 滑动按钮

使用标签作为按钮容器

样式类，class="carousel-control-prev"，定义对应方向样式

链接，href="#carouselExample"，链接与外层容器“id”相同

属性，data-slide="prev"，定义滑动事件

按钮，class="carousel-control-prev-icon"，定义按钮图标

② 锚点指示

使用 ol无序列表设置锚点标识

锚点

1. ，class="carousel-indicators"

锚点

target，data-target="#carouselExample"，与外层容器“id”相同

锚点

属性，data-slide-to="0"，关联对应图片的索引位置

锚点

类，class="active"，定义加载页面是的活动状态

③ 图片描述

在图片容器中添加 div文本容器

class="carousel-caption d-none d-md-block"

④ 淡入淡出

直接在外层容器添加“.carousel-fade”类即可

⑤ 自动轮播

给图片容器 div添加 data-interval="timeValue"属性

示例如下：

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Previous

Next

参考资料来源：BootStrap中文网(https://v3.bootcss.com/)