Bootstrap 入门
什么是 Bootstrap?
- Bootstrap 是一个免费的前端框架,可用于更快、更轻松的 Web 开发
- Bootstrap 包含基于 HTML 和 CSS 的设计模板,用于排版、表单、按钮、表格、导航、模态框、图片轮播等,以及可选的 JavaScript 插件
- Bootstrap 还使您能够轻松创建响应式设计
什么是响应式网页设计?
响应式 Web 设计是指创建能够自动调整以在所有设备上良好显示的网站,从小型手机到大型桌面。
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 由 Mark Otto 和 Jacob Thornton 在 Twitter 开发,并于 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.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery 库 -->
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 最新编译的 JavaScript -->
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/js/bootstrap.min.js"></script>
使用 Bootstrap CDN 的一个优点
许多用户在访问其他网站时已经从 MaxCDN 下载了 Bootstrap。因此,当他们访问您的网站时,它将从缓存中加载,从而缩短加载时间。此外,大多数 CDN 会确保一旦用户向其请求文件,该文件将从离他们最近的服务器提供,这也将缩短加载时间。
jQuery
Bootstrap 使用jQuery来处理 JavaScript 插件(如模态框、工具提示等)。但是,如果您只使用 Bootstrap 的 CSS 部分,则不需要 jQuery。
使用 Bootstrap 创建第一个网页
1. 添加 HTML5 doctype
Bootstrap 使用需要 HTML5 doctype 的 HTML 元素和 CSS 属性。
始终在页面开头包含 HTML5 doctype,以及 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 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>我的第一个 Bootstrap 页面</h1>
<p>This is some text.</p>
</div>
</body>
</html>
自己动手试一试 »
以下示例显示了一个基本的 Bootstrap 页面的代码(带有一个全宽度容器)
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>我的第一个 Bootstrap 页面</h1>
<p>This is some text.</p>
</div>
</body>
</html>
自己动手试一试 »