什么是 Bootstrap?
Bootstrap 是一个免费的前端框架,用于更快、更轻松地进行 Web 开发
Bootstrap 包括基于 HTML 和 CSS 的设计模板,用于排版、表单、按钮、表格、导航、模态、图像轮播等
Bootstrap 提供了丰富的 JavaScript 插件
Bootstrap 可使您能够轻松地创建响应式设计
什么是响应式网页设计?
响应式网页设计旨在创建能够自动调整的网站,以便增强所有设备上的使用体验,不论是手机还是大型台式机。
Bootstrap 5 实例
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>我的第一张 Bootstrap 页面</h1>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>列 1:春日</h3>
<p>胜日寻芳泗水滨,无边光景一时新。</p>
<p>等闲识得东风面,万紫千红总是春。</p>
</div>
<div class="col-sm-4">
<h3>列 2:初夏绝句</h3>
<p>纷纷红紫已成尘,布谷声中夏令新。</p>
<p>夹路桑麻行不尽,始知身是太平人。</p>
</div>
<div class="col-sm-4">
<h3>列 3:山行</h3>
<p>远上寒山石径斜,白云生处有人家。</p>
<p>停车坐爱枫林晚,霜叶红于二月花。</p>
</div>
</div>
</div>
亲自试一试
Bootstrap 版本
Bootstrap 5(2021 年发布)是 Bootstrap 的最新版本(2013 年发布);使用新组件、更快的样式表,提供更快的响应能力。
Bootstrap 5 支持所有主要浏览器和平台的最新的稳定版本。但是,不支持 Internet Explorer 11 及更早的版本。
Bootstrap 5 和 Bootstrap 3 & 4 的主要区别在于 Bootstrap 5 已经切换到 Vanilla JavaScript 而不是 jQuery。
注释:其团队仍然支持 Bootstrap 3 和 Bootstrap 4 的关键错误修复和文档更改,继续使用它们是完全安全的。但是不会向其中添加任何新特性。
为什么要使用 Bootstrap?
Bootstrap 的优点:
易于使用:任何对 HTML 和 CSS 有基本了解的人都可以马上开始使用 Bootstrap
响应式特性:Bootstrap 的响应式 CSS 可针对手机、平板电脑和台式机进行调整
移动优先的方法:在 Bootstrap 中,移动优先样式是其核心框架的一部分
浏览器兼容性:Bootstrap 5 与所有现代浏览器兼容(Chrome、Firefox、Edge、Safari 和 Opera)。
注意:如果您需要支持 IE11 及以下版本,则必须使用 BS4 或 BS3。
从哪里获得 Bootstrap 5?
有两种方法可以在您自己的网站上使用 Bootstrap 5。
您可以:
包含来自 CDN 的 Bootstrap 5
从 getbootstrap.com 下载 Bootstrap 5
Bootstrap 5 CDN
如果不想自己下载并托管 Bootstrap 5,则可以从 CDN(内容交付网络)中引用它。
W3School 为 Bootstrap 的 CSS 和 JavaScript 提供了 CDN 支持:
MaxCDN:
<!-- 最新编译并压缩的 CSS -->
<link href="https://www.w3school.com.cn/lib/bs/bootstrap.css" rel="stylesheet">
<!-- 最新编译的 JavaScript -->
<script src="https://www.w3school.com.cn/lib/bs/bootstrap.js"></script>
使用 Bootstrap 5 CDN 的优势之一:
许多用户在访问另一个站点时已经从 jsDelivr 下载了 Bootstrap 5。因此,当他们访问您的网站时,它将从缓存中加载,从而缩短加载时间。此外,大多数 CDN 将确保一旦用户从中请求文件,它将从最接近他们的服务器提供服务,这也导致更快的加载时间。
JavaScript?
Bootstrap 5 将 JavaScript 用于不同的组件(如模态、工具提示、弹出框等)。但是,如果您只使用 Bootstrap 的 CSS 部分,那就不需要它们。
下载 Bootstrap 5
如果您想自己下载并托管 Bootstrap 5,请访问 https://getbootstrap.com/,然后按照那里的说明进行操作。
使用 Bootstrap 5 创建您的第一张网页
1. 添加 HTML5 文档类型
Bootstrap 5 使用的是需要 HTML5 doctype 的 HTML 元素和 CSS 属性。
请始终在页面开头包含 HTML5 doctype,以及 lang 属性和正确的标题、字符集:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 实例</title>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 5 移动优先
Bootstrap 5 的设计目标是响应移动设备。移动优先的样式是核心框架的一部分。
为确保正确的渲染和触摸缩放,请在 <head> 元素内添加以下 <meta> 标记:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width 设置了页面的宽度以跟随设备的 screen-width(将因设备而异)。
initial-scale=1 设置了浏览器首次加载页面时的初始缩放级别。
3. 容器
Bootstrap 5 还需要一个包含元素来包装站点内容。
有两种容器类可供选择:
.container 类提供了一个响应式的固定宽度容器
.container-fluid 类提供了一个全宽容器,跨越视口的整个宽度
两张基本的 Bootstrap 5 页面
container 实例
下例展示了基本 Bootstrap 5 页面(带有响应式固定宽度容器)的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://www.w3school.com.cn/lib/bs/bootstrap.css" rel="stylesheet">
<script src="https://www.w3school.com.cn/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h1>我的第一张 Bootstrap 页面</h1>
<p>这部分在 .container 类中。</p>
<p>.container 类提供了响应式固定宽度的容器。</p>
</div>
</body>
</html>
亲自试一试
Container Fluid 实例
下例展示了基本 Bootstrap 5 页面(带有全宽容器)的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://www.w3school.com.cn/lib/bs/bootstrap.css" rel="stylesheet">
<script src="https://www.w3school.com.cn/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>我的第一张 Bootstrap 页面</h1>
<p>这部分在 .container-fluid 类中。</p>
<p>.container-fluid 类提供全宽容器,跨越视口的整个宽度。</p>
</div>
</body>
</html>
亲自试一试
BS5 教程
BS5 容器
JavaScript 测验
W3School 简体中文版提供的内容仅用于培训和测试,不保证内 |