Bootstrap4 教程

什么是 Bootstrap 4?

Bootstrap 4 是 Bootstrap 系列中最经典、应用最广的版本,由 Twitter 团队开发,是目前全球使用率最高的开源 CSS 框架之一。它提供响应式栅格、丰富的组件与工具类,让开发者快速构建现代化网页。

Bootstrap 4 核心特性

  • 移动优先:栅格系统从手机端起步,逐级适配平板与桌面
  • Flexbox 布局:4.x 全面采用 Flexbox,布局更灵活
  • 12 列栅格:基于断点的响应式列系统
  • 组件丰富:卡片、模态框、轮播、导航栏等 30+ 组件
  • Sass 定制:通过 Sass 变量定制主题

Bootstrap 4 vs 3 的主要变化

  • 使用 Flexbox 替代浮动布局
  • 新增卡片组件(Card)替代旧的 panel/well
  • 升级为 Sass(原为 Less)
  • 尺寸单位改为 rem
  • 引入新的工具类体系

依赖 jQuery

Bootstrap 4 的 JS 组件(模态框、下拉等)依赖 jQuery 和 Popper.js:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>

快速体验

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<button class="btn btn-primary">主按钮</button>

Bootstrap4 安装使用

Bootstrap 4 安装使用

安装 Bootstrap 4 有 CDN、包管理器、本地下载三种方式。

1. CDN 引入

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
  <!-- 页面内容 -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
</body>

2. 包管理器

npm install bootstrap@4.6.2
# 或
yarn add bootstrap@4.6.2
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
// 还需要 jQuery 和 Popper.js

3. 本地文件

官网 getbootstrap.com/docs/4.6 下载编译好的 CSS/JS
放入项目目录引用

必需的 HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <h1>Hello, Bootstrap 4!</h1>
  </body>
</html>

验证安装

写一个带按钮和网格的页面,浏览器中样式正常渲染即安装成功。

Bootstrap4 网格系统

Bootstrap 4 网格系统

Bootstrap 4 采用 12 列 Flexbox 网格,通过 container → row → col 三层结构构建响应式布局。

基本用法

<div class="container">
  <div class="row">
    <div class="col">自动宽度列</div>
    <div class="col">自动宽度列</div>
    <div class="col">自动宽度列</div>
  </div>
</div>

指定列宽

<div class="row">
  <div class="col-8">占 8 列(2/3)</div>
  <div class="col-4">占 4 列(1/3)</div>
</div>

响应式断点

.col-sm-*   ≥576px   平板
.col-md-*   ≥768px   桌面
.col-lg-*   ≥992px   大桌面
.col-xl-*   ≥1200px  超大屏

响应式示例

<div class="row">
  <div class="col-md-6 col-lg-4">平板占半宽,桌面占 1/3</div>
  <div class="col-md-6 col-lg-4">同上</div>
  <div class="col-md-12 col-lg-4">平板全宽,桌面占 1/3</div>
</div>

偏移与排序

<div class="col-md-4 offset-md-4">居中(偏移 4 列)</div>
<div class="order-2">第二</div>
<div class="order-1">第一</div>
<div class="order-first">最前</div>

对齐方式

<div class="row justify-content-center">水平居中</div>
<div class="row justify-content-between">两端对齐</div>
<div class="row align-items-center">垂直居中</div>

Bootstrap4 文字排版

Bootstrap 4 文字排版

Bootstrap 4 为标题、段落、列表等文本元素提供统一的排版样式,并支持响应式调整。

标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<p class="h3">使用类名显示标题样式</p>

展示标题

<h1 class="display-1">超大标题</h1>
<h1 class="display-4">较小展示标题</h1>

段落样式

<p class="lead">lead 让段落更突出醒目</p>
<p>普通段落文字。</p>

内联文本元素

<mark>高亮</mark>  <del>删除线</del>
<s>失效文本</s>    <ins>插入文本</ins>
<u>下划线</u>     <strong>加粗</strong>
<em>斜体</em>     <small>小号文本</small>

文本工具类

<p class="text-left">左对齐</p>
<p class="text-center">居中</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐</p>
<p class="text-nowrap">不换行</p>
<p class="text-uppercase">全大写</p>
<p class="text-capitalize">首字母大写</p>
<p class="font-weight-bold">粗体</p>

引用块

<blockquote class="blockquote">
  <p>这是一段引用内容。</p>
  <footer class="blockquote-footer">出自 <cite>某书</cite></footer>
</blockquote>

列表

<ul class="list-unstyled">无样式列表</ul>
<ul class="list-inline">
  <li class="list-inline-item">行内项 1</li>
  <li class="list-inline-item">行内项 2</li>
</ul>

Bootstrap4 颜色

Bootstrap 4 颜色

Bootstrap 4 内置语义化颜色,通过文字、背景、边框等工具类使用。

文本颜色

<p class="text-primary">主色(蓝)</p>
<p class="text-secondary">次色(灰)</p>
<p class="text-success">成功(绿)</p>
<p class="text-danger">危险(红)</p>
<p class="text-warning">警告(黄)</p>
<p class="text-info">信息(青)</p>
<p class="text-light bg-dark">浅色</p>
<p class="text-dark">深色</p>
<p class="text-muted">弱化</p>
<p class="text-white bg-dark">白色</p>

背景颜色

