logoOutUI

⌘ K
  • 指南
  • 组件
  • 工具类
  • 其他
v5.3.x
  • 指南
    • 介绍
    • 安装
    • 项目结构
    • 浏览器兼容性
    • RTL
最后更新时间：
安装
Copyright © 2021-present 粤ICP备2021136339号
‌
‌
‌
‌

介绍

Bootstrap 是一个功能强大且灵活的前端框架，旨在帮助开发者快速创建响应式和移动优先的网站。它提供了丰富的 CSS 类和 JavaScript 插件，简化了网页开发过程。

特点

  • 响应式设计：支持多种设备和屏幕尺寸，确保网站在任何设备上都能良好显示。
  • 易于使用：无需深厚前端经验，快速上手，轻松构建复杂布局。
  • 丰富组件：预定义组件如按钮、导航栏、卡片等，方便快捷使用。
  • 强大插件：内置多个 JavaScript 插件，如模态框、轮播图等，提升用户体验。
  • 高度定制：通过修改变量和混合宏，轻松自定义样式，满足个性化需求。

快速开始

安装

使用 CDN

直接在 HTML 文件中引入 Bootstrap 的 CDN 链接：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

使用 npm

通过 npm 安装 Bootstrap：

npm install bootstrap

示例

版本

当前最新版本为 Bootstrap 5.3.3，主要改进包括：

  • 性能优化：提升了框架的整体性能，减少了加载时间和内存占用。
  • 新的组件：增加了新的组件，如 Offcanvas 和 Toasts，提供更多功能。
  • 更好的响应式支持：增强了响应式设计的支持，使网站在不同设备上的表现更加一致。
  • Sass 改进：优化了 Sass 变量和混合宏，使自定义更加灵活和方便。

历史版本

  • Bootstrap 5.0.0：2021年5月发布，引入了新的网格系统和组件，移除了对 jQuery 的依赖。
  • Bootstrap 4.0.0：2018年1月发布，引入了 Flexbox 布局，提高了响应式设计的能力。
  • Bootstrap 3.0.0：2013年8月发布，首次引入了移动优先的设计理念。
index.html
<div class="px-4 py-5 my-5 text-center">
    <img class="d-block mx-auto mb-4" src="/images/logo.png" alt="logo" width="72">
    <h1 class="display-5 fw-bold text-body-emphasis">Bootstrap</h1>
    <div class="col-lg-6 mx-auto">
      <p class="lead mb-4">
        Quickly design and customize responsive mobile-first sites with Bootstrap, 
        the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, 
        responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
      </p>
      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
        <button type="button" class="btn btn-primary btn-lg px-4 gap-3">Primary button</button>
        <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
      </div>
    </div>
  </div>