11-项目案例：设计流行企业网站

本案例使用 Bootstrap 4 构建一个现代化企业官网，包括主页（Hero 大图 + 服务 + 团队 + 评价 + 联系）、侧边导航栏、登录页三个独立页面。重点练习 Jumbotron、卡片、网格、表格、侧边栏折叠以及响应式断点切换。

一、案例概述

1.1 业务背景

企业官网需要在有限空间内同时展示品牌、服务、团队、口碑、联系方式等多种信息。本案例通过清晰的版块划分和一致的视觉系统，让用户5 分钟内就能了解一家公司能提供什么、做过什么、怎么联系。

1.2 涉及知识点

知识点	在本案例中的作用
Jumbotron	顶部 Hero 大图区域
卡片 `.card`	服务、团队成员展示
网格 `.row` `.col-*`	多栏服务/团队排版
表格 `.table`	价格/服务明细
引用 `.blockquote`	客户评价
侧边栏	折叠式导航菜单
表单 `.form-group`	联系页输入
媒体查询	移动端单列响应

1.3 页面结构

企业官网
├── 主页 index.html
│   ├── 顶部导航栏 + 侧边折叠菜单
│   ├── Hero 大图
│   ├── 公司简介
│   ├── 我们的服务（3 栏）
│   ├── 我们的团队（4 栏）
│   ├── 客户评价
│   └── 联系我们
├── 登录页 login.html
│   └── 居中登录表单
└── 侧边导航栏 sidebar.html
    ├── 固定侧边菜单
    └── Toggle 切换按钮

二、实现步骤拆解

2.1 顶部导航栏

<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"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <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>
            <li class="nav-item"><a class="nav-link" href="#">联系我们</a></li>
        </ul>
    </div>
</nav>

2.2 Hero 大图

jumbotron-fluid 让 Hero 容器占满父级宽度，配合背景图与居中文字形成视觉冲击：

<div class="jumbotron jumbotron-fluid text-center"
     style="background-image: url('banner.jpg'); background-size: cover;">
    <div class="container">
        <h1 class="display-4">欢迎来到企业网站</h1>
        <p class="lead">我们提供最优质的服务</p>
    </div>
</div>

2.3 公司简介

<div class="container my-5">
    <h2>公司简介</h2>
    <p>我们是一家致力于提供优质服务的企业...</p>
</div>

2.4 服务展示

通过 3 个等宽 col-md-4 展示三大服务：

<div class="container my-5">
    <h2>我们的服务</h2>
    <div class="row">
        <div class="col-md-4">
            <h3>服务1</h3>
            <p>描述服务1的内容...</p>
        </div>
        <div class="col-md-4">
            <h3>服务2</h3>
            <p>描述服务2的内容...</p>
        </div>
        <div class="col-md-4">
            <h3>服务3</h3>
            <p>描述服务3的内容...</p>
        </div>
    </div>
</div>

2.5 团队成员

<div class="container my-5">
    <h2>我们的团队</h2>
    <div class="row">
        <div class="col-md-3">
            <img src="team1.jpg" class="img-fluid rounded-circle" alt="团队成员1">
            <h4>成员1</h4>
            <p>职位1</p>
        </div>
        <div class="col-md-3">
            <img src="team2.jpg" class="img-fluid rounded-circle" alt="团队成员2">
            <h4>成员2</h4>
            <p>职位2</p>
        </div>
        <!-- 更多团队成员 -->
    </div>
</div>

2.6 客户评价

<div class="container my-5">
    <h2>客户评价</h2>
    <blockquote class="blockquote">
        <p class="mb-0">这是我们最满意的服务体验...</p>
        <footer class="blockquote-footer">客户1</footer>
    </blockquote>
</div>

2.7 联系表单

<div class="container my-5">
    <h2>联系我们</h2>
    <form>
        <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" class="form-control" id="name" placeholder="输入您的姓名">
        </div>
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" class="form-control" id="email" placeholder="输入您的邮箱">
        </div>
        <div class="form-group">
            <label for="message">信息</label>
            <textarea class="form-control" id="message" rows="5" placeholder="输入您的信息"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>
</div>

<footer class="bg-dark text-white text-center py-3">
    <p>&copy; 2024 企业网站. 版权所有.</p>
</footer>

2.8 侧边导航栏

通过 #wrapper.toggled 控制侧边栏的展开/收起状态：

<div class="d-flex" id="wrapper">
    <div class="bg-light border-right" id="sidebar-wrapper">
        <div class="sidebar-heading">侧边导航栏</div>
        <div class="list-group list-group-flush">
            <a href="#" class="list-group-item list-group-item-action bg-light">主页</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">关于我们</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">服务</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">团队</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">联系我们</a>
        </div>
    </div>
    <div id="page-content-wrapper">
        <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
            <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>
        </nav>
        <div class="container-fluid">
            <h1 class="mt-4">侧边导航示例</h1>
            <p>这是带有侧边导航栏的页面内容...</p>
        </div>
    </div>
</div>

<script>
    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
</script>

2.9 登录页

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <h2 class="text-center my-5">用户登录</h2>
            <form>
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" id="username" placeholder="输入用户名">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password" placeholder="输入密码">
                </div>
                <button type="submit" class="btn btn-primary btn-block">登录</button>
            </form>
        </div>
    </div>
</div>

三、核心 CSS

/* 主页样式 */
.jumbotron{ color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
.navbar-brand{ font-weight: bold; }
footer{ background-color: #343a40; }
footer p{ margin: 0; padding: 10px 0; }
.img-fluid.rounded-circle{ border: 3px solid #fff; }
blockquote{ font-size: 1.2em; border-left: 5px solid #007bff; padding-left: 10px; }

/* 侧边栏样式 */
#wrapper{ display: flex; width: 100%; }
#sidebar-wrapper{
    width: 250px; position: fixed; top: 0; left: 0; height: 100%;
    z-index: 1000; background-color: #f8f9fa;
    border-right: 1px solid #ddd; transition: all 0.3s;
}
#sidebar-wrapper .sidebar-heading{
    padding: 0.875rem 1.25rem; font-size: 1.2rem; text-align: center;
    background-color: #343a40; color: white;
}
#sidebar-wrapper .list-group-item{
    padding: 15px 20px; border: none; font-size: 1rem;
    color: #333; background-color: #f8f9fa;
}
#sidebar-wrapper .list-group-item:hover{ background-color: #007bff; color: white; }
#page-content-wrapper{ flex: 1; padding: 20px; margin-left: 250px; }
#wrapper.toggled #sidebar-wrapper{ margin-left: -250px; }

/* 登录页样式 */
body{ background-color: #f0f2f5; }
.container{ margin-top: 100px; max-width: 500px; }
h2{ color: #007bff; }
.btn-primary{ background-color: #007bff; border-color: #007bff; }
.form-control{ border-radius: 5px; }
.form-group{ margin-bottom: 20px; }

四、关键技术解析

4.1 Jumbotron 全屏背景

jumbotron-fluid + 内联 background-image + background-size: cover 是 Bootstrap 4 中最简洁的全屏 Hero 写法。如果要兼顾响应式，可以用 <picture> 或媒体查询切换不同背景图。

4.2 侧边栏折叠动画

通过 #wrapper.toggled #sidebar-wrapper { margin-left: -250px; } 实现平滑收起。配合 transition: all 0.3s 即可获得”抽屉式”动画。jQuery 的 toggleClass 比手动 add/remove 更简洁。