<div class="bg-primary text-white">蓝色背景</div>
<div class="bg-success text-white">绿色背景</div>
<div class="bg-danger text-white">红色背景</div>
<div class="bg-warning">黄色背景</div>
<div class="bg-info">青色背景</div>
<div class="bg-light">浅灰背景</div>
<div class="bg-dark text-white">深灰背景</div>
<div class="bg-white">白色背景</div>

Sass 变量定制

// 编译前覆盖变量
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;

// 或直接生成自定义 .text-xxx 类
.text-custom { color: #ff5722; }

透明度调整

<div class="bg-primary" style="opacity: 0.5;">50% 透明背景</div>
<!-- Bootstrap 4 没有内置透明度工具类,用 style 或自定义 CSS -->

Bootstrap4 表格

Bootstrap 4 表格

给 table 添加 .table 类即可获得统一风格的表格样式。

基础表格

<table class="table">
  <thead>
    <tr><th>姓名</th><th>城市</th><th>分数</th></tr>
  </thead>
  <tbody>
    <tr><td>张三</td><td>北京</td><td>90</td></tr>
    <tr><td>李四</td><td>上海</td><td>85</td></tr>
  </tbody>
</table>

修饰类

<table class="table table-striped">   斑马纹
<table class="table table-bordered">   全边框
<table class="table table-hover">      悬停高亮
<table class="table table-sm">        紧凑
<table class="table table-dark">      深色

行与单元格颜色

<tr class="table-primary"><td>主色行</td></tr>
<tr class="table-success"><td>成功行</td></tr>
<tr class="table-danger"><td>危险行</td></tr>
<td class="table-warning">警告单元格</td>

thead 样式

<thead class="thead-dark">深色表头</thead>
<thead class="thead-light">浅色表头</thead>

响应式表格

<div class="table-responsive">
  <table class="table">...</table>
</div>
<!-- 断点控制: table-responsive-sm/md/lg/xl -->

Bootstrap4 图像形状

Bootstrap 4 图像形状

Bootstrap 4 提供圆角、圆形、缩略图等图像样式类。

响应式图片

<img src="photo.jpg" class="img-fluid" alt="响应式图片">
<!-- img-fluid: max-width:100%; height:auto; -->

圆角与圆形

<img src="a.jpg" class="rounded" alt="小圆角">
<img src="a.jpg" class="rounded-circle" alt="圆形头像">
<img src="a.jpg" class="rounded-0" alt="无圆角">
<img src="a.jpg" class="rounded-lg" alt="大圆角">

缩略图

<img src="a.jpg" class="img-thumbnail" alt="带边框缩略图">

对齐

<img src="a.jpg" class="float-left" alt="左浮动">
<img src="a.jpg" class="float-right" alt="右浮动">
<img src="a.jpg" class="mx-auto d-block" alt="居中">

图片文字配合

<div class="clearfix">
  <img src="a.jpg" class="float-right w-25" alt="右侧图">
  <p>文本环绕图片。</p>
</div>

宽度工具类

<img src="a.jpg" class="w-25" alt="25%">
<img src="a.jpg" class="w-50" alt="50%">
<img src="a.jpg" class="w-75" alt="75%">
<img src="a.jpg" class="w-100" alt="100%">

Bootstrap4 Jumbotron

Bootstrap 4 Jumbotron(巨幕)

Jumbotron 是 Bootstrap 4 中的独立组件,用于展示页面头部的大块宣传区域。

基础 Jumbotron

<div class="jumbotron">
  <h1 class="display-4">欢迎访问本站</h1>
  <p class="lead">这是一个 Bootstrap 4 的 Jumbotron 组件,用于突出展示重要内容。</p>
  <hr class="my-4">
  <p>可以放置按钮、链接等更多内容。</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a>
</div>

全宽 Jumbotron

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">全宽巨幕</h1>
    <p class="lead">使用 jumbotron-fluid 使背景占满整个视口宽度。</p>
  </div>
</div>

自定义背景

<div class="jumbotron bg-dark text-white">
  <h1 class="display-4">深色巨幕</h1>
  <p class="lead">结合背景与文字颜色类定制样式。</p>
</div>

Jumbotron 与 Bootstrap 5 的区别

Bootstrap 5 移除了 Jumbotron 组件,改用 p-5、bg-light、rounded-3 等工具类组合实现相同效果。Bootstrap 4 中仍是独立组件,直接使用即可。

使用场景

  • 网站首页头部宣传区
  • 产品发布公告
  • 登录/注册页的介绍区块

Bootstrap4 信息提示框

Bootstrap 4 信息提示框(Alert)

Alert 用于展示操作反馈、警告与提示信息,支持关闭按钮。

基础提示框

<div class="alert alert-primary">主要提示</div>
<div class="alert alert-secondary">次要提示</div>
<div class="alert alert-success">成功提示</div>
<div class="alert alert-danger">危险提示</div>
<div class="alert alert-warning">警告提示</div>
<div class="alert alert-info">信息提示</div>
<div class="alert alert-light">浅色提示</div>
<div class="alert alert-dark">深色提示</div>

带链接

<div class="alert alert-success">
  操作成功!<a href="#" class="alert-link">查看详情</a>
</div>

可关闭

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>注意!</strong> 这是一个可关闭的提示框。
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

带标题

<div class="alert alert-info">
  <h4 class="alert-heading">提示标题</h4>
  <p>提示框的详细内容描述。</p>
  <hr>
  <p class="mb-0">补充说明文字。</p>
</div>

JS 关闭

// jQuery 方式
$('.alert').alert('close');
// 或
$('#myAlert').alert();

Bootstrap4 按钮

Bootstrap 4 按钮

Bootstrap 4 提供多色、多尺寸、多状态的按钮样式。

按钮颜色

<button class="btn btn-primary">主按钮</button>
<button class="btn btn-secondary">次按钮</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-danger">危险</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-info">信息</button>
<button class="btn btn-light">浅色</button>
<button class="btn btn-dark">深色</button>
<button class="btn btn-link">链接样式</button>

描边按钮

<button class="btn btn-outline-primary">主色描边</button>
<button class="btn btn-outline-success">成功描边</button>
<button class="btn btn-outline-danger">危险描边</button>

尺寸

<button class="btn btn-primary btn-lg">大按钮</button>
<button class="btn btn-primary">默认</button>
<button class="btn btn-primary btn-sm">小按钮</button>
<button class="btn btn-primary btn-block">块级按钮(占满整行)</button>

状态

<button class="btn btn-primary" disabled>禁用</button>
<button class="btn btn-primary active">激活</button>
<a class="btn btn-primary disabled" href="#">链接禁用</a>

按钮组

<div class="btn-group" role="group">
  <button class="btn btn-secondary">左</button>
  <button class="btn btn-secondary">中</button>
  <button class="btn btn-secondary">右</button>
</div>

加载状态(结合 Spinner)

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  加载中...
</button>

Bootstrap4 按钮组

Bootstrap 4 按钮组(Button Group)

按钮组把多个按钮组合成一组,支持单选、复选、工具栏和垂直排列。

基础按钮组

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">左</button>
  <button type="button" class="btn btn-secondary">中</button>
  <button type="button" class="btn btn-secondary">右</button>
</div>

按钮工具栏

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group mr-2">
    <button class="btn btn-secondary">1</button>
    <button class="btn btn-secondary">2</button>
  </div>
  <div class="btn-group mr-2">
    <button class="btn btn-secondary">3</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-secondary">4</button>
  </div>
</div>

尺寸

<div class="btn-group btn-group-lg">大号按钮组</div>
<div class="btn-group btn-group-sm">小号按钮组</div>

垂直按钮组

<div class="btn-group-vertical">
  <button class="btn btn-secondary">上</button>
  <button class="btn btn-secondary">中</button>
  <button class="btn btn-secondary">下</button>
</div>

复选按钮组

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> 复选框 1
  </label>
  <label class="btn btn-secondary">
    <input type="checkbox"> 复选框 2
  </label>
</div>

单选按钮组

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-primary active">
    <input type="radio" name="options" checked> 选项 A
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" name="options"> 选项 B
  </label>
</div>

嵌套下拉

<div class="btn-group">
  <button type="button" class="btn btn-primary">操作</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">动作一</a>
    <a class="dropdown-item" href="#">动作二</a>
  </div>
</div>

Bootstrap4 徽章(Badges)

Bootstrap 4 徽章(Badges)

徽章用于在元素上附加小型的计数或状态标记。

基础徽章

<span class="badge badge-primary">主要</span>
<span class="badge badge-secondary">次要</span>
<span class="badge badge-success">成功</span>
<span class="badge badge-danger">危险</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-info">信息</span>
<span class="badge badge-light">浅色</span>
<span class="badge badge-dark">深色</span>

胶囊徽章

<span class="badge badge-pill badge-primary">胶囊样式</span>
<span class="badge badge-pill badge-success">New</span>

按钮内徽章

<button type="button" class="btn btn-primary">
  收件箱 <span class="badge badge-light">4</span>
</button>

标题内徽章

<h1>示例标题 <span class="badge badge-secondary">New</span></h1>
<h2>二级标题 <span class="badge badge-primary">Hot</span></h2>

链接徽章

<a href="#" class="badge badge-primary">链接徽章</a>

与 Bootstrap 5 的区别

Bootstrap 4 使用 badge badge-* 类;Bootstrap 5 改为 badge bg-*。迁移时需把 badge-primary 改为 bg-primary。

Bootstrap4 进度条

Bootstrap 4 进度条(Progress)

进度条用于展示任务完成度,支持颜色、条纹与动画。

基础进度条

<div class="progress">
  <div class="progress-bar" style="width:50%">50%</div>
</div>

颜色

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">成功</div>
</div>
<div class="progress mt-2">
  <div class="progress-bar bg-danger" style="width:60%">危险</div>
</div>

条纹

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:70%">70%</div>
</div>

动画条纹

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:80%"></div>
</div>

多段进度

<div class="progress">
  <div class="progress-bar" style="width:15%">15%</div>
  <div class="progress-bar bg-success" style="width:30%">30%</div>
  <div class="progress-bar bg-warning" style="width:20%">20%</div>
</div>

自定义高度与标签

<div class="progress" style="height: 20px;">
  <div class="progress-bar" style="width:50%">50% 完成</div>
</div>

Bootstrap4 加载

Bootstrap 4 加载动画(Spinners)

Bootstrap 4.2+ 提供旋转与增长两种加载动画。

旋转动画

<div class="spinner-border" role="status">
  <span class="sr-only">加载中...</span>
</div>

颜色

<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-info"></div>

增长动画

<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">加载中...</span>
</div>

尺寸

<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>

按钮内加载

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  提交中...
</button>

居中加载

<div class="d-flex justify-content-center">
  <div class="spinner-border"></div>
</div>

注意

Bootstrap 4 用 sr-only(仅屏幕阅读器可见)替代了 5 中的 visually-hidden。

Bootstrap4 分页

Bootstrap 4 分页(Pagination)

分页组件用于多页内容导航。

基础分页

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">上一页</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
  </ul>
</nav>

禁用与激活

<li class="page-item disabled"><span class="page-link">上一页</span></li>
<li class="page-item active"><span class="page-link">2<span class="sr-only">(当前)</span></span></li>

尺寸

<ul class="pagination pagination-lg">大分页</ul>
<ul class="pagination pagination-sm">小分页</ul>

对齐

<ul class="pagination justify-content-center">居中</ul>
<ul class="pagination justify-content-end">右对齐</ul>

面包屑

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">首页</a></li>
    <li class="breadcrumb-item active" aria-current="page">当前页</li>
  </ol>
</nav>

Bootstrap4 列表组

Bootstrap 4 列表组(List Group)

列表组用于展示一组相关列表项,支持徽章、链接、按钮与自定义内容。

基础列表组

<ul class="list-group">
  <li class="list-group-item">第一项</li>
  <li class="list-group-item">第二项</li>
  <li class="list-group-item">第三项</li>
</ul>

激活与禁用

<li class="list-group-item active">激活项</li>
<li class="list-group-item disabled">禁用项</li>

链接列表

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">链接 1</a>
  <a href="#" class="list-group-item list-group-item-action active">链接 2</a>
</div>

颜色

<li class="list-group-item list-group-item-primary">主色</li>
<li class="list-group-item list-group-item-success">成功</li>
<li class="list-group-item list-group-item-danger">危险</li>
<li class="list-group-item list-group-item-warning">警告</li>

带徽章

<li class="list-group-item d-flex justify-content-between align-items-center">
  通知
  <span class="badge badge-primary badge-pill">14</span>
</li>

自定义内容

<a href="#" class="list-group-item list-group-item-action">
  <div class="d-flex w-100 justify-content-between">
    <h5 class="mb-1">标题</h5>
    <small>3 天前</small>
  </div>
  <p class="mb-1">详细描述内容。</p>
  <small>更多信息</small>
</a>

水平与无边框

<ul class="list-group list-group-horizontal">水平列表</ul>
<ul class="list-group list-group-flush">无边框列表(常与卡片搭配)</ul>

Bootstrap4 卡片

Bootstrap 4 卡片(Card)

卡片是 Bootstrap 4 的核心内容容器,替代了 3.x 的 panel、well 等组件。

基础卡片

<div class="card" style="width: 18rem;">
  <img src="photo.jpg" class="card-img-top" alt="图片">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片正文内容。</p>
    <a href="#" class="btn btn-primary">了解更多</a>
  </div>
</div>

头部与页脚

<div class="card">
  <div class="card-header">卡片头部</div>
  <div class="card-body">卡片主体</div>
  <div class="card-footer text-muted">卡片页脚</div>
</div>

列表卡片

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">项目一</li>
    <li class="list-group-item">项目二</li>
  </ul>
</div>

图文卡片

<div class="card mb-3">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="a.jpg" class="card-img" alt="图">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">左右布局卡片</h5>
        <p class="card-text">图片与文字水平排列。</p>
      </div>
    </div>
  </div>
</div>

网格卡片组

<div class="card-deck">
  <div class="card"><div class="card-body">卡片 1</div></div>
  <div class="card"><div class="card-body">卡片 2</div></div>
  <div class="card"><div class="card-body">卡片 3</div></div>
</div>
<div class="card-columns mt-3">瀑布流卡片</div>

背景与边框

<div class="card bg-primary text-white">主色卡片</div>
<div class="card border-success">绿色边框卡片</div>

Bootstrap4 下拉菜单

Bootstrap 4 下拉菜单(Dropdown)

下拉菜单点击按钮展开一组选项,基于 jQuery + Popper.js 定位。

基础下拉

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
    下拉菜单
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">选项一</a>
    <a class="dropdown-item" href="#">选项二</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">选项三</a>
  </div>
</div>

方向

<div class="dropup">向上展开</div>
<div class="dropright">向右展开</div>
<div class="dropleft">向左展开</div>

菜单标题与禁用

<div class="dropdown-menu">
  <h6 class="dropdown-header">分组标题</h6>
  <a class="dropdown-item" href="#">选项 A</a>
  <a class="dropdown-item disabled" href="#">禁用项</a>
</div>

对齐

<div class="dropdown-menu dropdown-menu-right">右对齐菜单</div>

JS 控制

$('.dropdown-toggle').dropdown();        // 初始化
$('#myDropdown').dropdown('toggle');     // 切换
$('#myDropdown').dropdown('show');       // 显示
$('#myDropdown').dropdown('hide');       // 隐藏

Bootstrap4 折叠

Bootstrap 4 折叠(Collapse)

折叠用于内容的展开与收起,支持手风琴效果。

基础折叠

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button">
    展开内容
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    这是默认隐藏的内容。
  </div>
</div>

按钮触发

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#demo">
  按钮控制
</button>
<div class="collapse" id="demo">内容...</div>

手风琴

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
          第一项
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">第一项内容</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo">
          第二项
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#accordion">
      <div class="card-body">第二项内容</div>
    </div>
  </div>
</div>

JS 方法

$('#demo').collapse('show');
$('#demo').collapse('hide');
$('#demo').collapse('toggle');

Bootstrap4 导航

Bootstrap 4 导航(Navs)

导航组件用于构建标签页、胶囊导航等页面内导航。

基础导航

<ul class="nav">
  <li class="nav-item"><a class="nav-link active" href="#">首页</a></li>
  <li class="nav-item"><a class="nav-link" href="#">产品</a></li>
  <li class="nav-item"><a class="nav-link" href="#">关于</a></li>
</ul>

胶囊与对齐

<ul class="nav nav-pills">胶囊导航</ul>
<ul class="nav justify-content-center">居中</ul>
<ul class="nav justify-content-end">右对齐</ul>
<ul class="nav flex-column">垂直导航</ul>

标签页切换

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile">资料</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="home">首页内容</div>
  <div class="tab-pane fade" id="profile">资料内容</div>
</div>

胶囊标签页

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="pill" href="#pills-home">首页</a>
  </li>
</ul>

带下拉

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">下拉</a>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">选项</a>
  </div>
</li>

Bootstrap4 导航栏

Bootstrap 4 导航栏(Navbar)

导航栏是网站顶部的主要导航区域,支持响应式折叠、品牌、搜索等。

基础导航栏

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">品牌名</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="#">产品</a></li>
    </ul>
  </div>
</nav>

深色导航栏

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">深色品牌</a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item"><a class="nav-link" href="#">链接</a></li>
    </ul>
  </div>
</nav>

固定与吸顶

<nav class="navbar navbar-expand-lg fixed-top">固定在顶部</nav>
<nav class="navbar navbar-expand-lg fixed-bottom">固定在底部</nav>
<nav class="navbar navbar-expand-lg sticky-top">滚动吸顶</nav>

带表单

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="搜索">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
  </form>
</nav>

响应式断点

<!-- navbar-expand-sm/md/lg/xl 控制折叠断点 -->
<nav class="navbar navbar-expand-md">md 以下折叠</nav>

与 Bootstrap 5 的区别

  • 4 用 ml-auto/mr-auto,5 用 ms-auto/me-auto
  • 4 用 data-toggle,5 用 data-bs-toggle
  • 4 的 form-inline 在 5 中改为 d-flex

Bootstrap4 面包屑导航

Bootstrap 4 面包屑导航(Breadcrumb)

面包屑展示当前页面的层级路径,帮助用户理解位置并快速返回上级。

基础面包屑

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">首页</a></li>
    <li class="breadcrumb-item"><a href="#">教程</a></li>
    <li class="breadcrumb-item active" aria-current="page">Bootstrap 4</li>
  </ol>
</nav>

无链接版本

<ol class="breadcrumb">
  <li class="breadcrumb-item active">当前位置</li>
</ol>

自定义分隔符

/* 修改分隔符 */
.breadcrumb-item + .breadcrumb-item::before {
  content: ">";   /* 默认是 / */
}

/* 或用图标 */
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  font-size: 18px;
}

