English 中文 العربية 日本語 Português

Bootstrap: 综合实战：企业站首页

最后更新：2026-08-26

1. 本课导读

(1) 前置知识

(2) 🎯 你将学到

(3) 痛点

Alice 面对一个空白页面，需要从零构建一个完整的企业官网首页——导航栏、Hero、特性卡片、团队介绍、联系表单和页脚，每一个模块都需要精心设计，她不知道从何下手。

(4) 解法

本课综合运用前面 18 课所学的知识，从零构建一个完整的企业官网首页。Alice 第一次独立完成一个完整的 Bootstrap 项目——她将使用本节课的模板创建自己的作品集网站。

理解方式： 实战 = 把积木拼成房子——前面学的每个组件都是积木（导航栏、卡片、轮播、表单），现在把它们组合成一个完整的页面。

(5) 收益

Alice 通过本节课的模板，成功搭建出完整的响应式企业站首页，所有模块复用 Bootstrap 组件，代码简洁规范，后续只需替换内容即可投入生产使用。

2. 项目概述

我们将构建一个包含以下模块的企业站首页：

100% 
graph TD
    A[Navbar - 固定顶部] --> B[Hero Banner - 全宽背景 + CTA]
    B --> C[Features - 三卡片]
    C --> D[About - 图文混合]
    D --> E[Team - 四成员卡片]
    E --> F[Contact Form - 表单 + 信息]
    F --> G[Footer - 链接 + 版权]

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：完整企业站模板

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Acme Corp - Home</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>

  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#"><i class="bi bi-box me-2"></i>Acme Corp</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="mainNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#hero">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#team">Team</a></li>
          <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Hero -->
  <section id="hero" class="bg-primary text-white py-5 mt-5">
    <div class="container text-center py-5">
      <h1 class="display-4 fw-bold">Build Faster with Bootstrap</h1>
      <p class="lead mb-4">A modern, responsive framework for your next project.</p>
      <a href="#features" class="btn btn-light btn-lg px-4">Learn More</a>
      <a href="#contact" class="btn btn-outline-light btn-lg px-4 ms-2">Contact Us</a>
    </div>
  </section>

  <!-- Features -->
  <section id="features" class="py-5">
    <div class="container">
      <h2 class="text-center mb-5">Why Choose Us</h2>
      <div class="row g-4">
        <div class="col-md-4">
          <div class="card h-100 text-center p-4 border-0 shadow-sm">
            <i class="bi bi-lightning-charge-fill text-primary fs-1"></i>
            <div class="card-body">
              <h5 class="card-title">Fast Performance</h5>
              <p class="card-text text-body-secondary">Optimized for speed with minimal CSS and JS footprint.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100 text-center p-4 border-0 shadow-sm">
            <i class="bi bi-phone-fill text-primary fs-1"></i>
            <div class="card-body">
              <h5 class="card-title">Fully Responsive</h5>
              <p class="card-text text-body-secondary">Works flawlessly on mobile, tablet, and desktop.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100 text-center p-4 border-0 shadow-sm">
            <i class="bi bi-palette-fill text-primary fs-1"></i>
            <div class="card-body">
              <h5 class="card-title">Customizable</h5>
              <p class="card-text text-body-secondary">Easy to theme with Sass variables and CSS custom properties.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- About -->
  <section class="py-5 bg-light">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-4 mb-lg-0">
          <img src="https://via.placeholder.com/600x400/0d6efd/fff?text=About+Us" class="img-fluid rounded-3 shadow" alt="About">
        </div>
        <div class="col-lg-6">
          <h2>About Our Company</h2>
          <p class="lead text-body-secondary">We have been building web solutions since 2015.</p>
          <p>Our team of experienced developers uses Bootstrap to create fast, reliable, and beautiful web applications for clients worldwide.</p>
          <ul class="list-unstyled">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>200+ projects delivered</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>50+ enterprise clients</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>99% client satisfaction</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- Team -->
  <section id="team" class="py-5">
    <div class="container">
      <h2 class="text-center mb-5">Meet Our Team</h2>
      <div class="row g-4">
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/0d6efd/fff?text=AW" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Alice">
            <div class="card-body">
              <h5 class="card-title">Alice Wang</h5>
              <p class="card-text text-body-secondary">CEO & Founder</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/198754/fff?text=BC" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Bob">
            <div class="card-body">
              <h5 class="card-title">Bob Chen</h5>
              <p class="card-text text-body-secondary">CTO</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/dc3545/fff?text=CL" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Charlie">
            <div class="card-body">
              <h5 class="card-title">Charlie Li</h5>
              <p class="card-text text-body-secondary">Lead Developer</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/6f42c1/fff?text=DY" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Diana">
            <div class="card-body">
              <h5 class="card-title">Diana Yang</h5>
              <p class="card-text text-body-secondary">UX Designer</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact -->
  <section id="contact" class="py-5 bg-light">
    <div class="container">
      <h2 class="text-center mb-5">Get In Touch</h2>
      <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
          <form class="needs-validation" novalidate>
            <div class="mb-3">
              <label class="form-label">Name</label>
              <input type="text" class="form-control" required>
              <div class="invalid-feedback">Please enter your name.</div>
            </div>
            <div class="mb-3">
              <label class="form-label">Email</label>
              <input type="email" class="form-control" required>
              <div class="invalid-feedback">Please enter a valid email.</div>
            </div>
            <div class="mb-3">
              <label class="form-label">Message</label>
              <textarea class="form-control" rows="4" required></textarea>
              <div class="invalid-feedback">Please enter a message.</div>
            </div>
            <button class="btn btn-primary w-100" type="submit">Send Message</button>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-dark text-white py-4">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <p class="mb-0">&copy; 2026 Acme Corp. All rights reserved.</p>
        </div>
        <div class="col-md-6 text-md-end">
          <a href="#" class="text-white me-3"><i class="bi bi-twitter-x"></i></a>
          <a href="#" class="text-white me-3"><i class="bi bi-github"></i></a>
          <a href="#" class="text-white"><i class="bi bi-linkedin"></i></a>
        </div>
      </div>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    (function() {
      var forms = document.querySelectorAll('.needs-validation')
      Array.prototype.slice.call(forms).forEach(function(form) {
        form.addEventListener('submit', function(event) {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }
          form.classList.add('was-validated')
        }, false)
      })
    })()
  </script>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

