Bootstrap 4 - 快速指南
Bootstrap 4 - 概述
什么是 Bootstrap 4？
Bootstrap 4 是一个强大且流行的移动优先前端框架，用于在网络上构建响应式移动优先网站。它是Bootstrap的最新版本，它使用 HTML、CSS 和 JavaScript。
历史
Bootstrap v3.3.7 的最后一个稳定版本是在 2016 年 7 月，2017 年 8 月发布了 Bootstrap 4.0.0 beta 版本。
为什么要使用Bootstrap？
它在整个库中包含移动优先样式，而不是在单独的文件中使用它们。
只需具备 HTML 和 CSS 知识，任何人都可以开始使用 Bootstrap。Bootstrap 官方网站也有很好的文档。
所有流行的浏览器都支持它，其响应式 CSS 可适应台式机、平板电脑和手机。
为开发人员构建界面提供干净、统一的解决方案。
它包含美观且实用的内置组件，易于定制。
它是开源的并提供基于网络的定制。
Bootstrap 3 与 Bootstrap 4
Bootstrap 4是Bootstrap 3的最新版本，它的源CSS文件被转换为SCSS。它使用网格系统的flex模式并支持所有最新的浏览器。不过，它支持 Internet Explorer 9+ 和 iOS 7+，并放弃了对 IE 8 及更低版本、iOS 6 及更低版本的支持。有关 Bootstrap 3 和 Bootstrap 4 之间差异的更多信息，请查看本章。
Bootstrap 4 - 环境设置
您可以通过从CDN（内容交付网络）包含 Bootstrap 4 或从getbootstrap.com下载来开始在您的网站中使用 Bootstrap 4 。
使用CDN
Bootstrap 4 可以通过包含来自Content Delivery Network 的内容在网站中使用。
在您的项目中使用下面编译的 Bootstrap 的 CSS 和 JS CDN。
<!-- Compiled and Minified Bootstrap CSS --> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous"> <!-- jQuery Library --> <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"> </script> <!-- Popper --> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"> </script> <!-- Compiled and Minified Bootstrap JavaScript --> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"> </script>
如果您使用的是 JavaScript 的编译版本，请在缩小的 Bootstrap JavaScript之前包含jQuery和Popper.js的 CDN 版本（Bootstrap 4 使用 jQuery 和 Popper.js 来利用 JavaScript 组件，例如模态、工具提示、弹出窗口等）。
以下是一些需要 jQuery 的组件 -
用于可关闭警报
使用按钮和复选框/单选按钮切换状态，并折叠以切换内容
用于幻灯片、控件和指示器的轮播
下拉菜单（使用Popper.js实现完美定位）
打开和关闭模态框
用于折叠导航栏
工具提示和弹出窗口（使用Popper.js实现完美定位）
下载 Bootstrap 4
您可以从https://getbootstrap.com/docs/4.1/getting-started/download/下载 Bootstrap 4 。当您单击此链接时，您将看到如下所示的屏幕 -
在这里你可以看到两个按钮 -
下载- 单击此按钮，您可以下载 Bootstrap CSS 和 JavaScript 的预编译和缩小版本。不包含任何文档或原始源代码文件。
下载源代码- 单击此按钮，您可以获得最新的 Bootstrap SCSS、JavaScript 源代码和文档文件。
为了更好地理解和易用性，我们将在整个教程中使用 Bootstrap 的预编译版本。随着文件被编译和缩小，您不必每次都为单独的功能添加单独的文件。
文件结构
预编译 Bootstrap 4
下载编译版本的 Bootstrap 4 后，解压 ZIP 文件，您将看到以下文件/目录结构 -
正如你所看到的，有编译后的 CSS 和 JS (bootstrap.*)，以及编译和缩小后的 CSS 和 JS (bootstrap.min.*)。
Bootstrap 4 源代码
如果您已下载 Bootstrap 4 源代码，则文件结构如下 -
js/和scss/下的文件是Bootstrap CSS和JavaScript的源代码。
dist /文件夹包含上面预编译下载部分中列出的所有内容。
docs /examples/包含 Bootstrap 文档的源代码和 Bootstrap 使用示例。
使用 Bootstrap 4 创建第一个网页
下面的例子指定了 Bootstrap 4 的简单网页 -
例子
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<h2>Hello, world!!! Welcome to Tutorialspoint...</h2>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
它将产生以下结果 -
输出
Bootstrap 4 - 布局
Bootstrap 4 使用容器类来包装页面的内容。它包含两个容器类 -
.container - 它代表一个固定宽度的容器。
.container-fluid - 它代表全宽容器。
容器
.container类用于以固定宽度包裹页面内容，通过使用 .container 类可以轻松地将内容放置在中心，如下所示。
<div class = "container"> ... </div>
例子
下面的示例指定了一个具有固定宽度容器的简单网页 -
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
<style>
.container {
background: #a52c644a;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
}
</style>
</head>
<body>
<div class = "container">
<h2>Fixed Width Container</h2>
This is a simple web page with fixed width container by using
<code>.container</code> class.
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
它将产生以下结果 -
输出
流体容器
您可以使用.container-fluid类创建全宽容器，如下所示。
<div class = "container-fluid"> ... </div>
下面的示例指定了一个带有全宽容器的简单网页 -
例子
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
<style>
.container-fluid {
background: #a52c644a;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
}
</style>
</head>
<body>
<div class = "container-fluid">
<h2>Full Width Container</h2>
This is a simple web page with full width container by using
<code>.container-fluid</code> class.
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity =" sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
它将产生以下结果 -
输出
Bootstrap 4 - 网格系统
描述
Bootstrap 4 网格系统使用Flexbox构建，完全响应式，通过在页面上创建行和列的布局，可扩展到 12 列（根据设备的大小）。它提供响应式、移动优先的流体网格系统，可随着设备或视口尺寸的增加而缩放列。
网格系统的工作
行必须放置在.container类中，以便正确对齐和填充。
对于响应式宽度，请使用.container类；对于所有视口的固定宽度，请使用.container-fluid类。
使用行创建水平列组。
内容应放置在列内，并且只有列可以是行的直接子级。
列包含用于控制列之间空间的填充。
如果一行中放置的列超过 12 列，则这些列将放置在新行中。
列通过填充在列内容之间创建间隙。因此，您可以使用行上的.no-gutters类删除行中的边距和列中的填充。
您可以通过使用五个网格断点（例如超小、小、中、大和特大）使网格系统具有响应能力。
预定义的网格类（如 .col-4）可用于快速制作网格布局。LESS mixin 也可用于更多语义布局。
网格选项
下表总结了 Bootstrap 4 网格系统如何跨多个设备工作的各个方面 -
| 超小型设备 (<576px) | 小型设备（≥576px） | 中型设备（≥768px） | 大型设备（≥992px） | 超大设备（≥1200px） | |
|---|---|---|---|---|---|
| 网格Behave | 始终水平 | 折叠开始，水平位于断点上方 | 折叠开始，水平位于断点上方 | 折叠开始，水平位于断点上方 | 折叠开始，水平位于断点上方 |
| 最大集装箱宽度 | 无（自动） | 540像素 | 720像素 | 960像素 | 1140像素 |
| 班级班级 | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| 列数 | 12 | 12 | 12 | 12 | 12 |
| 天沟宽度 |
30像素 （列每边 15 像素） |
30像素 （列每边 15 像素） |
30像素 （列每边 15 像素） |
30像素 （列每边 15 像素） |
30像素 （列每边 15 像素） |
| 可嵌套 | 是的 | 是的 | 是的 | 是的 | 是的 |
| 列排序 | 是的 | 是的 | 是的 | 是的 | 是的 |
基本网格结构
以下是 Bootstrap 4 网格的基本结构 -
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>
网格系统示例
以下是 Bootstrap 4 网格系统的示例 -
例子
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</style>
.grid_system div[class^="col"] {
border: 1px solid white;
background: #e4dcdc;
text-align: center;
padding-top: 5px;
padding-bottom: 5px
}
</style>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
</div>
<div class = "row">
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
</div>
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
</div>
<div class = "row">
<div class =" col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-5">.col-sm-5</div>
<div class = "col-sm-7">.col-sm-7</div>
</div>
<div class = "row">
<div class = "col-sm-6">.col-sm-6</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-12">.col-sm-12</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
它将产生以下结果 -
输出
创建两列布局
以下示例描述了为小型、中型和大型设备创建两个列布局。在手机等小型设备上，默认情况下，列将自动变为水平。
例子
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-6">.col-sm-6</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-7">.col-sm-7</div>
<div class = "col-sm-5">.col-sm-5</div>
</div>
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-8">.col-sm-8</div>
</div>
<div class = "row">
<div class = "col-sm-9">.col-sm-9</div>
<div class = "col-sm-3">.col-sm-3</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
它将产生以下结果 -
输出
创建三列布局
以下示例描述了为中型和大型设备创建三列布局。如果屏幕分辨率大于或等于 992 像素，那么它将在平板电脑中以横向模式显示，并且像往常一样，它将以纵向模式显示。
例子
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = " stylesheet" href = " https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
</div>
<div class = "row">
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-5">.col-sm-5</div>
</div>
<div class = "row">
<div class = "col-sm-2">.col-sm-2</div>
<div class = "col-sm-8">.col-sm-8</div>
<div class = "col-sm-2">.col-sm-2</div>
</div>
<div class = "row">
<div class = "col-sm-2">.col-sm-2</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-7">.col-sm-7</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
它将产生以下结果 -
输出
Bootstrap 4 - 内容
描述
Bootstrap 4 使用内容集合方法在网页上显示文本、代码块、响应式图像、表格格式的数据等。
下表列出了可用于操作 Bootstrap 4 的内容方法 -
| 编号 | 方法与说明 |
|---|---|
| 1 |
排版功能可创建标题、段落、列表和其他内联元素。 |
| 2 |
它用于显示文档中的内联和多行代码块。 |
| 3 |
Bootstrap 4 通过使用 <img> 标签提供对图像的支持。 |
| 4 |
表格用于以表格格式显示数据。 |
| 5 |
图元素指定内容以及带有可选标题的相关图像。 |
Bootstrap 4 - 组件
描述
Bootstrap 4 使用内容集合方法在网页上显示文本、代码块、响应式图像、表格格式的数据等。
下表列出了可用于操作 Bootstrap 4 的内容方法 -
| 编号 | 方法与说明 |
|---|---|
| 1 |
警报组件指定用户操作的预定义消息。 |
| 2 |
徽章用于突出显示内容的附加信息。 |
| 3 |
它用于显示站点的基于层次结构的信息。 |
| 4 |
Bootstrap 提供可点击的按钮来放置文本和图像等内容。 |
| 5 |
按钮组允许将多个按钮堆叠在一起在一行上。 |
| 6 |
卡片是一个内容容器，它显示一个带边框的框，周围有一些填充。 |
| 7 |
轮播是一种向网站添加滑块的灵活、响应迅速的方式。 |
| 8 |
它用于显示或隐藏内容。 |
| 9 |
下拉菜单可用于以列表格式显示链接。 |
| 10 |
表单元素用于收集用户的输入。 |
| 11 |
使用输入组，您可以轻松地将文本或按钮添加到基于文本的输入中。 |
| 12 |
它增加了标题的大小，并为着陆页内容增加了很多边距。 |
| 13 |
模态窗口是一个位于其父窗口之上的子窗口。 |
| 14 |
Bootstrap 在水平菜单中为您的网站提供导航项。 |
| 15 |
导航栏为您的应用程序或网站提供导航标题。 |
| 16 |
分页用于将相关内容划分到多个页面。 |
| 17 号 |
弹出窗口类似于工具提示，提供带有标题的扩展视图。 |
| 18 |
进度条通过堆叠条、动画背景和文本标签显示进程的进度。 |
| 19 |
Scrollspy 用于根据滚动位置指示菜单中当前活动的链接。 |
| 20 |
当您需要描述链接时，工具提示非常有用。 |
Bootstrap 4 - 实用程序
描述
Bootstrap 4 使用实用程序集合来在网页上显示边框、文本颜色、嵌入视频等。
下表列出了可用于操作 Bootstrap 4 的实用程序类型 -
| 编号 | 方法与说明 |
|---|---|
| 1 |
边框实用程序提供元素边框的样式、颜色和半径。 |
| 2 |
Clearfix 用于清除浮动内容和关闭图标以消除内容。 |
| 3 |
使用上下文类来更改元素的文本颜色、链接颜色和背景颜色。 |
| 4 |
它用于通过使用 <iframe> 元素将视频嵌入到页面中。 |
| 5 |
它用于将元素浮动到左侧或右侧。 |
| 6 |
阴影实用程序向元素添加阴影，而间距实用程序为元素提供边距或填充值。 |
| 7 |
您可以使用宽度和高度实用程序来设置元素的宽度或高度。 |
| 8 |
Bootstrap 提供文本实用程序来控制文本对齐、转换、粗细等。 |
| 9 |
Flex 实用程序可用于管理页面的布局、对齐方式、网格列、导航和其他组件。 |
Bootstrap 3 和 4 之间的区别
描述
Bootstrap 是一个强大且流行的移动优先前端框架，用于使用 HTML、CSS 和 JS 框架在 Web 上构建响应式移动优先网站。
下表显示了 Bootstrap 3 和 Bootstrap 4 的差异 -
| 编号 | 成分 | 引导程序3 | 引导程序4 |
|---|---|---|---|
| 1 | CSS 源文件 | 较少的 | 社会保障体系 |
| 2 | 网格系统 | 4 层网格系统（xs、sm、md、lg） | 5 层网格系统（xs、sm、md、lg、xl） |
| 3 | CSS单元 | 像素 | 雷姆 |
| 4 | 字体大小 | 14像素 | 16像素 |
| 5 | 下拉结构 | 使用 <ul> 和 <li> 创建 | 使用 <ul> 或 <div> 创建 |
| 6 | 偏移列 | col-md-偏移-4 | 偏移-md-4 |
| 7 | 图片 | .img 响应类 | .img-流体类 |
| 8 | 表格 | 将.table-responsive类添加到父 <div> 元素 | 将.table-responsive类添加到 <table> 元素 |
| 9 | 字形 | 支持的 | 不支持 |
| 10 | 媒体对象 | 使用媒体对象的类，例如.media、.media-body、.media-object、.media-heading、.media-right、.media-left、.media-list和.media-body | 仅使用.media类作为媒体对象。 |
| 11 | 暗/逆表 | 不支持 | 使用.table-dark类来制作暗表/逆表 |
| 12 | 复选框和单选按钮 | 使用.radio、.radio-inline、.checkbox或.checkbox-inline类显示复选框和单选按钮 | 使用.form-check、.form-check-label、.form-check-input或.form-check-inline类显示复选框和单选按钮 |
| 13 | 表单控件大小 | 使用.input-lg和.input-sm类增加或减少输入控件的大小 | 使用.form-control-lg和.form-control-sm类增加或减少输入控件的大小 |
| 14 | 帮助文本 | 使用.help-block类显示帮助文本 | 使用.form-text类显示帮助文本 |
| 15 | 风格 | 在按钮上使用.btn-default和.btn-info类 | 在按钮上使用.btn-secondary、.btn-light和.btn-dark类，并删除.btn-default类。 |
| 16 | 轮廓按钮 | 不支持 | 使用.btn-outline-*类为按钮设置轮廓颜色样式 |
| 17 号 | 按钮尺寸 | .btn -xs类可用 | 仅可用.btn-sm和.btn-lg类并删除.btn-xs类 |
| 18 | 菜单标题 | 使用.dropdown-header类到li标签 | 使用.dropdown-header类到h1 - h2标签 |
| 19 | 分隔线 | 在 li 元素中使用.divider类 | 在 div 元素中使用.dropdown-divider类 |
| 20 | 固定导航栏 | 使用.navbar-fixed-top和.navbar-fixed-bottom类将导航栏固定到顶部或底部 | 使用.fixed-top和.fixed-bottom类将导航栏固定到顶部或底部 |
| 21 | 寻呼机 | 使用.previous和.next类对齐页面 | 不支持 |
| 22 | 大屏幕全宽 | 它不在全角巨型屏幕上使用.jumbotron-fluid类 | 它使用.jumbotron-fluid类来实现全宽 Jumbotron |
| 23 | 轮播项目 | 对轮播项目使用.item类。 | 使用.carousel-item类来表示轮播项目。 |
| 24 | 孔、面板和缩略图 | 支持的 | 不支持。使用卡片代替 |
| 25 | 内联导航 | 它不包括.nav-inline类 | 使用.nav-inline类将导航显示为内联 |