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">×</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">×</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">© 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>
页面结构总结
- 导航栏:navbar-dark + 汉堡折叠菜单
- 宣传区:Jumbotron 居中展示品牌口号
- 内容区:container + row + col 栅格布局卡片
- 页脚:深色背景版权信息
通过组合栅格、组件与工具类,即可快速搭建各种风格的页面。