3. 模块拆解

模块 使用的组件/工具类 技术要点
导航栏 navbar-expand-lg fixed-top scroll 固定在顶部，内部链接 smooth scroll
Hero display-4 lead btn-lg bg-primary 全宽背景 + 双 CTA 按钮
特性 card h-100 shadow-sm row-cols-* 三列等高卡片，零 JS
关于 row align-items-center img-fluid 图文并排，响应式换行
团队 rounded-circle card border-0 响应式四成员网格
表单 form-control needs-validation 完整表单验证
页脚 bg-dark flex text-md-end 响应式左右分栏

4. 模块变体与扩展

▶ 示例：Hero 区域变体

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hero Variations</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <!-- Hero Type 1: Centered Text -->
  <section class="bg-primary text-white py-5">
    <div class="container text-center py-4">
      <h1 class="display-4 fw-bold">Centered Hero</h1>
      <p class="lead mb-4">Simple centered text with CTA buttons.</p>
      <a href="#" class="btn btn-light btn-lg px-4">Get Started</a>
    </div>
  </section>

  <!-- Hero Type 2: Split Image + Text -->
  <section class="bg-dark text-white py-5">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-4 mb-lg-0">
          <h1 class="display-5 fw-bold">Split Layout Hero</h1>
          <p class="lead mb-4">Text on left, image on right. Great for product pages.</p>
          <a href="#" class="btn btn-warning btn-lg">Learn More</a>
        </div>
        <div class="col-lg-6 text-center">
          <i class="bi bi-laptop display-1 text-warning"></i>
        </div>
      </div>
    </div>
  </section>

  <!-- Hero Type 3: Background Image -->
  <section class="py-5" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://via.placeholder.com/1200x400/333/fff?text=BG'); background-size: cover; background-position: center;">
    <div class="container text-center py-5 text-white">
      <p class="text-uppercase small fw-bold text-warning">Limited Offer</p>
      <h1 class="display-4 fw-bold">Background Image Hero</h1>
      <p class="lead mb-4">With overlay gradient for readability.</p>
      <div class="d-flex justify-content-center gap-2">
        <a href="#" class="btn btn-warning btn-lg px-4">Shop Now</a>
        <a href="#" class="btn btn-outline-light btn-lg px-4">Learn More</a>
      </div>
    </div>
  </section>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：带图标特性网格

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Feature Grid with Icons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-5">
    <h2 class="text-center mb-5">Why Choose Us</h2>
    <div class="row g-4">
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-rocket-takeoff fs-2 text-primary"></i>
          </div>
          <h5>Fast Delivery</h5>
          <p class="text-body-secondary small">Lightning-fast deployment with global CDN.</p>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-success bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-shield-check fs-2 text-success"></i>
          </div>
          <h5>Secure</h5>
          <p class="text-body-secondary small">Enterprise-grade security built-in.</p>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-warning bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-graph-up-arrow fs-2 text-warning"></i>
          </div>
          <h5>Scalable</h5>
          <p class="text-body-secondary small">Grows with your business, no limits.</p>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-info bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-headset fs-2 text-info"></i>
          </div>
          <h5>24/7 Support</h5>
          <p class="text-body-secondary small">Round-the-clock expert assistance.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：客户评价轮播

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Testimonial Carousel</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-5">
    <h2 class="text-center mb-5">What Our Clients Say</h2>
    <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="2"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="card text-center p-5 mx-auto border-0" style="max-width:600px;">
            <i class="bi bi-quote fs-1 text-primary"></i>
            <p class="lead mb-4">"Bootstrap transformed our development workflow. We shipped the MVP in 2 weeks instead of 2 months."</p>
            <div class="d-flex align-items-center justify-content-center gap-3">
              <img src="https://via.placeholder.com/60/0d6efd/fff?text=JD" class="rounded-circle" width="50" height="50" alt="Avatar">
              <div class="text-start">
                <strong>John Doe</strong>
                <small class="d-block text-body-secondary">CEO, TechStart</small>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="card text-center p-5 mx-auto border-0" style="max-width:600px;">
            <i class="bi bi-quote fs-1 text-success"></i>
            <p class="lead mb-4">"The responsive components saved us countless hours. Everything just works across all devices."</p>
            <div class="d-flex align-items-center justify-content-center gap-3">
              <img src="https://via.placeholder.com/60/198754/fff?text=JS" class="rounded-circle" width="50" height="50" alt="Avatar">
              <div class="text-start">
                <strong>Jane Smith</strong>
                <small class="d-block text-body-secondary">CTO, WebFlow Inc</small>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="card text-center p-5 mx-auto border-0" style="max-width:600px;">
            <i class="bi bi-quote fs-1 text-warning"></i>
            <p class="lead mb-4">"Sass customization was a game-changer. We matched our brand perfectly without fighting the framework."</p>
            <div class="d-flex align-items-center justify-content-center gap-3">
              <img src="https://via.placeholder.com/60/dc3545/fff?text=MW" class="rounded-circle" width="50" height="50" alt="Avatar">
              <div class="text-start">
                <strong>Mike Wang</strong>
                <small class="d-block text-body-secondary">Lead Dev, DesignCo</small>
              </div>
            </div>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：定价表区域

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pricing Table</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-5">
    <h2 class="text-center mb-2">Pricing Plans</h2>
    <p class="text-center text-body-secondary mb-5">Choose the plan that fits your needs.</p>
    <div class="row g-4 justify-content-center">
      <div class="col-lg-3 col-md-6">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <h5 class="text-body-secondary">Starter</h5>
          <div class="display-4 fw-bold my-3">$9</div>
          <p class="text-body-secondary">per month</p>
          <ul class="list-unstyled text-start mb-4">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>1 project</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>5GB storage</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Basic support</li>
            <li class="mb-2 text-body-tertiary"><i class="bi bi-x-circle-fill me-2"></i>Advanced analytics</li>
          </ul>
          <button class="btn btn-outline-primary w-100 mt-auto">Get Started</button>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card h-100 text-center p-4 border-primary border-2 shadow">
          <div class="badge bg-primary text-uppercase mb-2" style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);">Popular</div>
          <h5>Professional</h5>
          <div class="display-4 fw-bold my-3">$29</div>
          <p class="text-body-secondary">per month</p>
          <ul class="list-unstyled text-start mb-4">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>10 projects</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>50GB storage</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Priority support</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Advanced analytics</li>
          </ul>
          <button class="btn btn-primary w-100 mt-auto">Get Started</button>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <h5 class="text-body-secondary">Enterprise</h5>
          <div class="display-4 fw-bold my-3">$99</div>
          <p class="text-body-secondary">per month</p>
          <ul class="list-unstyled text-start mb-4">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Unlimited projects</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>500GB storage</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>24/7 support</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Custom integrations</li>
          </ul>
          <button class="btn btn-outline-primary w-100 mt-auto">Contact Us</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

