在 Bootstrap 中使用 .border-success 类为元素显示绿色边框，表示操作成功。将边框设置为绿色 - 绿色边框 我还在 div 中添加了“mystyle”类，用于设置 div 的样式，在我的示例中是一个矩形 - .mystyle { width: 250px; height: 150px; margin: 10px; } 实现 .border-success 类如下所示 -示例在线演示 Bootstrap 示例 .mystyle { width: 250px; height: 150px; margin: 10px; } 形状 绿色边框

使用 Bootstrap 4 中的 .border-secondary 类为元素设置灰色边框。添加如下所示的示例 - 我还包含了“mystyle”类来设置 div 的样式 - .mystyle { width: 250px; height: 150px; margin: 10px; } 让我们看一个实现 .border-secondary 类的示例 -示例在线演示 Bootstrap 示例 .mystyle { width: 250px; height: 150px; margin: 10px; } 形状 带有灰色边框的矩形

使用 .flex-*-column-reverse 类以垂直方向并反转显示弹性项目，并在不同的屏幕尺寸上生效。以下是在中等设备上反转弹性项目的示例，使用“flex-md-column-reverse”类 - 一 二 三 同样，使用“flex-lg-column-reverse”类为大型设备设置 - 一 二 三 实现 .flex-*-column-reverse 类 -示例在线演示 Bootstrap 示例 示例 更改浏览器大小以查看效果： 默认 一 二 三 不同屏幕尺寸上的弹性布局（中等-反转） 一 二 三 不同屏幕尺寸上的弹性布局（大型-反转） 一 二 三

要对齐不同屏幕上从起始位置收集的项目，请使用 .align-content-*-start 类。在不同的屏幕尺寸上对齐项目，如下所示 -中等屏幕尺寸 工作 1 工作 2 工作 3 工作 4 工作 5 大型屏幕尺寸 工作 1 工作 2 工作 3 工作 4 工作 5 您可以尝试运行以下代码，以在 Bootstrap 4 中为不同的屏幕尺寸实现 align-content-*start 类 -示例在线演示 Bootstrap 示例 ... 阅读更多

flex-column-reverse 用于以垂直方向反转显示弹性项目。在以下代码片段中添加 flex-column-reverse 类 -然后，在其中添加弹性项目 - 演示 1 演示 2 演示 3 您可以尝试运行以下代码以垂直反转显示弹性项目 -示例在线演示 Bootstrap 示例 实现列反转 演示 1 演示 2 演示 3

要为 Bootstrap 卡片着色，我们使用上下文类。对于危险操作，请将 bg-danger 上下文类与 card 类一起使用 - 危险！高压！您可以尝试运行以下代码以实现 card-danger 类 -示例在线演示 Bootstrap 示例 消息 你好吗？ 危险！高压！

使用 align-text-top 类将元素与父元素字体的顶部对齐。设置 align-text-top 类如下 - 顶部文本 您可以尝试运行以下代码以在 Bootstrap 4 中实现 align-text 类 -示例在线演示 Bootstrap 示例 示例 这是演示文本 演示基线 顶部对齐 顶部文本 底部文本

使用 align-top 类将元素与一行中最高元素的顶部对齐。像这样对齐元素 - 顶部对齐 让我们看一个在 Bootstrap 4 中实现 align-top 类的示例 -示例在线演示 Bootstrap 示例 示例 这是演示文本 演示基线 顶部对齐 中间对齐 底部对齐

使用 Bootstrap 4 中的 card-columns 类创建卡片网格。在类内设置网格 - 在以下代码片段中，在卡片容器内包含卡片主体。我在 card-class 下添加了 card 主体。card-class 添加到 card-columns 类中 - 配件 让我们看一个在 Bootstrap 中创建卡片网格的示例 -示例在线演示 Bootstrap 示例 产品 配件 家具

Bootstrap 4 中的 btn-outline-primary 类用于设置蓝色边框按钮。使用 btn-outline-primary 类为按钮添加蓝色边框，如下面的代码片段所示 - 结果 您可以尝试运行以下代码以实现 btn-outline-primary 类 -示例在线演示 Bootstrap 示例 结果 点击下方获取结果： 结果