Bootstrap 入门
什么是 Bootstrap？
- Bootstrap 是一个免费的前端框架，用于更快、更轻松地进行网页开发。
- Bootstrap 包含用于排版、表单、按钮、表格、导航、模态框、图片轮播和许多其他功能的 HTML 和 CSS 设计模板，以及可选的 JavaScript 插件。
- Bootstrap 还让您能够轻松创建响应式设计。
什么是响应式网页设计？
响应式网页设计是指创建可以在所有设备上都能很好地显示的网站，从小型手机到大型台式机。
Bootstrap 示例
<div class="jumbotron text-center">
<h1>我的第一个 Bootstrap 页面</h1>
<p>调整这个响应式页面的大小以查看效果！</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>列 1</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>列 2</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>列 3</h3>
<p>Lorem ipsum dolor..</p>
</div>
</div>
</div>
自己试一试 »Bootstrap 历史
Bootstrap 由 Twitter 的 Mark Otto 和 Jacob Thornton 开发，并于 2011 年 8 月在 GitHub 上发布为开源产品。
2014 年 6 月，Bootstrap 成为 GitHub 上排名第一的项目！
为什么要使用 Bootstrap？
Bootstrap 的优势
- 易于使用： 任何具有基本 HTML 和 CSS 知识的人都可以开始使用 Bootstrap。
- 响应式功能： Bootstrap 的响应式 CSS 适应手机、平板电脑和台式机。
- 移动优先方法： 在 Bootstrap 3 中，移动优先样式是核心框架的一部分。
- 浏览器兼容性： Bootstrap 与所有现代浏览器（Chrome、Firefox、Internet Explorer、Edge、Safari 和 Opera）兼容。
Bootstrap 版本
本教程遵循 Bootstrap 3，该版本于 2013 年发布。但是，我们还涵盖了更新版本；Bootstrap 4（发布于 2018 年） 和 Bootstrap 5（发布于 2021 年）.
Bootstrap 5 是 Bootstrap 的最新版本；它包含新的组件、更快的样式表、更多响应式功能等。它支持所有主要浏览器和平台的最新稳定版本。但是，不支持 Internet Explorer 11 及更低版本。
Bootstrap 5 与 Bootstrap 3 和 4 之间的主要区别在于，Bootstrap 5 已切换到 JavaScript，而不是 jQuery.
注意： Bootstrap 3 和 Bootstrap 4 仍然受到团队支持，以进行关键错误修复和文档更改，因此继续使用它们是完全安全的。但是，它们将不会添加新功能。
从哪里获取 Bootstrap？
有两种方法可以在您自己的网站上开始使用 Bootstrap。
您可以
- 从 getbootstrap.com 下载 Bootstrap
- 从 CDN 包含 Bootstrap
下载 Bootstrap
如果您想自己下载和托管 Bootstrap，请访问 getbootstrap.com，并按照那里的说明操作。
Bootstrap CDN
如果您不想自己下载和托管 Bootstrap，您可以从 CDN（内容交付网络）包含它。
MaxCDN 为 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支持。您还必须包含 jQuery
MaxCDN
<!-- 最新编译和压缩的 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery 库 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 最新编译的 JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
使用 Bootstrap CDN 的一个优势
许多用户在访问另一个网站时已经从 MaxCDN 下载了 Bootstrap。因此，当他们访问您的网站时，它将从缓存中加载，从而缩短加载时间。此外，大多数 CDN 会确保一旦用户从其请求文件，它将从最靠近他们的服务器提供服务，这也会缩短加载时间。
jQuery
Bootstrap 使用 jQuery 用于 JavaScript 插件（如模态框、工具提示等）。但是，如果您只使用 Bootstrap 的 CSS 部分，则不需要 jQuery。
使用 Bootstrap 创建第一个网页
1. 添加 HTML5 文档类型
Bootstrap 使用需要 HTML5 文档类型的 HTML 元素和 CSS 属性。
始终在页面开头包含 HTML5 文档类型，以及 lang 属性和正确的字符集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 是移动优先的
Bootstrap 3 被设计为对移动设备做出响应。移动优先样式是核心框架的一部分。
为了确保正确渲染和触摸缩放，请在 <head> 元素内添加以下 <meta> 标签
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width 部分将页面的宽度设置为遵循设备的屏幕宽度（这将根据设备的不同而有所不同）。
initial-scale=1 部分在浏览器首次加载页面时设置初始缩放级别。
3. 容器
Bootstrap 还需要一个包含元素来包装网站内容。
您可以从两个容器类中选择
- .container 类提供一个响应式的 固定宽度容器
- .container-fluid 类提供一个 全宽度容器，跨越视窗的整个宽度
两个基本的 Bootstrap 页面
以下示例展示了一个基本的 Bootstrap 页面代码（带有响应式固定宽度容器）
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>我的第一个 Bootstrap 页面</h1>
<p>这是一些文字。</p>
</div>
</body>
</html>
自己试一试 »
以下示例展示了一个基本的 Bootstrap 页面代码（带有全宽度容器）
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>我的第一个 Bootstrap 页面</h1>
<p>这是一些文字。</p>
</div>
</body>
</html>
自己试一试 »
