您可以直接复制下面的代码，保存为 .html 文件,然后在浏览器中打开即可看到效果。

bootstrap设计新闻网页模板
（图片来源网络，侵删）

新闻网页模板特点

  • 响应式设计: 完美适配桌面、平板和手机。
  • 现代化外观: 使用了 Bootstrap 5 的卡片、网格和间距系统,界面清爽整洁。
  • 功能完整: 包含了搜索、分类导航、热门文章、标签等常见新闻网站元素。
  • 易于定制: 所有样式和内容都易于修改和扩展。

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">每日新闻网 - 最新最全的新闻资讯</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
    <style>
        /* 自定义样式 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            color: #333;
        }
        .navbar-brand {
            font-weight: bold;
            font-size: 1.5rem;
        }
        .carousel-item img {
            object-fit: cover;
            height: 500px;
        }
        .main-news-img {
            height: 250px;
            object-fit: cover;
        }
        .news-card {
            transition: transform 0.3s ease;
            height: 100%;
        }
        .news-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .news-card img {
            height: 180px;
            object-fit: cover;
        }
        .category-badge {
            font-size: 0.8rem;
            text-transform: uppercase;
        }
        .sidebar-widget {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        .footer {
            background-color: #212529;
            color: #adb5bd;
            padding: 3rem 0 1rem;
            margin-top: 4rem;
        }
        .footer a {
            color: #adb5bd;
            text-decoration: none;
        }
        .footer a:hover {
            color: #fff;
        }
        .tag-cloud a {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            margin: 0.25rem;
            background-color: #e9ecef;
            border-radius: 15px;
            font-size: 0.875rem;
            transition: all 0.2s;
        }
        .tag-cloud a:hover {
            background-color: #0d6efd;
            color: white;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <div class="container">
        <a class="navbar-brand" href="#">
            <i class="bi bi-newspaper"></i> 每日新闻网
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active" 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>
                <li class="nav-item">
                    <a class="nav-link" href="#">娱乐</a>
                </li>
            </ul>
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="搜索新闻..." aria-label="Search">
                <button class="btn btn-outline-light" type="submit">搜索</button>
            </form>
        </div>
    </div>
</nav>
<!-- 轮播图 (头条新闻) -->
<div id="mainCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://images.unsplash.com/photo-1504711434969-e33886168f5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" class="d-block w-100" alt="头条新闻 1">
            <div class="carousel-caption d-none d-md-block">
                <h2>全球科技峰会开幕，人工智能成焦点</h2>
                <p>来自世界各地的科技领袖齐聚一堂，共同探讨AI的未来发展与伦理挑战。</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://images.unsplash.com/photo-1511795409834-ef046d8a6a7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" class="d-block w-100" alt="头条新闻 2">
            <div class="carousel-caption d-none d-md-block">
                <h2>新型环保材料取得重大突破</h2>
                <p>科学家研发出可完全降解的塑料替代品，有望解决全球“白色污染”难题。</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://images.unsplash.com/photo-1551698618-1dfe5d97d256?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" class="d-block w-100" alt="头条新闻 3">
            <div class="carousel-caption d-none d-md-block">
                <h2>国际体育赛事精彩纷呈</h2>
                <p>为期两周的国际友好运动会落下帷幕，多项世界纪录被刷新。</p>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>
<!-- 主要内容区 -->
<div class="container my-5">
    <div class="row">
        <!-- 左侧新闻列表 -->
        <div class="col-lg-8">
            <!-- 分类标题 -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>最新资讯</h2>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-primary active">全部</button>
                    <button type="button" class="btn btn-outline-primary">国内</button>
                    <button type="button" class="btn btn-outline-primary">国际</button>
                </div>
            </div>
            <!-- 新闻卡片列表 -->
            <div class="row g-4">
                <!-- 新闻卡片 1 -->
                <div class="col-md-6">
                    <div class="card news-card">
                        <img src="https://images.unsplash.com/photo-1581091225534-c29f4a1aa062?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" class="card-img-top" alt="新闻图片">
                        <div class="card-body">
                            <span class="badge bg-primary category-badge">科技</span>
                            <h5 class="card-title mt-2">量子计算领域迎来新里程碑</h5>
                            <p class="card-text text-muted small">研究团队宣布成功构建了具有1000个量子比特的处理器，为解决复杂问题开辟了新道路。</p>
                            <a href="#" class="btn btn-sm btn-outline-primary">阅读更多</a>
                        </div>
                        <div class="card-footer bg-white border-top-0 d-flex justify-content-between align-items-center">
                            <small class="text-muted"><i class="bi bi-person"></i> 张三</small>
                            <small class="text-muted"><i class="bi bi-clock"></i> 2小时前</small>
                        </div>
                    </div>
                </div>
                <!-- 新闻卡片 2 -->
                <div class="col-md-6">
                    <div class="card news-card">
                        <img src="https://images.unsplash.com/photo-1476719478636-384411b5ce1b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" class="card-img-top" alt="新闻图片">
                        <div class="card-body">
                            <span class="badge bg-success category-badge">财经</span>
                            <h5 class="card-title mt-2">全球股市创年内新高</h5>
                            <p class="card-text text-muted small">受乐观经济数据和企业财报提振，主要股指纷纷上扬，投资者信心持续恢复。</p>
                            <a href="#" class="btn btn-sm btn-outline-primary">阅读更多</a>
                        </div>
                        <div class="card-footer bg-white border-top-0 d-flex justify-content-between align-items-center">
                            <small class="text-muted"><i class="bi bi-person"></i> 李四</small>
                            <small class="text-muted"><i class="bi bi-clock"></i> 5小时前</small>
                        </div>
                    </div>
                </div>
                <!-- 新闻卡片 3 -->
                <div class="col-md-6">
                    <div class="card news-card">
                        <img src="https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" class="card-img-top" alt="新闻图片">
                        <div class="card-body">
                            <span class="badge bg-warning category-badge">体育</span>
                            <h5 class="card-title mt-2">国家队锁定世界杯参赛资格</h5>
                            <p class="card-text text-muted small">在昨晚的关键战役中，国家队以2:0战胜对手，提前一轮晋级下一阶段。</p>
                            <a href="#" class="btn btn-sm btn-outline-primary">阅读更多</a>
                        </div>
                        <div class="card-footer bg-white border-top-0 d-flex justify-content-between align-items-center">
                            <small class="text-muted"><i class="bi bi-person"></i> 王五</small>
                            <small class="text-muted"><i class="bi bi-clock"></i> 1天前</small>
                        </div>
                    </div>
                </div>
                <!-- 新闻卡片 4 -->
                <div class="col-md-6">
                    <div class="card news-card">
                        <img src="https://images.unsplash.com/photo-1541339907198-e08756dedf3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" class="card-img-top" alt="新闻图片">
                        <div class="card-body">
                            <span class="badge bg-info category-badge">文化</span>
                            <h5 class="card-title mt-2">国际艺术节盛大开幕</h5>
                            <p class="card-text text-muted small">来自30多个国家的艺术家齐聚一堂，带来精彩纷呈的戏剧、音乐和舞蹈表演。</p>
                            <a href="#" class="btn btn-sm btn-outline-primary">阅读更多</a>
                        </div>
                        <div class="card-footer bg-white border-top-0 d-flex justify-content-between align-items-center">
                            <small class="text-muted"><i class="bi bi-person"></i> 赵六</small>
                            <small class="text-muted"><i class="bi bi-clock"></i> 1天前</small>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 分页 -->
            <nav aria-label="Page navigation" class="mt-5">
                <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1">上一页</a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
        <!-- 右侧边栏 -->
        <div class="col-lg-4">
            <!-- 热门文章 -->
            <div class="sidebar-widget">
                <h4 class="mb-4">热门文章</h4>
                <ol class="list-group list-group-numbered">
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <div class="fw-bold">1. 如何应对气候变化带来的挑战</div>
                            <small class="text-muted">阅读量 10.2k</small>
                        </div>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <div class="fw-bold">2. 未来十年，这十大职业最吃香</div>
                            <small class="text-muted">阅读量 8.5k</small>
                        </div>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <div class="fw-bold">3. 健康饮食的五大误区</div>
                            <small class="text-muted">阅读量 7.1k</small>
                        </div>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <div class="fw-bold">4. 探索火星的最新发现</div>
                            <small class="text-muted">阅读量 6.8k</small>
                        </div>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <div class="fw-bold">5. 全球经济复苏的信号</div>
                            <small class="text-muted">阅读量 5.5k</small>
                        </div>
                    </li>
                </ol>
            </div>
            <!-- 标签云 -->
            <div class="sidebar-widget">
                <h4 class="mb-4">热门标签</h4>
                <div class="tag-cloud">
                    <a href="#">人工智能</a>
                    <a href="#">5G</a>
                    <a href="#">新能源</a>
                    <a href="#">奥运会</a>
                    <a href="#">电影</a>
                    <a href="#">股市</a>
                    <a href="#">教育</a>
                    <a href="#">旅游</a>
                    <a href="#">美食</a>
                    <a href="#">健康</a>
                </div>
            </div>
            <!-- 订阅 -->
            <div class="sidebar-widget">
                <h4 class="mb-4">订阅我们</h4>
                <p>订阅我们的新闻简报，每日获取最新资讯。</p>
                <div class="input-group mb-3">
                    <input type="email" class="form-control" placeholder="您的邮箱地址">
                    <button class="btn btn-primary" type="button">订阅</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 页脚 -->
<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h5>关于我们</h5>
                <p>每日新闻网致力于为您提供最新、最全面、最客观的新闻资讯，是您获取信息的第一选择。</p>
            </div>
            <div class="col-md-4">
                <h5>快速链接</h5>
                <ul class="list-unstyled">
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系方式</a></li>
                    <li><a href="#">广告合作</a></li>
                    <li><a href="#">隐私政策</a></li>
                </ul>
            </div>
            <div class="col-md-4">
                <h5>关注我们</h5>
                <div class="d-flex gap-3 fs-4">
                    <a href="#"><i class="bi bi-facebook"></i></a>
                    <a href="#"><i class="bi bi-twitter"></i></a>
                    <a href="#"><i class="bi bi-instagram"></i></a>
                    <a href="#"><i class="bi bi-wechat"></i></a>
                </div>
            </div>
        </div>
        <hr class="my-4" style="border-color: #495057;">
        <div class="text-center">
            <p>&copy; 2025 每日新闻网. All Rights Reserved.</p>
        </div>
    </div>
</footer>
<!-- Bootstrap 5 JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

代码解析

  1. HTML 结构:

    • 使用语义化标签（<nav>, <main>, <footer>）来组织页面结构。
    • 整体布局采用 container -> row -> col 的 Bootstrap 网格系统,确保响应式布局。
    • 区（col-lg-8）和侧边栏（col-lg-4）在大屏幕上并排显示,在小屏幕上自动堆叠。

  2. Bootstrap 组件:

    • <nav>: 创建了顶部导航栏，包含网站Logo、主导航菜单和搜索框,在移动端会折叠成汉堡菜单。
    • <carousel>: 实现了首页的头条新闻轮播图，自动播放,并带有指示器和控制按钮。
    • <card>: 用于展示每条新闻，包含图片、标题、分类标签、作者和发布时间。
    • <pagination>: 创建了底部的分页导航。
    • <list-group>: 在侧边栏用于展示“热门文章”列表。

  3. 自定义 CSS (<style> 标签内):

    • 字体和颜色: 设置了全局字体和基本颜色。
    • 轮播图: 限制了轮播图的高度，并设置了 object-fit: cover 使图片填充且不变形。
    • 新闻卡片: 添加了 hover 效果，当鼠标悬停时卡片会轻微上浮并出现阴影,提升交互体验。
    • 侧边栏组件: 为侧边栏的每个小部件（热门文章、标签云、订阅）设置了背景色和圆角,使其在视觉上与主内容区分开。
    • 标签云: 将标签设计成小圆点样式,并添加了悬停变色效果。
    • 页脚: 使用深色背景和浅色文字,并添加了社交媒体图标链接。

  4. JavaScript:

    bootstrap设计新闻网页模板
    （图片来源网络，侵删）
    • 引入了 Bootstrap 的 JS 包 (bootstrap.bundle.min.js)，这使得轮播图、折叠菜单等交互组件能够正常工作。

如何使用和定制

  1. 更换图片: 将 src 属性中的图片链接替换成您自己的图片 URL。
  2. : 直接修改 HTML 中的文本内容，如新闻标题、作者名等。
  3. 调整颜色: 在 <style> 标签中修改 bg-primary, bg-dark, text-muted 等 Bootstrap 工具类对应的 CSS 变量,或者直接覆盖它们的值。
  4. 添加新模块: 您可以根据需要，在 <main> 或 <footer> 区域使用 Bootstrap 的组件（如 accordion 手风琴、modal 模态框等）添加更多功能。

这个模板为您提供了一个坚实的基础,您可以在此基础上进行快速开发和个性化定制。

bootstrap设计新闻网页模板
（图片来源网络，侵删）