13-项目案例：开发神影视频网站

本案例构建一个视频分享网站“神影视频”，使用 Bootstrap 4 搭建首页、列表、详情三大区域，重点练习轮播组件、徽章按钮、彩色数字排名、卡片网格、列表组排行等组件的组合应用。

一、案例概述

1.1 业务背景

视频网站的核心是让用户快速发现想看的内容。本案例通过头部搜索 + 轮播推荐 + 分类筛选 + 视频网格 + 热门排行的布局，把首页设计成”信息密度高但不拥挤”的浏览体验。

1.2 涉及知识点

知识点	在本案例中的作用
轮播 `.carousel`	顶部精选视频
徽章 `.btn` 配色	分类筛选标签
卡片 `.card-header`	视频分类标题
列表组 `.list-group`	热门排行
彩色背景 `.bg-*`	数字排名徽章
transform scale	鼠标悬停图片放大
警告框 `.alert`	网站公告
旋转加载 `.spinner-border`	Loading 状态

1.3 页面结构

神影视频
├── 头部（Logo + 搜索 + 热搜词 + 主导航 + 公告）
├── 轮播（精选视频 3 张）
├── 分类列表（按热播 / 类型 / 地区 / 基因）
├── 视频内容（最新电影 + 最新电视剧 + 热门排行侧边栏）
└── 脚注（关于我们 / 联系我们 / 友情链接）

二、实现步骤拆解

2.1 头部内容

头部由四部分组成：Logo 区、搜索区、热搜词区、主导航 + 用户操作、公告条：

<!--头部内容-->
<div class="header">
    <div class="row no-gutters">
        <div class="col-6">
            <div class="row">
                <div class="col-1"><i class="fa fa-life-ring fa-4x text-success"></i></div>
                <div class="col-4 text-center ml-3">
                    <h3 class="header-size"><a href="#">神影视频</a></h3>
                    <span><a href="#">ShenYingWang</a></span>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="d-flex justify-content-end">
                <div class="form-inline">
                    <input type="search" class="form-control" placeholder="搜索">
                    <a href="#" class="btn btn-success"><i class="fa fa-search"></i></a>
                </div>
            </div>
            <ul class="nav size1 justify-content-end">
                <li class="nav-item"><a href="#" class="nav-link">三生三世十里桃花</a></li>
                <li class="nav-item"><a href="#" class="nav-link">仙剑奇侠传</a></li>
                <li class="nav-item"><a href="#" class="nav-link">诛仙</a></li>
            </ul>
        </div>
    </div>
    <div class="row no-gutters mt-2">
        <div class="col-6">
            <a href="#" class="btn btn-warning">首页</a>
            <a href="#" class="btn btn-warning">电影</a>
            <a href="#" class="btn btn-warning">电视剧</a>
            <a href="#" class="btn btn-warning">动漫</a>
            <a href="#" class="btn btn-warning">综艺</a>
        </div>
        <div class="col-6 text-right">
            <a href="#" class="btn btn-warning">登陆</a>
            <a href="#" class="btn btn-warning">注册</a>
        </div>
    </div>
    <div class="alert alert-success mt-3">
        <div class="spinner-border spinner-border-sm text-info">
            <span class="sr-only">Loading...</span>
        </div>
        如果您喜欢神影视频，请把它推荐给更多的人！
    </div>
</div>

2.2 轮播

<div id="Carousel" class="carousel slide" data-ride="carousel">
    <!--标识图标-->
    <ol class="carousel-indicators">
        <li data-target="#Carousel" data-slide-to="0" class="active"></li>
        <li data-target="#Carousel" data-slide-to="1"></li>
        <li data-target="#Carousel" data-slide-to="2"></li>
    </ol>
    <!--幻灯片-->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1593685324,2253220400&fm=26&gp=0.jpg" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593167388848&di=97b4ec2057be18432050c6d4cace0c2b&imgtype=0&src=http%3A%2F%2Fmobimg.b-cdn.net%2Fpic%2Fv2%2Fgallery%2Fpreview%2Felovek-pauk_spider_man-kino-17200.jpg" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593167388848&di=96233d5c01f33d22248d0b54a17a1357&imgtype=0&src=http%3A%2F%2Fwww.fjsen.com%2Fimages%2Fattachement%2Fjpg%2Fsite2%2F20130403%2Fd067e519cb6612c5a9701a.jpg" class="d-block w-100" alt="">
        </div>
    </div>
    <!--控制按钮-->
    <a href="#Carousel" class="carousel-control-prev" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a href="#Carousel" class="carousel-control-next" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

2.3 分类列表

按”热播排行、类型、地区、电影基因”四个维度提供筛选：

