Bootstrap模态框和警告框-编程入门课：Bootstrap从入门到实战

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

Bootstrap 提供了许多常用的组件和样式，其中包括模态框和警告框。模态框和警告框是Web开发中经常使用的两个组件，它们可以帮助我们向用户显示重要的信息和提示。本章节将介绍Bootstrap模态框和警告框的基本用法。

1、Bootstrap模态框
模态框是一个覆盖在页面上的弹出窗口，通常用于显示对话框、表单或其他与当前页面相关的内容。Bootstrap提供了一种简单的方式来创建模态框，只需要使用以下代码：

<!-- 模态框触发按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>
<!-- 模态框本体 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">模态框标题</h4>
        <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-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

在上面的代码中，我们首先定义了一个按钮来触发模态框的显示，它具有 data-toggle 和 data-target 属性。 data-toggle=”modal” 表示单击按钮时将显示模态框， data-target=”#myModal” 表示要显示的模态框的 ID 是 myModal。接下来，我们定义了模态框本体，它具有 modal 类和 fade 类，前者用于指定该元素是一个模态框，后者用于指定在显示和隐藏模态框时使用动画效果。

模态框包含一个 modal-dialog 元素，它表示模态框的主要区域。在 modal-dialog 元素中，我们定义了一个 modal-content 元素，它包含了模态框的所有内容，包括标题、内容和底部按钮。

模态框的标题位于 modal-header 元素中，它包含了一个 modal-title 元素和一个关闭按钮。模态框的内容位于 modal-body 元素中，它可以包含任何HTML内容，例如表单、列表等。模态框的底部按钮位于 modal-footer 元素中，我们可以在这里定义一些操作按钮，例如“保存”、“取消”等，这些按钮通常用于执行一些特定的操作。

除了上述基本用法之外，Bootstrap还提供了许多其他选项和配置，例如更改模态框的大小、添加滚动条等。我们可以通过设置CSS类来实现这些自定义样式，例如 modal-lg 类用于设置大型模态框、 modal-sm 类用于设置小型模态框等。Bootstrap还提供了多种事件来处理模态框的各种操作，例如模态框打开、关闭、隐藏等。我们可以通过 JavaScript 来处理这些事件，例如：

$('#myModal').on('show.bs.modal', function () {
  // 模态框显示前的操作
})
$('#myModal').on('hidden.bs.modal', function () {
  // 模态框隐藏后的操作
})

2、Bootstrap警告框
警告框是一种常见的用户提示，用于向用户显示重要的信息或警告。Bootstrap提供了一种简单的方式来创建警告框，只需要使用以下代码：

<div class="alert alert-success" role="alert">
  操作成功！
</div>
<div class="alert alert-danger" role="alert">
  操作失败！
</div>

在上面的代码中，我们定义了两个警告框，一个是成功警告框，另一个是失败警告框。警告框具有 alert 类和相应的颜色类，例如 alert-success 类用于成功警告框、 alert-danger 类用于失败警告框等。警告框还具有 role=”alert” 属性，它用于指定警告框的角色是提示信息。

除了上述基本用法之外，Bootstrap还提供了许多其他选项和配置，例如可以添加关闭按钮、可以添加图标等。我们可以通过设置CSS类和HTML内容来实现这些自定义样式，例如 alert-dismissible 类用于添加关闭按钮、 元素用于添加图标等。

警告框也可以通过JavaScript来处理各种事件，例如单击关闭按钮时关闭警告框，我们可以使用以下代码：

$('.alert .close').on('click', function () {
$(this).parent().hide()
})
在上面的代码中，我们使用 jQuery 选择器来选择所有警告框的关闭按钮，然后绑定单击事件，当单击关闭按钮时，隐藏父元素即可关闭警告框。

小结
Bootstrap模态框和警告框是Web开发中常用的两个组件，它们可以帮助我们向用户显示重要的信息和提示。模态框是一个覆盖在页面上的弹出窗口，通常用于显示对话框、表单或其他与当前页面相关的内容。警告框是一种常见的用户提示，用于向用户显示重要的信息或警告。通过简单的HTML和CSS代码，我们可以轻松地创建模态框和警告框，并通过JavaScript来处理各种事件，实现更加丰富的功能和用户体验。

下面是一个完整的示例代码，包括模态框和警告框：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Modal and Alert Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Bootstrap Modal and Alert Example</h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open Modal
</button>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal Title</h4>
</div>
<div class="modal-body">
Modal Body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="alert alert-success" role="alert">
Operation succeeded!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-danger" role="alert">
Operation failed!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$('#myModal').on('show.bs.modal', function () {
console.log('Modal shown')
})
$('#myModal').on('hidden.bs.modal', function () {
console.log('Modal hidden')
})
$('.alert .close').on('click', function () {
$(this).parent().hide()
})
</script>
</body>
</html>
在上面的代码中，我们定义了一个按钮，用于打开模态框。模态框具有 id=”myModal” 属性，这个属性值需要与按钮的 data-target 属性值相同，用于绑定模态框和按钮。模态框具有标题、正文和底部按钮，分别对应 modal-header、 modal-body 和 modal-footer 部分。模态框还具有关闭按钮，它用于关闭模态框，对应 close 类和 data-dismiss=”modal” 属性。

在上面的代码中，我们还定义了两个警告框，分别表示操作成功和操作失败。警告框具有不同的颜色和关闭按钮，对应 alert-success 和 alert-danger 类和 close 类和 data-dismiss=”alert” 属性。

在JavaScript部分，我们通过 jQuery 选择器和事件监听器来处理各种事件。在模态框部分，我们使用 show.bs.modal 和 hidden.bs.modal 事件来监听模态框的打开和关闭。在警告框部分，我们使用 click 事件来监听关闭按钮的点击事件，以便在警告框关闭时隐藏它。

使用Bootstrap模态框和警告框可以为Web应用程序提供更加优雅和可交互的用户体验。通过结合jQuery等JavaScript框架，还可以实现更加丰富的功能和效果，比如使用AJAX异步加载内容，显示进度条等。在实际开发中，开发人员可以根据需求和具体场景来选择和定制Bootstrap模态框和警告框，以达到最佳的用户体验和效果。

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