什么是响应式网页设计?
响应式网页设计是指创建能够自动调整自身以在从小型手机到大型台式机的所有设备上看起来良好的网站。
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</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 5(2021 年发布)是最新版本Bootstrap(2013 年发布);具有新的组件、更快的样式表和更高的响应能力。
Bootstrap 5 支持所有主要浏览器和平台的最新、稳定版本。但是,不支持 Internet Explorer 11 及更低版本。
Bootstrap 5 与 Bootstrap 3 和 4 之间的主要区别是 Bootstrap 5 已切换到普通 JavaScript 而不是 jQuery。
笔记:Bootstrap3和Bootstrap4团队仍然支持关键错误修复和文档更改,并且继续使用它们是完全安全的。但是,不会向其中添加新功能。
Bootstrap的优点:
有两种方法可以开始在您自己的网站上使用 Bootstrap 5。
你可以:
如果您不想自己下载和托管 Bootstrap 5,则可以从 CDN(内容交付网络)包含它。
jsDelivr 为 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支持:
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
使用 Bootstrap 5 CDN 的优势之一:
许多用户在访问其他站点时已经从 jsDelivr 下载了 Bootstrap 5。因此,当他们访问您的网站时,它将从缓存加载,从而加快加载时间。此外,大多数 CDN 将确保一旦用户向其请求文件,该文件将从距离他们最近的服务器提供服务,这也会导致更快的加载时间。
JavaScript?
Bootstrap 5 将 JavaScript 用于不同的组件(如模式、工具提示、弹出窗口等)。但是,如果您只使用 Bootstrap 的 CSS 部分,则不需要它们。
如果您想自己下载并托管 Bootstrap 5,请访问https://getbootstrap.com/,然后按照那里的说明进行操作。
1. 添加 HTML5 文档类型
Bootstrap 5 使用需要 HTML5 文档类型的 HTML 元素和 CSS 属性。
始终在页面开头包含 HTML5 文档类型,以及 lang 属性以及正确的标题和字符集:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 5 是移动优先
Bootstrap 5 旨在响应移动设备。移动优先样式是核心框架的一部分。
为了确保正确的渲染和触摸缩放,请添加以下内容<meta>
标签里面的<head>
元素:
<meta name="viewport" content="width=device-width, initial-scale=1">
这个width=device-width
部分设置页面的宽度以遵循设备的屏幕宽度(这将根据设备而变化)。
这个initial-scale=1
部分设置浏览器首次加载页面时的初始缩放级别。
3. 容器
Bootstrap 5 还需要一个包含元素来包装站点内容。
有两种容器类别可供选择:
.container
类提供了响应式固定宽度容器.container-fluid
类提供了一个全宽容器,跨越视口的整个宽度以下示例显示了基本 Bootstrap 5 页面的代码(具有响应式固定宽度容器):
<!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://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/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>
亲自试一试 »
以下示例显示了基本 Bootstrap 5 页面的代码(带有全宽容器):
<!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://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/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>
亲自试一试 »