(1) 页面组件参考表

区块 推荐组件 工具类组合 响应用法
Hero container + display-* bg-primary text-white py-5 text-center text-md-start
特性卡 card + row-cols-* border-0 shadow-sm h-100 col-12 col-md-4
关于 row align-items-center img-fluid rounded-3 shadow col-lg-6 堆叠
团队 card + rounded-circle border-0 text-center col-6 col-lg-3
评价 carousel + card border-0 p-5 mx-auto d-none d-md-block
定价 card + list-unstyled border-primary shadow col-lg-3 col-md-6
表单 form-control + needs-validation w-100 mb-3 col-md-8 col-lg-6
页脚 bg-dark text-white py-4 text-md-end col-md-6 分栏

(2) 响应式断点参考表

断点 class 前缀 最小宽度 目标设备
X-Small 无前缀 < 576px 手机竖屏
Small sm ≥ 576px 手机横屏
Medium md ≥ 768px 平板
Large lg ≥ 992px 笔记本
X-Large xl ≥ 1200px 桌面显示器
XX-Large xxl ≥ 1400px 宽屏显示器
本模板使用 md / lg MD + LG 覆盖平板到桌面

(3) 配色方案映射表

CSS 变量 默认值 品牌色示例 用途
--bs-primary #0d6efd #6f42c1 (紫色) 主按钮、链接、强调色
--bs-secondary #6c757d #adb5bd (灰色) 次要文本、辅助信息
--bs-success #198754 #20c997 (青色) 成功状态、完成反馈
--bs-warning #ffc107 #fd7e14 (橙色) 警告、注意、促销标记
--bs-danger #dc3545 #e83e8c (粉色) 错误、删除、高风险
--bs-info #0dcaf0 #0d6efd (蓝色) 信息提示、引导标记
--bs-light #f8f9fa #f8f9fa 浅色背景区
--bs-dark #212529 #1a1a2e 页脚、深色区域