实际应用示例

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">首页</a></li>
    <li class="breadcrumb-item"><a href="/docs">文档</a></li>
    <li class="breadcrumb-item"><a href="/docs/bootstrap">Bootstrap</a></li>
    <li class="breadcrumb-item active">组件</li>
  </ol>
</nav>

SEO 与无障碍

  • 使用 nav 包裹并加 aria-label="breadcrumb"
  • 当前页用 active + aria-current="page"
  • 结构化数据可用 JSON-LD 的 BreadcrumbList 类型

Bootstrap4 表单

Bootstrap 4 表单(Forms)

Bootstrap 4 对表单控件提供统一样式与多种布局方式。

基础输入框

<form>
  <div class="form-group">
    <label for="email">邮箱地址</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com">
    <small id="emailHelp" class="form-text text-muted">我们不会泄露你的邮箱。</small>
  </div>
  <div class="form-group">
    <label for="pwd">密码</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

行内表单

<form class="form-inline">
  <label class="sr-only" for="user">用户名</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="user" placeholder="用户名">
  <label class="sr-only" for="pwd2">密码</label>
  <input type="password" class="form-control mb-2 mr-sm-2" id="pwd2" placeholder="密码">
  <button type="submit" class="btn btn-primary mb-2">登录</button>
</form>

