手册

表单

表单选择菜单复选框和单选按钮范围输入组浮动标签表单验证

网格

网格系统堆叠/水平网格 XSmall 网格 Small 网格 Medium 网格 Large 网格 XLarge 网格 XXL 网格实例

首页大前端 Bootstrap Bootstrap 5教程

入门

阅读2823

更新时间2025-08-11

容器

什么是 Bootstrap？

Bootstrap 是一个免费的前端框架，用于更快、更轻松地进行 Web 开发
Bootstrap 包括基于 HTML 和 CSS 的设计模板，用于排版、表单、按钮、表格、导航、模态、图像轮播等
Bootstrap 提供了丰富的 JavaScript 插件
Bootstrap 可使您能够轻松地创建响应式设计

什么是响应式网页设计？

响应式网页设计旨在创建能够自动调整的网站，以便增强所有设备上的使用体验，不论是手机还是大型台式机。

Bootstrap 5 实例


  我的第一张 Bootstrap 页面



  
    
      列 1：春日
      胜日寻芳泗水滨，无边光景一时新。
      等闲识得东风面，万紫千红总是春。
    
    
      列 2：初夏绝句
      纷纷红紫已成尘，布谷声中夏令新。
      夹路桑麻行不尽，始知身是太平人。
    
    
      列 3：山行
      远上寒山石径斜，白云生处有人家。
      停车坐爱枫林晚，霜叶红于二月花。

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:

使用 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 属性和正确的标题、字符集：



  
    Bootstrap 5 实例

2. Bootstrap 5 移动优先

Bootstrap 5 的设计目标是响应移动设备。移动优先的样式是核心框架的一部分。

为确保正确的渲染和触摸缩放，请在元素内添加以下标记：

width=device-width 设置了页面的宽度以跟随设备的 screen-width（将因设备而异）。

initial-scale=1 设置了浏览器首次加载页面时的初始缩放级别。

3. 容器

Bootstrap 5 还需要一个包含元素来包装站点内容。

有两种容器类可供选择：

.container 类提供了一个响应式的固定宽度容器
.container-fluid 类提供了一个全宽容器，跨越视口的整个宽度

两张基本的 Bootstrap 5 页面

container 实例

下例展示了基本 Bootstrap 5 页面（带有响应式固定宽度容器）的代码：




  Bootstrap 实例
  
  
  
  




  我的第一张 Bootstrap 页面
  这部分在 .container 类中。
  .container 类提供了响应式固定宽度的容器。

Container Fluid 实例

下例展示了基本 Bootstrap 5 页面（带有全宽容器）的代码：




  Bootstrap 实例
  
  
  
  




  我的第一张 Bootstrap 页面
  这部分在 .container-fluid 类中。
  .container-fluid 类提供全宽容器，跨越视口的整个宽度。

容器