<div class="row my-3">
    <div class="col-4">
        <h5 class="card-header">按热播排行</h5>
        <div class="p-1 bg-white">
            <a href="javascript:;" class="btn color4">本周最火</a>
            <a href="javascript:;" class="btn color4">历史最火</a>
            <a href="javascript:;" class="btn color4">最新上映</a>
            <a href="javascript:;" class="btn color4">评分最高</a>
            <a href="javascript:;" class="btn color4">女性专场</a>
            <a href="javascript:;" class="btn color4">罪恶题材</a>
        </div>
    </div>
    <div class="col-4">
        <h5 class="card-header">按类型</h5>
        <div class="p-1 bg-white">
            <a href="javascript:;" class="btn color4">爱情</a>
            <a href="javascript:;" class="btn color4">动作</a>
            <a href="javascript:;" class="btn color4">喜剧</a>
            <a href="javascript:;" class="btn color4">惊悚</a>
            <a href="javascript:;" class="btn color4">恐怖</a>
            <a href="javascript:;" class="btn color4">悬疑</a>
            <a href="javascript:;" class="btn color4">科幻</a>
            <a href="javascript:;" class="btn color4">历史</a>
            <a href="javascript:;" class="btn color4">灾难</a>
            <a href="javascript:;" class="btn color4">经典</a>
        </div>
    </div>
    <div class="col-2">
        <h5 class="card-header">按地区</h5>
        <div class="p-1 bg-white">
            <a href="javascript:;" class="btn color4">内地</a>
            <a href="javascript:;" class="btn color4">港台</a>
            <a href="javascript:;" class="btn color4">欧美</a>
        </div>
    </div>
    <div class="col-2">
        <h5 class="card-header">按电影基因</h5>
        <div class="p-1 bg-white">
            <a href="javascript:;" class="btn color4">抗日</a>
            <a href="javascript:;" class="btn color4">间谍</a>
            <a href="javascript:;" class="btn color4">硬汉</a>
            <a href="javascript:;" class="btn btn-outline-success btn-sm">更多</a>
        </div>
    </div>
</div>

2.4 视频网格 + 热门排行

主体 9/12 + 侧栏 3/12 是常见的”内容 + 排行榜”布局：

<div class="row pl-3 scale">
    <div class="col-9 bg-white pt-3">
        <!--最新电影-->
        <div class="d-flex justify-content-between">
            <div><h3><div class="border1 mr-2"></div>最新电影</h3></div>
            <div><a href="javascript:;" class="btn btn-outline-danger btn-sm">更多</a></div>
        </div>
        <div class="row no-gutters">
            <div class="col-3 p-1">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593168495263&di=b7e38bc5756f8e88529be2bc2c14a20b&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F869200af6120b5d7b53b68efa33668fccacd59c0.jpg" class="img-fluid" alt="">
                <h5 class="color1">绿巨人2</h5>
                <p class="color2">最帅绿巨人诺顿</p>
            </div>
            <!-- 4 张缩略图 -->
        </div>
        <!--最新电视剧：同结构-->
    </div>
    <div class="col-3">
        <div><h4><i class="fa fa-fire mr-2 text-danger"></i>最热电影</h4></div>
        <div class="list-group list-group-flush mt-3">
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number1 mr-3">1</span><b class="color3">老师好</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number1 mr-3">2</span><b class="color3">笑刀江湖</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number1 mr-3">3</span><b class="color3">流浪地球</b>
            </a>
            <a href="javascript:;" class="list-group-item list-group-item-action list-group-item-light">
                <span class="number3 mr-3">4</span><b class="color3">人间喜剧</b>
            </a>
            <!-- 5-8 名 -->
        </div>
        <div class="mt-4 mb-3"><h4><i class="fa fa-fire mr-2 text-primary"></i>最热电视剧</h4></div>
        <div class="list-group list-group-flush">
            <!-- 同上 -->
        </div>
    </div>
</div>

2.5 底部脚注

<div class="footer mt-4 py-4">
    <ul class="nav justify-content-center">
        <li class="nav-item"><a href="javascript:;" class="nav-link active">关于我们</a></li>
        <li class="nav-item"><a href="javascript:;" class="nav-link">|</a></li>
        <li class="nav-item"><a href="javascript:;" class="nav-link">联系我们</a></li>
        <li class="nav-item"><a href="javascript:;" class="nav-link">|</a></li>
        <li class="nav-item"><a href="javascript:;" class="nav-link">诚聘英才</a></li>
        <li class="nav-item"><a href="javascript:;" class="nav-link">|</a></li>
        <li class="nav-item"><a href="javascript:;" class="nav-link">友情链接</a></li>
    </ul>
    <div class="text-center size2">电影卫星频道节目制作中心</div>
</div>

三、核心 CSS

body{ background: #ececec; font-family: 微软雅黑; }
.header-size{ font-size: 2rem; }
.size1{ font-size: 0.8rem; }
.carousel-item img{ height: 500px; }
.color4{ font-size: 0.9rem; }
.color4:hover{ background: #00cc00; color: white; }
.card-header{ border: 0; background: #dedede; font-size: 1rem; border-left: 3px solid #00cc00; }
.color1{ font-size: 1rem; font-weight: bold; margin: 10px 0 5px; }
.color1:hover{ color: red; }
.scale img:hover{ transform: scale(1.05); }
.color2{ font-size: 0.8rem; color: grey; }
.color2:hover{ color: black; }
.number1{ padding: 0.3rem 0.65rem; background: red; color: white; font-size: 12px; }
.number2{ padding: 0.3rem 0.65rem; background: blue; color: white; font-size: 12px; }
.number3{ padding: 0.3rem 0.65rem; background: #ffac2b; color: white; font-size: 12px; }
.border1{ height: 20px; display: inline-block; border: 3px solid red; }
.border2{ height: 20px; display: inline-block; border: 3px solid blue; }
.list-group-item{ padding: 0.5rem 1rem; }
.color3{ font-size: 1rem; color: black; }
.color3:hover{ color: red; }
.footer{ border-top: 2px solid white; }
.footer a, .size2{ font-size: 0.8rem; color: black; }
.footer a:hover{ color: red; }