Bootstrap 4 （四）

Bootstrap 4 模态框

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。

尺寸类放在 <div>元素的 .modal-dialog 类后

  <!-- 按钮：用于打开模态框 --> <button type="button" class="btn btn-primary" data-toggle="modal"
    data-target="#myModal">打开模态框</button>
  <!-- 模态框 -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">模态框头部</h4> 
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- 模态框主体 -->
        <div class="modal-body">
          模态框内容..
        </div>
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>

Bootstrap 4 提示框

提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。

通过向元素添加 data-toggle=“tooltip” 来来创建提示框。title 属性的内容为提示框显示的内容

注意: 提示框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法

  <a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>
  <script>
    // 初始化调用
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
  </script>

使用 data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right

  <a href="#" data-toggle="tooltip" data-placement="top" title="我是提示容!">鼠标移动到我这</a>
  <a href="#" data-toggle="tooltip" data-placement="bottom" title="我是提示内容!">鼠标移动到我这</a>
  <a href="#" data-toggle="tooltip" data-placement="left" title="我是提示内容!">鼠标移动到我这</a>
  <a href="#" data-toggle="tooltip" data-placement="right" title="我是提示内容!">鼠标移动到我这</a>

Bootstrap 4 弹出框

弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。

通过向元素添加 data-toggle=“popover” 来来创建弹出框。

title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容

注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法

  <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a>
  <script>
    // 初始化调用
    $(document).ready(function () {
      $('[data-toggle="popover"]').popover()
    })
  </script>

使用 data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right

  <a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">点我</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">点我</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">点我</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">点我</a>

使用 data-trigger=“focus” 属性来设置在鼠标点击元素外部区域来关闭弹出框

如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-trigger 属性，并设置值为 “hover”

Bootstrap