Bootstrap 5 入门
Bootstrap 是什么?
- Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
- Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。
- Bootstrap 使您能够轻松创建响应式网页设计
什么是响应式网页设计
响应式网页设计是指创建网页可以自动调整，使其在所有设备上看起来都很好，从小型手机到大型台式机。
Bootstrap 5 实例
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>我的第一个 Bootstrap 页面</h1>
<p>调整此响应页面的大小以查看效果！</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
亲自试一试 »Bootstrap 版本
Bootstrap 5 (2021年发布) 是 Bootstrap (2013年发布)的最新版本；有了新的组件，更快的样式表和更高的响应能力。
Bootstrap 5 支持所有主要的最新稳定版本浏览器，但不支持 Internet Explorer 11 及以下版本。
Bootstrap 5 和 Bootstrap 3 & 4 之间的主要区别在于，Bootstrap5 不再依赖 jQuery，使用了原生的 JavaScript 。
注意: 目前官方团队仍然在维护 Bootstrap 3 和 Bootstrap 4 ，我们可以继续使用它们， 但是，不会向 Bootstrap 3 & 4 添加新功能。
为什么使用 Bootstrap?
Bootstrap 的优点:
容易上手：只要对 HTML 和 CSS 有基本了解的人都可以很快速的使用 Bootstrap。
响应式设计：Bootstrap 可以根据不同平台（手机、平板电脑和台式机）进行调整。
移动优先：在 Bootstrap 中，自适应移动端是框架的核心部分。
浏览器兼容性：Bootstrap 5 兼容所有主流浏览器（Chrome、Firefox、Edge、Safari 和 Opera）。 如果您需要支持 IE11 及以下版本，请使用 Bootstrap4 或 Bootstrap3。
创建第一个 Bootstrap 5 页面
1. 添加 HTML5 doctype
Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。
HTML5 doctype 在文档头部声明，并设置对应编码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 5 移动设备优先
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 <head> 之中添加 <viewport meta> 标签，如下所示:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
3. 容器类
Bootstrap 5 需要一个容器元素来包裹网站的内容。
我们可以使用以下两个容器类:
.container类用于固定宽度并支持响应式布局的容器。.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。
两个 Bootstrap 5 页面实例
.container 实例 (带有响应固定宽度容器)
<!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 href="https://www.w3ccoo.com/lib/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://www.w3ccoo.com/lib/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>
亲自试一试 »
.container-fluid 实例（带有全宽度容器）
<!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 href="https://www.w3ccoo.com/lib/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://www.w3ccoo.com/lib/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>
亲自试一试 »
