1. Badge
Badge作为数值标记组件，它能作为链接或按钮的一部分来提供计数作用，而且它通过使用相对字体大小来适应父级元素的大小。它的最基本的修饰符为.badge .badge-*。
DB Alarm5
通过badge-*类来改变其外观：.badge-primary、.badge-secondary、.badge-success、.badge-danger、.badge-warning、.badge-info、vbadge-light、.badge-dark。
.badge-pill类来设置显示区域的圆角。 2. Breadcrumb
用来显示导航层级结构内的当前位置信息，并通过CSS样式添加分隔符。
3. Buttons
Bootstrap提供预定义的按钮样式，用于不同的目的.btn-primary、.btn-secondary、.btn-success、.btn-danger、.btn-warning、.btn-info、.btn-light、.btn-dark、.btn-link。
<a>元素上应用.button类时，它的目的仅仅是触发页内的方法，而不是链接到新页面或当前页的其他部分，而且这个链接应该添加role="button"来明确其目的。 当需要一个仅有按钮边框没有背景色的按钮时，可以使用.btn-outline-*来修饰元素。按钮样式与普通按钮样式相同。 - 按钮的大小也可以通过以下类来装饰，
.btn-lg表示小按钮，.btn-sm表示大按钮。使用.btn-block来得到占据父级元素全部宽度的块级按钮。 .active类表示按钮呈现出被按下的外观（背景色和边框深一些，并插入阴影）。.disable类表示按钮可不用。
4. Button Group
用.btn-group类修饰div元素来表示该元素下所有的button都是一个组内。
- 组内的按钮之间没有间隔，组间按钮之间存在间隔。
- 使用
.btn-group-*来表示按钮大小，.btn-group-lg表示大按钮，.btn-group-sm表示小按钮。 - 可以嵌套使用。
btn-group-vertical表示组内按钮纵向排列。
5. Card
卡片作为Bootstrap中灵活可扩展的内容容器，提供页头、页尾、多样的内容形式，背景色和可选的显示样式。
.card-header类表示卡片页头。.card-footer类表示卡片页尾。.card-body类表示卡片主体。.card-title和.card-subtitle类表示卡片标题和副标题，一般用来装饰<h*>标签。.card-link类表示链接信息，一般用来装饰<h*>标签。.card-text类用来设置卡片内容，内容仍可以使用标准的HTML标签定义。.list-group和.list-group-item类定义列表及其列表项。list-group-flush类表示列表宽度与卡片宽度相同。- 不指定卡片宽度的情况，默认与父级元素的宽度相同。可以通过设置
.card装饰的元素的style="width:XX"来设置卡片宽度或者指定父级元素的宽度来限定卡片宽度。 - 卡片内容默认居左显示，可以通过
.text-center、text-right来设置居中或居右显示。
- 卡片页头可以设置为导航样式，修改类标识为：
nav nav-tabs card-header-tabs为选项卡样式，nav nav-pills card-header-pills为按钮样式
BodyBody
.card-img-top和.card-img-bottom类用来设置卡片顶部和底部图片。图片也可以作为整个卡片的背景图，设置方式如下
- 可以使用
.text-*和.bg-*来设置卡片的字体颜色和背景色..text-*:.text-primary、.text-secondary、.text-success、.text-danger、.text-warning、.text-info、.text-light、.text-dark、.text-muted、.text-white。.bg-*：.bg-primary、.bg-secondary、.bg-success、.bg-danger、.bg-warning、.bg-info、.bg-light、.bg-dark、.bg-white。 .border-*来设置卡片边框的颜色.border-*:.border-primary、.border-secondary、.border-success、.border-danger、.border-warning、.border-info、.border-light、.border-dark。.card-group和.card-deck用来对卡片进行分组，区别是group时卡片间没有间隔，deck时卡片间存在间隔。
6. Carousel
用来将一些元素循环显示，类似于旋转木马。
循环显示的最基本结构,图片自动循环显示。- 在最基本的结构基础上，可以在每个图片的左右两边，添加向左、向右的控件来主动控制显示。 在原来的代码中，
.carouse-inner修饰的div下面添加以下代码即可
Previous Next
- 在上面的基础上，还可以在图片的底部添加切换图标， 在原来的代码中，
.carouse-inner修饰的div上面添加以下代码即可