水平表单

<form>
  <div class="form-group row">
    <label for="inputEmail" class="col-sm-2 col-form-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputName" class="col-sm-2 col-form-label">姓名</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputName">
    </div>
  </div>
</form>

尺寸与禁用

<input class="form-control form-control-lg"> 大号
<input class="form-control">               默认
<input class="form-control form-control-sm"> 小号
<input class="form-control" disabled>       禁用
<input class="form-control" readonly>       只读

选择框

<select class="form-control">
  <option>请选择...</option>
  <option>选项一</option>
</select>

Bootstrap4 表单控件

Bootstrap 4 表单控件(Form Controls)

Bootstrap 4 为复选框、单选框、开关、文件上传、输入组等控件提供了统一样式。

复选框

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1">
  <label class="form-check-label" for="check1">默认复选框</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check2" checked>
  <label class="form-check-label" for="check2">选中状态</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check3" disabled>
  <label class="form-check-label" for="check3">禁用</label>
</div>

单选框

<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="male" checked>
  <label class="form-check-label" for="male">男</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="female">
  <label class="form-check-label" for="female">女</label>
</div>

行内排列

<div class="form-check form-check-inline">行内 A</div>
<div class="form-check form-check-inline">行内 B</div>

开关(Custom Switches)

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="switch1">
  <label class="custom-control-label" for="switch1">开关控件</label>
