Bootstrap 4 是一个功能强大的前端框架，广泛应用于现代网页开发中。它提供了丰富的组件和工具，帮助开发者快速构建响应式和移动优先的网页。本文将详细介绍 Bootstrap 4 的基本用法、核心组件、布局方式以及一些高级特性，帮助你快速掌握 Bootstrap 4 的开发技能。

一、Bootstrap 4 简介

Bootstrap 4 是全球最受欢迎的前端框架之一，用于开发响应式布局、移动设备优先的 Web 项目。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件。

二、安装 Bootstrap 4

（一）通过 CDN 引入

这是最简单快捷的方式，无需下载任何文件。

HTML

复制

Bootstrap 示例

Hello, Bootstrap!

（二）下载并本地引入

你可以从 Bootstrap 官网 下载文件，然后在项目中引入。

HTML

复制

三、Bootstrap 4 基础

（一）容器

容器是 Bootstrap 中用于包裹内容的组件，提供了响应式布局。

HTML

复制

这是一个固定宽度的容器

这是一个全宽度的容器

（二）栅格系统

Bootstrap 4 的栅格系统基于 12 列布局，使用 row 和 col 类创建响应式布局。

HTML

复制

列 1

列 2

列 3

四、核心组件

（一）导航栏

导航栏是网页中常见的组件，用于提供页面导航。

HTML

复制

我的网站

首页

关于

联系

（二）卡片

卡片组件用于展示内容，如图片、文本等。

HTML

复制

卡片标题

卡片内容。

按钮

（三）模态框

模态框用于创建弹出窗口。

HTML

复制

打开模态框

模态框标题

×

模态框内容。

关闭

保存

五、高级特性

（一）自定义样式

通过 Sass 自定义 Bootstrap 的样式。

scss

复制

// Variable overrides first

$primary: #900;

$enable-shadows: true;

$prefix: "mo-";

// Then import Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

（二）响应式设计

使用媒体查询和响应式工具类创建响应式布局。

css

复制

@media (max-width: 768px) {

.container {

background-color: #3498db;

}

}

六、总结

Bootstrap 4 是一个功能强大的前端框架，广泛应用于现代网页开发中。它提供了丰富的组件和工具，帮助开发者快速构建响应式和移动优先的网页。本文详细介绍了 Bootstrap 4 的基本用法、核心组件、布局方式以及一些高级特性，希望对你有所帮助。如果你在使用 Bootstrap 4 时遇到任何问题，欢迎在评论区留言，我会及时为你解答。