Bootstrap5 简介

2023-06-19 14:34 更新

Bootstrap 是全球最受欢迎的前端框架,用于构建响应式、移动设备优先的网站。利用 jsDelivr 和我们提供的入门模板帮助你快速掌握 Bootstrap。

快速开始

如何让项目快速用上 Bootstrap? 使用 jsDelivr,这是一个免费且开源的 CDN,在你的页面上添加几个文件链接就能开始你的 Bootstrap 之旅啦。你是否在使用软件包管理器或想下载 Bootstrap 的源文件? 请转到下载页面查看说明

CSS 文件

复制以下 <link> 标签并粘贴到 <head> 标签内,注意,务必放到其它所有 CSS 样式前面。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet" integrity="sha384-dRYOpy/KcUgZUv3UgAdBrl5jPEmH+fTv2Vu1Bq4Wsr2/779iKnon9o5hZZVSM76I" crossorigin="anonymous">

JS 文件

Bootstrap 自带的大部分组件都需要依赖 JavaScript 才能起作用。具体来说,这些组件依赖我们自己开发的 JavaScript 插件以及 Popper。复制下面的 <script> 标签 粘贴到页面底部,并且是在 </body> 标签之前,就能起作用了。

集成包

我们提供的两个集成包都包含了 Bootstrap 的每一个 JavaScript 插件。 即 bootstrap.bundle.js 和 bootstrap.bundle.min.js,此外,还包含了 Popper ,用于支持工具提示(tooltip)和弹出框(popover)功能。有关 Bootstrap 中包含了哪些内容的更多信息,请参见我们的  内容 章节。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  integrity="sha384-KIT91OlDmsIXvQaqzxNONuO4ve97S3yDh9A0nea67fEK+03Wdyc/3oGgd0+DPaf7" crossorigin="anonymous"></script>

分开加载

如果你决定分开加载各个文件,那么务必按此顺序,Popper 首先加载(如果你使用工具提示和弹出框的话),然后是我们提供的 JavaScript 插件。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  integrity="sha384-eHUUET4pt56BkNH9bTjZqK3d9mJAjuwJF3IR0yb+k7goQPFwqV5q+Bn51DOhBWkk" crossorigin="anonymous"></script>

模块

如果你使用 ​<script type="module"> ​标签以模块方式加载的话,请参阅我们的 将 Bootstrap 作为模块使用 章节。

Bootstrap 组件

是否好奇哪些组件明确需要 我们提供的 JavaScript 插件以及 Popper?请单击下面的组件详情链接进行查看。如果完全不确定页面的常规结构,请继续阅读并参考示例页面模板。

显示需要 JavaScript 的组件
  • 消除通知(alerts)
  • 用于切换状态和复选框/单选框功能的按钮
  • 所有幻灯片行为、控件和指示器的轮播
  • 折叠以切换内容的可见性
  • 用于显示和定位的下拉菜单(也需要Popper
  • 用于显示、定位和滚动行为的模态
  • Navbar 用于扩展我们的 Collapse 插件以实现响应行为
  • 用于显示和解除的 Toast
  • 用于显示和定位的工具提示和弹出框(也需要Popper
  • Scrollspy 用于滚动行为和导航更新

入门模板

请确保使用最新的页面设计和开发标准来设置页面。也就是说,使用 HTML5 文档类型(doctype)、并包含一个设置 viewport(视口)的 <meta> 标签以实现正确的响应式布局行为。这些要求组合在一起之后,你的页面应当如下所示:

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet" integrity="sha384-dRYOpy/KcUgZUv3UgAdBrl5jPEmH+fTv2Vu1Bq4Wsr2/779iKnon9o5hZZVSM76I" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可! -->

    <!-- 选项 1:包含 Popper 的 Bootstrap 集成包 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  integrity="sha384-KIT91OlDmsIXvQaqzxNONuO4ve97S3yDh9A0nea67fEK+03Wdyc/3oGgd0+DPaf7" crossorigin="anonymous"></script>

    <!-- 选项 2:Popper 和 Bootstrap 的 JS 插件各自独立 -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  integrity="sha384-eHUUET4pt56BkNH9bTjZqK3d9mJAjuwJF3IR0yb+k7goQPFwqV5q+Bn51DOhBWkk" crossorigin="anonymous"></script>
    -->
  </body>
</html>

接下来,请访问 布局文档 或 我们的官方示例 作为你布局网站内容和组件的参考。

重要的全局设置

Bootstrap 依赖一些重要的全局样式和设置,专门针对的是跨浏览器的样式 统一化(normalization),需要你在使用 Bootstrap 之前重点了解。接下来开始我们历险之旅吧。

HTML5 文档类型(doctype)

Bootstrap 要求文档类型(doctype)是 HTML5。如果没有这一设置,你就会看到一些古怪的、不完整的样式,因此,正确设置文档类型(doctype)就能轻松避免这些困扰。

<!doctype html>
<html lang="zh-CN">
  ...
</html>

响应式布局相关的标签

Bootstrap 采用的是 移动设备优先(mobile first) 的开发策略,因此,我们首先为移动设备优化代码,然后根据需要并利用 CSS 媒体查询功能来缩放组件。为了确保所有设备都能支持正确的渲染和触屏缩放,请务必在 <head> 标签中 添加让 viewport(视口)支持响应式布局的 标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

你可以在 入门模板 中查看此示例的实际应用。

CSS 盒模型

为了让 CSS 中的尺寸设置更加直观,我们将全局的 box-sizing 从 content-box 调整为 border-box。这样可以确保 padding 的设置不会影响计算元素的最终宽度,但是会导致某些第三方软件(例如 Google Maps 和 Google Custom Search Engine)出现问题。

在为数不多的情况下,你需要专门覆盖这一些设置,可以使用如下示例代码:

.selector-for-some-widget {
  box-sizing: content-box;
}

利用上述代码片段,嵌套的元素(包括通过 ::before 和 ::after 生成的内容)都将继承 .selector-for-some-widget 所指定的 box-sizing 值。

了解有关 盒模型和尺寸设置 的更多信息。

Reboot

为了提升跨浏览器的渲染效果,我们使用 Reboot 来纠正不同浏览器和设备之间的差异,并同时为常见的 HTML 元素提供更多更合适的样式重置。

社区

掌握最新的 Bootstrap 开发进展方面的信息,并通过这些有用的资源保持与社区的练习。

  • 阅读并订阅 Bootstrap 官方博客
  • 加入 官方 Slack 会议室
  • 在 IRC 频道中与 Bootstrap 同道中人聊天。记住,irc.libera.chat 服务器,#bootstrap 频道。
  • 在 Stack Overflow 上可以找到更实际的帮助(标签为 bootstrap-5)。
  • 如果开发者对 Bootstrap 进行修改或增加功能并通过类似 npm 的分发机制来发布新的软件包的话,请务必为软件包添加 bootstrap 关键字,以增加更多的曝光。

你也可以关注 @getbootstrap on Twitter 以获取最新的八卦和超赞的音视频。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号