</div>

自定义复选框/单选框

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck">
  <label class="custom-control-label" for="customCheck">自定义复选框</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="customRadio">
  <label class="custom-control-label" for="customRadio">自定义单选框</label>
</div>

文件上传

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">选择文件</label>
</div>

滑块(Range)

<input type="range" class="custom-range" min="0" max="100">

输入组

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" placeholder="用户名">
</div>

Bootstrap4 自定义表单

Bootstrap 4 自定义表单(Custom Forms)

自定义表单组件在原生控件基础上提供更一致、更美观的样式,需要配合 JavaScript 使用。

自定义复选框

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">自定义复选框</label>
</div>

自定义单选框

<div class="custom-control custom-radio">
  <input type="radio" name="customRadio" class="custom-control-input" id="cr1">
  <label class="custom-control-label" for="cr1">选项一</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" name="customRadio" class="custom-control-input" id="cr2">
  <label class="custom-control-label" for="cr2">选项二</label>
</div>

开关

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">启用开关</label>
</div>

自定义选择框

<select class="custom-select custom-select-lg mb-3">
  <option selected>大号选择框</option>
  <option>选项二</option>
</select>
<select class="custom-select">
  <option selected>默认选择框</option>
</select>

自定义滑块

<input type="range" class="custom-range" id="customRange1">

