BootStrap 弹出层代码

  

Bootstrap 弹出层组件是Web开发中常用的交互式组件，它可以用于在网站独立显示一些信息，例如登录窗口、菜单列表等。Bootstrap 提供了多种弹出层组件，其中包括 Modals、Tooltips 和 Popovers 等。

本文将详细讲解如何使用 Bootstrap 弹出层组件，让你能够灵活使用弹出层组件。

引入Bootstrap

在使用 Bootstrap 弹出层组件之前，需要在页面中引入 Bootstrap 库，可以通过以下方式引入：

<head>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>

Modals

Modals 是最常用的 Bootstrap 弹出层组件之一，它可以用于新增/修改/删除等操作的确认提示框。

通过以下代码可以创建一个 Modals：

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">确定</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

以上代码中，class 为 modal fade 是 Modals 的主体部分，id 属性用于标识 Modals，tabindex="-1" 的作用是添加键盘导航支持，role="dialog" 定义 Modals 的角色，aria-labelledby 和 aria-hidden 用于辅助技术，方便屏幕阅读器等技术进行处理。

在 Modals 中，可以包含多个 div，其中 modal-header、modal-body 和 modal-footer 用于定义 Modals 的头部、主体和底部部分。

Modal 的触发方式可以通过以下代码实现：

<a data-toggle="modal" href="#myModal">弹出 Modals 框</a>

Tooltips

Tooltip 是一个浮动提示框，它可以在鼠标悬停在元素上时显示详细信息，例如指向一个表单输入框时，Tooltip 可以显示输入框的填写说明。

通过以下代码可以创建一个 Tooltip：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

以上代码中，data-toggle="tooltip" 和 data-placement="top" 属性定义了该元素将触发 Tooltip，title 属性定义了 Tooltip 中显示的内容。

Popovers

Popover 是一个弹出层组件，它可以在鼠标点击元素时，显示更多的详细信息或操作界面。

通过以下代码可以创建一个 Popover：

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover title">
  Popover on top
</button>

以上代码中，data-toggle="popover" 和 data-placement="top" 属性定义了该元素将触发 Popover，data-content 属性定义了 Popover 中显示的内容，title 属性定义了 Popover 的标题。

总结

本文简要介绍了 Bootstrap 弹出层组件的使用方法，包括 Modals、Tooltips 和 Popovers 等。通过学习本文，你可以更加灵活地使用 Bootstrap 弹出层组件来实现更好的用户界面交互效果。

相关文章
前端开发最新文章
热门教程