Bootstrap4 简介

什么是 Bootstrap？

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS 和 JavaScript 的，它提供了许多现成的组件和工具，可以帮助开发者快速构建美观、响应式的用户界面。

Bootstrap 的核心特性
  • 响应式设计 - Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机
  • 移动设备优先 - 自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式
  • 浏览器兼容 - 所有主流浏览器都支持 Bootstrap
  • 易于使用 - 只要您具备 HTML 和 CSS 的基础知识，您就可以开始使用 Bootstrap
  • 丰富的组件 - 提供大量预构建组件，如导航栏、下拉菜单、分页等
  • 强大的网格系统 - 基于 Flexbox 的响应式网格系统

Bootstrap 4 的新特性

Bootstrap 4 是 Bootstrap 的最新版本，与 Bootstrap 3 相比有了很大的变化，引入了许多现代化的特性和改进。

从 Less 迁移到 Sass

Bootstrap 4

Bootstrap 4 使用 Sass 替代了 Less 作为 CSS 预处理器，提供了更强大的定制能力。

改进的网格系统

Bootstrap 4

引入了基于 Flexbox 的网格系统，提供了更灵活的布局选项。

新的卡片组件

Bootstrap 4

卡片组件取代了 Bootstrap 3 中的面板、缩略图和 wells，提供了更灵活的内容容器。

Reboot 模块

Bootstrap 4

合并了所有 HTML 重置到一个新的模块中：Reboot，基于 Normalize.css 构建。

重写的 JavaScript 插件

Bootstrap 4

所有 JavaScript 插件都使用 ES6 重写，提供了更好的性能和可维护性。

快速开始

要在项目中使用 Bootstrap 4，您可以通过以下几种方式：

通过 CDN 引入 Bootstrap

最简单的方式是通过 CDN 引入 Bootstrap 的 CSS 和 JS 文件：

<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

<!-- Bootstrap 4 JS 和依赖 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
通过包管理器安装

您也可以通过 npm、yarn 或 Composer 安装 Bootstrap：

# 通过 npm 安装
npm install bootstrap@4.6.0

# 通过 yarn 安装
yarn add bootstrap@4.6.0

# 通过 Composer 安装
composer require twbs/bootstrap:4.6.0

学习路径

建议按照左侧导航的顺序学习 Bootstrap 4，从基础概念开始，逐步深入到高级组件和定制化。

学习建议
  1. 先了解 Bootstrap 的基本概念和网格系统
  2. 学习常用组件和工具类
  3. 通过实际项目练习巩固知识
  4. 学习如何定制 Bootstrap 以满足特定需求
  5. 关注 Bootstrap 社区和最新动态

提示

本教程将带您全面了解 Bootstrap 4 的各个方面。每个章节都包含详细的解释、代码示例和实际应用场景，帮助您快速掌握 Bootstrap 4 的开发技能。

上一章 下一章:Bootstrap 环境安装