自定义文件上传

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">选择文件</label>
</div>

<script>
// 显示所选文件名
$('.custom-file-input').on('change', function () {
  var fileName = $(this).val().split('\\').pop();
  $(this).siblings('.custom-file-label').addClass('selected').html(fileName);
});
</script>

校验样式

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input is-invalid" id="invalidCheck" required>
  <label class="custom-control-label" for="invalidCheck">请勾选同意</label>
  <div class="invalid-feedback">必须同意才能继续</div>
</div>

与 Bootstrap 5 的区别

Bootstrap 5 移除了 custom-* 系列,统一用 form-check、form-select、form-range 等新类替代。

Bootstrap4 轮播

Bootstrap 4 轮播(Carousel)

轮播用于循环展示图片或内容,支持自动播放、控制按钮与指示器。

基础轮播

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExample" data-slide-to="1"></li>
    <li data-target="#carouselExample" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="第一张">
      <div class="carousel-caption d-none d-md-block">
        <h5>第一张标题</h5>
        <p>第一张说明</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="第二张">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">上一张</span>
  </a>
  <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">下一张</span>
  </a>
</div>

淡入过渡

<div id="carouselFade" class="carousel slide carousel-fade" data-ride="carousel">

暂停与间隔

<div id="c1" class="carousel slide" data-ride="carousel" data-pause="hover" data-interval="3000">
<!-- data-pause="hover": 鼠标悬停暂停; data-interval: 切换间隔毫秒 -->

JS 控制

$('#carouselExample').carousel('next');    // 下一张
$('#carouselExample').carousel('prev');    // 上一张
$('#carouselExample').carousel(2);         // 跳到第 3 张
$('#carouselExample').carousel('pause');   // 暂停
$('#carouselExample').carousel('cycle');   // 继续

事件

$('#carouselExample').on('slide.bs.carousel', function () {
  console.log('正在切换');
});
$('#carouselExample').on('slid.bs.carousel', function () {
  console.log('切换完成');
});

Bootstrap4 模态框

Bootstrap 4 模态框(Modal)

模态框是覆盖在页面上的对话框,用于聚焦用户操作。

基础模态框

<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">模态框标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">模态框内容</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确认</button>
      </div>
    </div>
  </div>
</div>

尺寸

<div class="modal-dialog modal-sm">小尺寸</div>
<div class="modal-dialog">默认</div>
<div class="modal-dialog modal-lg">大尺寸</div>
<div class="modal-dialog modal-xl">超大</div>

居中与滚动

<div class="modal-dialog modal-dialog-centered">垂直居中</div>
<div class="modal-dialog modal-dialog-scrollable">内容滚动</div>

JS 控制

$('#exampleModal').modal('show');   // 打开
$('#exampleModal').modal('hide');   // 关闭
$('#exampleModal').modal('toggle'); // 切换

// 选项
$('#exampleModal').modal({ backdrop: 'static', keyboard: false });

事件

$('#exampleModal').on('show.bs.modal', function () { });
$('#exampleModal').on('shown.bs.modal', function () { });
$('#exampleModal').on('hidden.bs.modal', function () { });

Bootstrap4 提示框

Bootstrap 4 提示框(Tooltip)

提示框是鼠标悬停时显示的小气泡说明。

基础提示框

<button type="button" class="btn btn-secondary"
        data-toggle="tooltip" data-placement="top"
        title="这是一个提示框">
  悬停查看
</button>

初始化(必须)

$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});

方向

data-placement="top"    上方
data-placement="bottom" 下方
data-placement="left"   左侧
data-placement="right"  右侧

