Bootstrap弹出框和工具提示-编程入门课：Bootstrap从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：Bootstrap从入门到实战

Bootstrap 提供了很多组件和工具来帮助开发者快速构建漂亮的响应式网站。其中包括弹出框和工具提示组件，这两个组件都是非常有用的，能够帮助网站提供更好的用户体验。本章节将会介绍Bootstrap弹出框和工具提示的基本用法和代码示例。

1、弹出框
Bootstrap弹出框是一个灵活的组件，可以用于显示不同类型的内容，比如警告、错误、确认和信息。弹出框还可以包含表单、图像、视频、音频等内容。以下是Bootstrap弹出框的基本用法和代码示例：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

在这个例子中，我们创建了一个按钮来触发弹出框。按钮包含了data-toggle=”modal”和data-target=”#exampleModal”属性，这两个属性告诉Bootstrap这个按钮将会触发一个弹出框，这个弹出框的ID是exampleModal。

弹出框的HTML代码是一个

元素，包含了class=”modal”和id=”exampleModal”属性。这个元素的内容分为三部分：头部、身体和尾部。头部包含了一个标题和一个关闭按钮，身体包含了弹出框的内容，尾部包含了一个或多个按钮。

当用户点击按钮时，弹出框会在页面中心出现，并显示内容。用户可以与弹出框进行交互，选择关闭或执行其他操作。当弹出框关闭时，它会消失并释放页面空间。

2、工具提示
Bootstrap工具提示是一个轻量级组件，可以用于提供额外的信息或说明。工具提示可以用于任何元素，包括文本、图像、按钮、链接等。以下是Bootstrap工具提示的基本用法和代码示例：

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

在这个例子中，我们创建了一个按钮，并添加了data-toggle="tooltip"属性和title="Tooltip on top"属性。这两个属性告诉Bootstrap这个按钮将会显示一个工具提示，提示的内容是”Tooltip on top”。

工具提示的位置可以通过添加data-placement属性来指定。在这个例子中，我们将data-placement设置为”top”，因此工具提示会显示在按钮的上方。如果将data-placement设置为”bottom”、”left”或”right”，则工具提示会分别显示在按钮的下方、左侧或右侧。

要使工具提示正常工作，您需要在JavaScript中初始化它。以下是JavaScript初始化代码示例：

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

这段代码将会初始化所有带有data-toggle=”tooltip”属性的元素，并将它们转换成工具提示。初始化代码必须在jQuery和Bootstrap JavaScript文件之后加载。

小结
Bootstrap弹出框和工具提示是非常有用的组件，可以帮助开发者构建更好的用户界面和交互体验。弹出框可以用于显示各种内容和交互，包括警告、确认、表单、图像、视频等，工具提示可以用于提供额外的信息或说明。使用Bootstrap弹出框和工具提示非常简单，只需添加一些HTML属性和JavaScript初始化代码即可。

该分类下的相关小册推荐：