什么是 Bootstrap 扁平化模板？
Bootstrap 扁平化模板就是利用 Bootstrap 框架作为基础，并遵循扁平化设计理念创建的网站模板。
（图片来源网络，侵删）
- Bootstrap: 一个流行的前端框架，提供了响应式布局、预置的 CSS 组件（导航栏、按钮、模态框等）和 JavaScript 插件，能极大加速开发。
- 扁平化设计: 一种摒弃了多余的装饰（如渐变、阴影、纹理、3D 效果），转而使用简洁的二维元素、清晰的排版和大胆色彩的设计风格，其核心是内容优先，让用户更专注于信息本身。
结合两者的优势：
- 快速开发： 利用 Bootstrap 的组件和栅格系统，可以快速搭建出结构清晰、响应式的页面框架。
- 现代美观： 通过自定义 CSS，去除 Bootstrap 默认的“毛玻璃”和阴影效果，赋予其扁平化、清爽的视觉风格。
- 一致性与专业性： Bootstrap 提供了一套统一的设计规范，扁平化设计则让界面看起来更干净、更现代。
如何将 Bootstrap 改造成扁平化风格？（核心设计要点）
要创建一个扁平化风格的 Bootstrap 网站，关键在于覆盖或重写 Bootstrap 的部分默认样式，以下是几个核心的改造步骤：
按钮的扁平化
Bootstrap 默认按钮有渐变背景和内阴影，扁平化按钮应该是纯色、无边框或只有细边框。
示例代码：
（图片来源网络，侵删）
/* 默认按钮样式改造 */
.btn {
border: none; /* 移除默认边框 */
border-radius: 4px; /* 可选：轻微圆角，完全直角也行 */
box-shadow: none; /* 移除默认阴影 */
font-weight: normal; /* 字体不加粗，更轻盈 */
}
/* 不同颜色按钮的扁平化样式 */
.btn-primary {
background-color: #007bff; /* 使用纯色代替渐变 */
}
.btn-primary:hover {
background-color: #0069d9; /* 悬停时颜色变深，代替阴影效果 */
}
.btn-secondary {
background-color: #6c757d;
}
.btn-secondary:hover {
background-color: #5a6268;
}
/* ... 其他颜色按钮同理 */
卡片 的扁平化
Bootstrap 的卡片有很明显的阴影和圆角，这在扁平化设计中需要弱化或移除。
示例代码：
/* 默认卡片样式改造 */
.card {
border: 1px solid #e0e0e0; /* 使用非常细、浅色的边框代替阴影 */
border-radius: 0; /* 或者使用很小的圆角，如 4px */
box-shadow: none;
}
.card:hover {
border-color: #bbbbbb; /* 悬停时边框颜色稍微变深，作为交互反馈 */
/* 也可以添加一个极细微的阴影，但不是必须的 */
/* box-shadow: 0 2px 8px rgba(0,0,0,0.05); */
}
表单元素的扁平化
输入框、下拉菜单等需要去除边框阴影，使用细边框。
示例代码：
/* 输入框样式 */
.form-control {
border: 1px solid #ccc; /* 细边框 */
border-radius: 4px; /* 可选：轻微圆角 */
box-shadow: none;
}
.form-control:focus {
border-color: #80bdff; /* 聚焦时改变边框颜色 */
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Bootstrap 默认的聚焦阴影，可以移除 */
/* 如果你想要完全扁平，可以注释掉上面这行 */
}
导航栏 的扁平化
导航栏通常需要一个背景色,去掉阴影。
示例代码：
/* 导航栏样式 */
.navbar {
border: none;
border-radius: 0; /* 通常导航栏是直角的 */
box-shadow: none;
background-color: #f8f9fa; /* 使用一个浅色背景 */
}
.navbar-light .navbar-nav .nav-link {
color: #333; /* 深色文字 */
}
.navbar-light .navbar-nav .nav-link:hover {
color: #007bff; /* 悬停时改变颜色 */
}
配色方案
扁平化设计通常使用主色、辅助色、中性色。
- 主色: 选择一个或两个作为品牌核心的颜色，如蓝色、绿色、橙色。
- 辅助色: 用于强调、警告或成功等状态。
- 中性色: 大量使用白色、浅灰色（
#f8f9fa,#e9ecef）作为背景和文字颜色，保证界面清爽。
推荐配色方案示例：
- 蓝色主题:
#007bff(主),#28a745(成功),#dc3545(危险),#ffc107(警告),#6c757d(次要) - 绿色主题:
#28a745(主),#17a2b8(信息),#fd7e14(警告),#e83e8c(危险)
精选的 Bootstrap 扁平化模板资源
如果你不想从头开始改造,可以直接使用已经扁平化处理的 Bootstrap 模板。
官方资源
- Bootstrap 官方示例: https://getbootstrap.com/docs/5.3/examples/
- Dashboard 示例: 非常接近扁平化设计，清爽的卡片布局和侧边栏，是很好的起点。
- Product 示例: 简洁的布局，易于改造为扁平化风格。
第三方模板网站
这些网站提供了大量基于 Bootstrap 的免费和付费模板，很多都采用了扁平化或类似 Material Design 的风格。
- BootstrapMade: https://bootstrapmade.com/
- 提供大量高质量的免费 Bootstrap 模板，搜索 "flat" 或查看其分类，很容易找到符合你需求的模板。"BizPage", "DevFolio" 等。
- ThemeForest (Envato Market): https://themeforest.net/
最大的付费模板市场,有海量基于 Bootstrap 的专业模板，虽然付费，但设计质量和功能都非常出色，搜索 "Bootstrap Flat" 可以找到很多结果。
- Colorlib: https://colorlib.com/wp/bootstrap-templates/
一个专门收集 Bootstrap 模板的博客网站，分类清晰，有很多免费的扁平化风格模板推荐。
- Start Bootstrap: https://startbootstrap.com/
- 另一个提供高质量免费 Bootstrap 模板的网站，其模板设计通常非常现代、简洁，很多都带有扁平化特征。"SB Admin" 系列的管理后台模板。
动手实践：创建一个简单的扁平化页面
下面是一个完整的 HTML 示例，展示了如何结合 Bootstrap 和自定义 CSS 来创建一个扁平化风格的登录页面。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">扁平化登录页面</title>
<!-- 1. 引入 Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 2. 引入 Bootstrap Icons (可选) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<style>
/* 3. 自定义扁平化样式 */
body {
background-color: #f5f7fa; /* 使用浅灰色背景 */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.login-container {
max-width: 420px;
margin: 100px auto;
padding: 20px;
}
.login-card {
border: 1px solid #e0e0e0; /* 细边框代替阴影 */
border-radius: 8px; /* 轻微圆角，可根据喜好调整 */
box-shadow: none; /* 移除阴影 */
padding: 40px;
}
.login-card .card-title {
color: #333;
font-weight: 500;
margin-bottom: 30px;
text-align: center;
}
.form-control {
border: 1px solid #ccc;
border-radius: 6px;
padding: 12px 15px;
margin-bottom: 20px;
box-shadow: none;
}
.form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15); /* Bootstrap 默认聚焦效果，可以保留或移除 */
}
.btn-login {
width: 100%;
padding: 12px;
border: none;
border-radius: 6px;
background-color: #007bff;
color: white;
font-size: 16px;
font-weight: 500;
transition: background-color 0.2s ease-in-out;
}
.btn-login:hover {
background-color: #0069d9; /* 悬停时变色 */
color: white;
}
.form-check-input:checked {
background-color: #007bff;
border-color: #007bff;
}
.divider {
text-align: center;
margin: 25px 0;
position: relative;
}
.divider::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background-color: #e0e0e0;
}
.divider span {
background-color: #f5f7fa;
padding: 0 15px;
position: relative;
color: #6c757d;
}
</style>
</head>
<body>
<div class="container login-container">
<div class="card login-card">
<h2 class="card-title">欢迎登录</h2>
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">邮箱地址</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">我们绝不会将您的邮箱分享给任何人。</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">记住我</label>
</div>
<button type="submit" class="btn btn-login">登录</button>
</form>
<div class="divider">
<span>或者</span>
</div>
<div class="d-grid gap-2">
<button class="btn btn-outline-primary" type="button">
<i class="bi bi-google"></i> 使用 Google 登录
</button>
<button class="btn btn-outline-secondary" type="button">
<i class="bi bi-github"></i> 使用 GitHub 登录
</button>
</div>
</div>
</div>
<!-- 4. 引入 Bootstrap JS (可选，但建议引入) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
创建 Bootstrap 扁平化模板，核心在于“减法”——移除 Bootstrap 默认的装饰性样式（阴影、渐变），并通过自定义 CSS 来定义简洁的边框、纯色背景和清晰的排版。
- 对于初学者： 直接使用 BootstrapMade 或 Start Bootstrap 等网站上的现成模板，最快最省力。
- 对于开发者： 从 Bootstrap 官方示例（如 Dashboard）开始，然后应用上面提到的自定义样式进行改造，可以更好地理解扁平化设计的精髓。
希望这份指南能帮助你找到或创造出心仪的 Bootstrap 扁平化模板！