HTML 内容

<button type="button" class="btn btn-primary"
        data-toggle="tooltip" data-html="true"
        title="<em>斜体</em> <b>加粗</b>">
  富文本提示
</button>

JS 配置

$('#myBtn').tooltip({
  placement: 'right',
  trigger: 'hover',              // hover/focus/click
  delay: { show: 300, hide: 100 },
  html: true
});

方法

$('#myBtn').tooltip('show');
$('#myBtn').tooltip('hide');
$('#myBtn').tooltip('toggle');
$('#myBtn').tooltip('dispose');   // 销毁

动态内容更新

$('#myBtn').attr('data-original-title', '新内容').tooltip('update');

Bootstrap4 弹出框

Bootstrap 4 弹出框(Popover)

弹出框是提示框的增强版,支持标题与更多内容。

基础弹出框

<button type="button" class="btn btn-lg btn-danger"
        data-toggle="popover" data-placement="top"
        title="弹出框标题" data-content="弹出框内容。">
  点击触发
</button>

初始化(必须)

$(function () {
  $('[data-toggle="popover"]').popover();
});

方向

data-placement="top"    上方
data-placement="bottom" 下方
data-placement="left"   左侧
data-placement="right"  右侧

触发方式

data-trigger="hover"   悬停
data-trigger="focus"   聚焦
data-trigger="click"   点击(默认)

JS 配置

$('#myPop').popover({
  placement: 'bottom',
  html: true,
  title: '自定义标题',
  content: '<p>支持 HTML 内容</p>',
  trigger: 'click'
});

方法

$('#myPop').popover('show');
$('#myPop').popover('hide');
$('#myPop').popover('toggle');
$('#myPop').popover('dispose');

与 Tooltip 区别

  • Popover 有标题 + 内容两部分
  • Popover 默认点击触发,Tooltip 悬停触发
  • Popover 尺寸更大
  • 两者都依赖 Popper.js 定位

Bootstrap4 滚动监听

Bootstrap 4 滚动监听(Scrollspy)

滚动监听让导航自动高亮当前浏览的页面区块。

完整示例

<body data-spy="scroll" data-target="#navbar-example" data-offset="80">
  <nav id="navbar-example" class="navbar navbar-light bg-light">
    <ul class="nav nav-pills">
      <li class="nav-item"><a class="nav-link" href="#section1">第一节</a></li>
      <li class="nav-item"><a class="nav-link" href="#section2">第二节</a></li>
    </ul>
  </nav>

  <h4 id="section1">第一节内容</h4>
  <p>滚动到这里时,导航高亮"第一节"。</p>
  <h4 id="section2">第二节内容</h4>
  <p>滚动到这里时,导航高亮"第二节"。</p>
</body>

关键点

  • body 设置 data-spy="scroll" 与 data-target
  • 导航链接的 href 对应内容区块 id
  • data-offset 调整触发偏移

嵌套滚动容器

<div data-spy="scroll" data-target="#list-example"
     style="height: 200px; overflow-y: auto;">
  <h4 id="item1">区块 1</h4>
  <h4 id="item2">区块 2</h4>
</div>

JS 初始化

$('body').scrollspy({
  target: '#navbar-example',
  offset: 80
});
// 动态内容更新后刷新
$('[data-spy="scroll"]').each(function () {
  $(this).scrollspy('refresh');
});

Bootstrap4 小工具

Bootstrap 4 小工具(Utilities)

Bootstrap 4 提供丰富的工具类,快速实现间距、显示、对齐、边框等样式。

间距

m-0~5     外边距    p-0~5     内边距
mt-* 上    mb-* 下   ml-* 左   mr-* 右
mx-* 水平  my-* 垂直  auto 自动
示例: mt-3 = margin-top: 1rem; p-2 = padding: 0.5rem;
响应式: mt-md-3、p-lg-4

显示

d-none    隐藏   d-block   块级
d-inline  行内   d-flex    Flex
d-inline-flex   d-md-none  md 以上隐藏

Flex 工具类

d-flex justify-content-center  水平居中
d-flex align-items-center      垂直居中
flex-row / flex-column         方向
flex-fill / flex-grow-1        伸缩
flex-wrap / flex-nowrap        换行
order-0~12                     排序

边框

border           加边框    border-0       去边框
border-top       上边框    border-danger  红边框
rounded          圆角      rounded-circle 圆形
rounded-0        无圆角    rounded-lg     大圆角

阴影(Bootstrap 4.1+)

shadow-none   无阴影
shadow-sm     小阴影
shadow        默认阴影
shadow-lg     大阴影

尺寸

w-25 / w-50 / w-75 / w-100  宽度
h-25 / h-50 / h-75 / h-100  高度
mw-100  最大宽度  mh-100  最大高度

文字

text-left / center / right  对齐
text-lowercase / uppercase / capitalize
font-weight-bold / normal / light
text-truncate   单行省略
text-break      长单词换行

定位

position-relative / absolute / fixed
fixed-top / fixed-bottom  固定定位
sr-only   仅屏幕阅读器可见

Bootstrap 4 Flex

Bootstrap 4 Flex 布局

Bootstrap 4 全面基于 Flexbox,提供完整的 Flex 工具类。

启用 Flex

<div class="d-flex">弹性容器</div>
<div class="d-inline-flex">行内弹性容器</div>
<div class="d-flex d-md-inline-flex">响应式切换</div>

