要在按钮上设置表示警告的轮廓，您需要在 Bootstrap 中使用 btn-outline 类。在我的类中，我使用了以下按钮 -   警告（错误） 上面的按钮具有 btn-outline-warning 类，允许我们添加橙色轮廓以指示警告操作 - 您可以尝试运行以下代码来实现 btn-outline-warning 类 -示例实时演示       Bootstrap 示例                       警告   以下为警告消息：       缺少分号 (;)     无限循环     更多警告消息：   警告（错误）

要设置绿色边框，请在 Bootstrap 4 中使用 border-success 类。下面的元素将具有绿色边框，因为我们已将其类设置为 border-success 类 -   绿色边框 您可以尝试运行以下代码以将绿色边框设置为指示成功的元素 -示例实时演示       Bootstrap 示例                             .mystyle {        width: 150px;        height: 150px;        margin: 10px;      }       矩形   绿色边框

在 Bootstrap 中使用 d-flex 类创建 Flexbox 容器。这里，我设置了两个 Flex 项目 -     一   二 上面，我使用了 d-flex 类来设置容器。该容器使用 bg-primary 和 bg-warning 类分别设置了两个 Flex 项目的样式。让我们看看完整的示例 -示例实时演示       Bootstrap 示例                           理解 Flex           一       二      

要创建特定屏幕宽度的块，请使用 .d-*-block 类。特定屏幕宽度可以是小、中、大、特大。根据屏幕尺寸分别设置类，如下所示 - d-sm-block d-md-block d-lg-block< /span> d-xl-block 让我们看看完整的示例，学习如何在特定屏幕宽度上创建块元素 -示例实时演示       Bootstrap 示例                           块     调整浏览器大小以查看效果     d-block     d-sm-block     d-md-block     d-lg-block     d-xl-block  

shown.bs.popover 事件在弹出框完全可见时触发。首先，使用以下代码在按钮点击时显示弹出框 -$(".btn-default").click(function(){   $("[data-toggle='popover']").popover('show'); });之后，触发弹出框的 shown.bs.popover 事件并生成警报 -$("[data-toggle='popover']").on('shown.bs.popover', function(){   alert('弹出框完全可见！'); });您可以尝试运行以下代码来实现 show.bs.popover 事件 -示例实时演示       Bootstrap 示例                         奖项       以下是列表：     列表     ... 阅读更多

要将项目的单行对齐到末尾，请在 Bootstrap 4 中使用 .align-items-end 类。使用 align-items-end 类对齐 -现在添加要对齐的项目的 Flex 项目 -   产品 1   产品 2   产品 3 让我们看一个将项目的单行对齐到末尾的示例 -示例实时演示       Bootstrap 示例                         将 Flex 项目在单行上对齐到末尾       产品 1     产品 2     产品 3     产品 4  

在 Bootstrap 4 中使用 .align-items-*-start 类从不同屏幕的开头对齐项目的单行。对于不同的屏幕尺寸，使用以下类 -在小屏幕上对齐项目的单行   产品 1   产品 2   产品 3   产品 4 在中屏幕上对齐项目的单行   产品 1   产品 2   产品 3   产品 4 在大屏幕上对齐项目的单行   产品 1   产品 2   产品 3   产品 4 以下是对齐项目的单行从 ... 阅读更多

在 Bootstrap 4 中使用 .align-self-*-start 类在不同屏幕上将 Flex 项目对齐到基线。在不同的屏幕尺寸上，将基线设置为 -小屏幕   A-one   B-one   C-one   D-one 中屏幕   A-one   B-one   C-one   D-one 大屏幕   A-one   B-one   C-one   D-one 您可以尝试运行以下代码来实现 align-self-*-start 类 -示例实时演示       Bootstrap 示例                         将特定 Flex 项目对齐到基线       A-one     B-one     C-one     D-one     小屏幕尺寸       A-one     B-one     C-one     D-one     中屏幕尺寸       A-one     B-one     C-one     D-one     大屏幕尺寸         A-one     B-one     C-one     D-one  

要在按钮点击时切换弹出框，请使用 popver(“toggle”) 方法。设置弹出框切换为 -$(document).ready(function(){   $(".btn-default").click(function(){     $("[data-toggle='popover']").popover('toggle');   }); });在按钮点击时，弹出框生成 -   （课程）切换弹出框 弹出框在按钮点击时在链接上生成弹出框 -   学习 以下是一个说明 popver(“toggle”) 方法用法的示例 -示例实时演示       Bootstrap 示例                          学习          以下为按钮：      （课程）切换弹出框       $(document).ready(function(){   $(".btn-default").click(function(){     $("[data-toggle='popover']").popover('toggle');   }); });

要使用选项激活弹出框，您需要使用 .popver(options) 方法 -将按钮设置为弹出框为 -   时间 设置弹出框标题、标题等。所有这些都属于弹出框选项 -$(document).ready(function(){   $('.btn-default').popover({title: "活动时间", content: "下午 3 点 - 下午 6 点", placement: "right"}); });让我们看看 .popover(method) 的完整示例 -示例实时演示       Bootstrap 示例                             信息     活动详细信息：           时间         $(document).ready(function(){     $('.btn-default').popover({title: "活动时间", content: "下午 3 点 - 下午 6 点", placement: "right"});   });