摘选自runnoob.com，bootstrap4所有api概览:

一、安装:

弹性盒子(flexbox)

Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。

.container:

width会根据屏幕尺寸变化

.container-fluid

width:100%

padding-left:15px;

padding-right:15px;

margin-left:auto;

margin-right:auto;

二、网格系统:

.col- 针对所有设备

.col-sm- 平板 - 屏幕宽度等于或大于 576px

.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)

.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)

.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>

</div>

*：

row: margin-left:-15px;margin-right:-15px;

flex布局

col: padding-right;15px;padding-right:15px;

flex-basis:33.3%...这钟来控制宽度

三、文字排版

<h1> - <h6> *: margin-bottom:0.5rem

<Display> 标题类: 标题可以输出更大更粗的字体样式。

<small> 元素用于创建字号更小的颜色更浅的文本:

<mark> 元素为黄色背景及有一定的内边距:

<abbr> 元素的样式为显示在文本底部的一条虚线边框:

<blockquote> 对于引用的内容可以在 <blockquote> 上添加 .blockquote 类 :

<dl><dt><dd> The dl element indicates a description list:

<code>

<kbd>Keyboard Inputs

<pre>

四、颜色

背景颜色: .bg-primary, .bg-success

五、表格

条纹表格

通过添加 .table-striped 类，您将在 <tbody> 内的行上看到条纹

带边框表格

.table-bordered 类可以为表格添加边框

鼠标悬停状态表格

.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）：

黑色背景表格

.table-dark 类可以为表格添加黑色背景：

指定意义的颜色类

通过指定意义的颜色类可以为表格的行或者单元格设置颜色：

表头颜色

在 Bootstrap v4.0.0-beta.2 中.thead-dark 类用于给表头添加黑色背景， .thead-light 类用于给表头添加灰色背景:

较小的表格

.table-sm 类用于通过减少内边距来设置较小的表格:

响应式表格

.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）:

你可以通过以下类设定在指定屏幕宽度下显示滚动条：

类名	屏幕宽度
.table-responsive-sm	< 576px
.table-responsive-md	< 768px
.table-responsive-lg	< 992px
.table-responsive-xl	< 1200px

五、图像形状

圆角图片

.rounded 类可以让图片显示圆角效果：

椭圆图片

.rounded-circle 类可以设置椭圆形图片:

缩略图

.img-thumbnail 类用于设置图片缩略图(图片有边框):

图片对齐方式

使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:

响应式图片

图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。

我们可以通过在 <img> 标签中添加 .img-fluid 类来设置响应式图片。

.img-fluid 类设置了 max-width: 100%; 、 height: auto; :

五、Jumbotron（超大屏幕）

六、信息提示框

提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现:

提示框添加链接

提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接：

实例

<div class="alert alert-success"> <strong>成功!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。 </div>

关闭提示框

我们可以在提示框中的 div 中添加 .alert-dismissable 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。

实例

<div class="alert alert-success alert-dismissable"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>成功!</strong> 指定操作成功提示信息。 </div>

提示框动画

.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果：

实例

七、按钮

八、按钮组

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

</div>

提示: 我们可以使用 .btn-group-lg|sm|xs 类来设置按钮组的大小。

九、徽章(badges)

十、进度条

Bootstrap4 分页

网页开发过程，如果碰到内容过多，一般都会做分页处理。

Bootstrap 4 可以很简单的实现分页效果。

要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类：:

不可点击的分页链接

.disabled 类可以设置分页链接不可点击:

分页显示大小

可以将分页条目设置为不同的大小。

.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目:

面包屑导航

.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航：

实例

<li class="breadcrumb-item"><a href="#">Photos</a></li>

<li class="breadcrumb-item"><a href="#">Summer 2017</a></li>

<li class="breadcrumb-item"><a href="#">Italy</a></li>

</ul>

十一、列表组

激活状态的列表项

通过添加 .active 类来设置激活状态的列表项：

禁用的列表项

.disabled 类用于设置禁用的列表项:

多种颜色列表项

链接的多种颜色列表项

十二、卡片

Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。

简单的卡片

我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片，实例如下:

实例

<div class="card"> <div class="card-body">简单的卡片</div> </div>

头部和底部

.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式：

实例

</div>

标题、文本和链接

我们可以在头部元素上使用 .card-title 类来设置卡片的标题。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。

实例

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

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

<a href="#" class="card-link">Another link</a>

</div>

Bootstrap4 卡片

简单的卡片

我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片，实例如下:

实例

<div class="card"> <div class="card-body">简单的卡片</div> </div>

尝试一下 »

Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。

头部和底部

.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式：

实例

尝试一下 »

多种颜色卡片

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>

尝试一下 »