方向

flex-row             水平(默认)
flex-row-reverse     水平反向
flex-column          垂直
flex-column-reverse  垂直反向

主轴对齐

justify-content-start    起始对齐
justify-content-end      末尾对齐
justify-content-center   居中
justify-content-between  两端对齐
justify-content-around   均匀分布

交叉轴对齐

align-items-start     顶部对齐
align-items-center    垂直居中
align-items-end       底部对齐
align-items-stretch   拉伸(默认)
align-items-baseline  基线对齐

排序

<div class="order-3">第三</div>
<div class="order-1">第一</div>
<div class="order-2">第二</div>
<div class="order-first">最前</div>
<div class="order-last">最后</div>

自动边距

<div class="d-flex">
  <div>左</div>
  <div class="ml-auto">推到最右(ml-auto)</div>
</div>

伸缩控制

flex-fill      等宽填充
flex-grow-1    扩展占满
flex-shrink-0  不收缩
flex-wrap      允许换行
flex-nowrap    不换行
flex-wrap-reverse 反向换行

内容换行对齐

align-content-start / center / between / around / stretch

Bootstrap4 多媒体对象

Bootstrap 4 多媒体对象(Media Object)

媒体对象用于构建"图片 + 内容"的常见布局,如评论、帖子、推文等。

基础媒体对象

<div class="media">
  <img src="avatar.jpg" class="mr-3 rounded-circle" alt="头像">
  <div class="media-body">
    <h5 class="mt-0">评论标题</h5>
    <p>这里是评论内容,文字会环绕图片排列。</p>
  </div>
</div>

图片在右

<div class="media">
  <div class="media-body">
    <h5 class="mt-0">内容在左</h5>
    <p>图片放在右侧。</p>
  </div>
  <img src="a.jpg" class="ml-3" alt="右侧图">
</div>

嵌套媒体对象(回复评论)

<div class="media">
  <img src="u1.jpg" class="mr-3" alt="用户1">
  <div class="media-body">
    <h5 class="mt-0">一级评论</h5>
    <p>一级评论内容。</p>
    <!-- 嵌套的二级评论 -->
    <div class="media mt-3">
      <img src="u2.jpg" class="mr-3" alt="用户2">
      <div class="media-body">
        <h5 class="mt-0">二级评论(回复)</h5>
        <p>二级评论内容。</p>
      </div>
    </div>
  </div>
</div>

垂直居中

<div class="media">
  <img src="a.jpg" class="align-self-center mr-3" alt="居中">
  <div class="media-body">
    <p>图片与内容垂直居中。</p>
  </div>
</div>
<!-- 其他: align-self-start / align-self-end -->

列表式媒体对象

<ul class="list-unstyled">
  <li class="media">
    <img src="a1.jpg" class="mr-3" alt="项1">
    <div class="media-body">第一条</div>
  </li>
  <li class="media mt-3">
    <img src="a2.jpg" class="mr-3" alt="项2">
    <div class="media-body">第二条</div>
  </li>
</ul>

与 Bootstrap 5 的区别

Bootstrap 5 移除了 Media 组件,改用 Flex 工具类组合:

<div class="d-flex">
  <img src="a.jpg" class="flex-shrink-0 me-3" alt="图">
  <div>内容</div>
</div>

Bootstrap4 创建一个网页

Bootstrap 4 实战:创建一个完整网页

本节用 Bootstrap 4 搭建一个包含导航栏、轮播、卡片、页脚的完整企业官网首页。

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>示例公司官网</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>

<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">示例公司</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="nav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active"><a class="nav-link" href="#">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="#">产品</a></li>
      <li class="nav-item"><a class="nav-link" href="#">关于我们</a></li>
      <li class="nav-item"><a class="nav-link" href="#">联系我们</a></li>
    </ul>
  </div>
</nav>

<!-- Jumbotron 宣传区 -->
<div class="jumbotron text-center">
  <h1 class="display-4">欢迎来到示例公司</h1>
  <p class="lead">我们用 Bootstrap 4 构建现代化网站。</p>
  <hr class="my-4">
  <p>立即开始体验我们的服务。</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a>
</div>

<!-- 产品卡片区 -->
<div class="container">
  <div class="row">
    <div class="col-md-4 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">产品一</h5>
          <p class="card-text">产品一的简要描述。</p>
          <a href="#" class="btn btn-outline-primary">查看详情</a>
        </div>
      </div>
    </div>
    <div class="col-md-4 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">产品二</h5>
          <p class="card-text">产品二的简要描述。</p>
          <a href="#" class="btn btn-outline-primary">查看详情</a>
        </div>
      </div>
    </div>
    <div class="col-md-4 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">产品三</h5>
          <p class="card-text">产品三的简要描述。</p>
          <a href="#" class="btn btn-outline-primary">查看详情</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 页脚 -->
<footer class="bg-dark text-white text-center py-4 mt-5">
  <p class="mb-0">&copy; 2026 示例公司 版权所有</p>
</footer>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

页面结构总结

  1. 导航栏:navbar-dark + 汉堡折叠菜单
  2. 宣传区:Jumbotron 居中展示品牌口号
  3. 内容区:container + row + col 栅格布局卡片
  4. 页脚:深色背景版权信息

通过组合栅格、组件与工具类,即可快速搭建各种风格的页面。

第 1 / 34 节