❓ 常见问题

Q 这个企业站能直接用于生产吗？
A 模板可直接使用，但建议：(1) 替换 placeholder 图片为真实内容；(2) 根据品牌色修改 Sass 变量；(3) 添加实际的后端表单处理逻辑；(4) 添加 SEO meta 标签。
Q 怎么让页面更加个性化？
A Phase 5 的 Sass 定制可以实现品牌色、自定义字体和全局间距修改。使用 CSS 变量也可快速覆盖 Bootstrap 默认值。
Q 导航栏的 active 状态怎么随滚动更新？
A 需要 JavaScript 监听滚动事件，配合 IntersectionObserver 判断当前可见区块。这不是 Bootstrap 内置功能，但可配合第三方库实现。
Q 这个模板如何适配不同屏幕？
A 模板已内置响应式：col-md-4 在手机端自动堆叠，navbar-expand-lg 在窄屏折叠为汉堡菜单，img-fluid 让图片自适应。要增强适配，可添加 col-12 col-sm-6 col-lg-3 等断点 class 控制不同屏幕下的列数，或用 d-none d-md-block 在手机上隐藏次要模块。
Q 我该在项目中使用多少 Bootstrap 默认样式 vs 自定义 CSS？
A 推荐 80/20 原则：80% 用 Bootstrap 工具类和组件，20% 自定义 CSS。首先用工具类实现布局和间距，用 Sass 变量覆盖品牌色，最后补充自定义 CSS 处理特殊效果。避免将 Bootstrap 项目变成"全自定义 CSS"——那会丧失框架的效率优势。

📖 小节

📝 作业

  1. ⭐ 基于本课模板，创建一个个人作品集主页：替换品牌名为你的名字，Hero 部分改成"Hi, I'm [你的名字]"，特性部分改成你的技能标签，团队部分改成你的项目展示。
  2. ⭐⭐ 在模板中新增一个 "Testimonials"（客户评价）轮播模块，使用 carousel + card 组合。
  3. ⭐⭐⭐ 添加滚动动画：使用 Bootstrap 的 data-bs-* 属性或简单的 CSS @keyframes，让页面模块在加载时淡入。

上一课： 辅助工具类 · 下一课： Sass 定制

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