Bootstrap 5 实战篇：10 分钟拼一个“能看”的公司官网

11-26 335 0 0

系列 ④ | 目标：从 0 到上线，一条复制粘贴流水线，写完直接部署到 GitHub Pages，让老板以为你熬了三天三夜。

1. 实战口号

“不生产代码，只做官方组件的搬运工。”
今天我们把前面学的 navbar + 轮播 + 卡片 + 栅格 + Footer 串成一条“公司首页”流水线。
只要 10 分钟，页面就能跑在 https://你的用户名.github.io 上，手机/电脑都有排面。

2. 文件结构（一眼能看懂）

company-page/
├─ index.html     ← 唯一要编辑的文件
├─ assets/
│  ├─ css/
│  │  └─ style.css   ← 自定义微调（可留空）
│  └─ img/
│     ├─ banner1.jpg
│     ├─ banner2.jpg
│     └─ logo.png
└─ README.md      ← 可选，GitHub 装饰

规则：Bootstrap CDN 全部走 cdn.jsdelivr.net，不下载任何依赖，做到“裸写也能跑”。

3. 快速脚手架：一页六段

区域	class 关键词	组件
① 导航	`navbar`	响应式折叠 + 品牌logo
② 轮播	`carousel`	全屏banner
③ 介绍	`py-5`	标题+副标题
④ 服务	`row-cols-md-3`	卡片*3
⑤ 客户	`row-cols-lg-4`	logo墙
⑥ 页脚	`bg-dark`	版权+社交图标

4. 代码：index.html（可直接抄）

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Acme 科技公司</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 自定义样式：只写“非必要不改” -->
  <link href="assets/css/style.css" rel="stylesheet">
  <!-- 图标库（页脚社交标） -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>

<body>
<!-- ① 导航 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="assets/img/logo.png" height="30"></a>
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navmenu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navmenu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#service">服务</a></li>
        <li class="nav-item"><a class="nav-link" href="#client">客户</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">联系</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- ② 轮播 -->
<div id="banner" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="assets/img/banner1.jpg" class="d-block w-100" alt="">
    </div>
    <div class="carousel-item">
      <img src="assets/img/banner2.jpg" class="d-block w-100" alt="">
    </div>
  </div>
  <!-- 左右箭头 -->
  <button class="carousel-control-prev" data-bs-target="#banner" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" data-bs-target="#banner" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

<!-- ③ 介绍 -->
<section class="py-5">
  <div class="container text-center">
    <h2 class="fw-bold">专注炫酷科技，助力数字化转型</h2>
    <p class="lead text-muted">我们提供一站式解决方案，让老板开心、员工省心、财务放心。</p>
  </div>
</section>

<!-- ④ 服务 -->
<section id="service" class="py-5 bg-light">
  <div class="container">
    <div class="row row-cols-1 row-cols-md-3 g-4">
      <div class="col">
        <div class="card h-100 text-center p-3">
          <i class="bi bi-cloud-upload fs-1 text-primary"></i>
          <h5 class="mt-3">云端部署</h5>
          <p>一键上云，弹性扩容，再也不用管机房空调坏不坏。</p>
        </div>
      </div>
      <div class="col">
        <div class="card h-100 text-center p-3">
          <i class="bi bi-lock fs-1 text-success"></i>
          <h5 class="mt-3">安全加固</h5>
          <p>SSL/TLS、WAF、CDN 全链路防护，黑客只能干瞪眼。</p>
        </div>
      </div>
      <div class="col">
        <div class="card h-100 text-center p-3">
          <i class="bi bi-graph-up fs-1 text-warning"></i>
          <h5 class="mt-3">数据洞察</h5>
          <p>炫酷大屏，实时 KPI，老板看了立刻批预算。</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ⑤ 客户墙 -->
<section id="client" class="py-5">
  <div class="container">
    <h4 class="text-center mb-4">他们也在用</h4>
    <div class="row row-cols-2 row-cols-lg-4 g-4 align-items-center">
      <div class="col text-center"><img src="https://via.placeholder.com/150x60/6c757d/ffffff?text=Logo" class="img-fluid" alt=""></div>
      <!-- 重复3~6个 -->
    </div>
  </div>
</section>

<!-- ⑥ 页脚 -->
<footer class="bg-dark text-white py-4">
  <div class="container text-center">
    <p class="mb-0">© 2024 Acme 科技公司 | 
      <a href="#" class="text-white text-decoration-none"><i class="bi bi-wechat"></i></a>
      <a href="#" class="text-white text-decoration-none ms-2"><i class="bi bi-github"></i></a>
    </p>
  </div>
</footer>

<!-- Bootstrap JS 包（含 Popper） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

5. 上线 3 步走（GitHub Pages 免费）

把 company-page 推到 GitHub

git init
git add .
git commit -m "first"
git remote add origin https://github.com/你的用户名/company-page.git
git push -u origin main

Settings → Pages → Source 选 main 分支 /root → Save
访问 https://你的用户名.github.io，手机扫码也能看 ✅

6. 还能再快？脚手架脚本（30 秒）

懒得手动？用官方官方起始模板+wget：

# 1. 建目录
mkdir company-page && cd company-page
# 2. 抓官方最小模板
wget -O index.html https://getbootstrap.com/docs/5.3/examples/starter-template/
# 3. 把上面六段代码粘进去，完事。

7. 作业：给官网加“暗黑模式”开关

提示：

用 data-bs-theme="dark" 切换
按钮放右上角导航里，JS 一行搞定：
```
document.documentElement.setAttribute('data-bs-theme', 'dark');
```
做完把仓库甩 GitHub！

下集（终章）预告

篇目	剧透
⑤ 避坑篇	一上线就崩？八成是这些骚操作（CDN 被墙、jQuery 残留、权重污染、字体跨域）

快来点个赞吧

编程知识