引导新闻模板 - HTML

简介

引导新闻模板是一种常用的新闻网站模板，它通常应用于政治、经济和社会领域的新闻报道。引导新闻模板提供了一个简单且易于维护的框架，使得网站管理员可以快速地增加、修改和删除新闻文章。

结构

引导新闻模板通常由三个主要元素构成：

1.导航栏

导航栏通常位于网站的顶部，并且包含首页、新闻分类、搜索和用户登录等主要链接。导航栏通常使用Bootstrap框架来创建，这使得它易于设计和维护。

导航栏代码

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</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">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">World News</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Politics</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Business</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sports</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Weather</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Science</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Culture</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Health</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Opinion</a>
      </li>
    </ul>
  </div>
</nav>

2.主体

引导新闻模板的主体通常由文章列表和相关信息组成，例如文章的发布日期、作者和查看次数等。主体通常使用网格系统来分隔，这使得它可以在不同的设备和屏幕尺寸下呈现出美观和一致的效果。

主体代码

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="card mb-4">
        <img class="card-img-top" src="https://via.placeholder.com/750x300" alt="Card image cap">
        <div class="card-body">
          <h2 class="card-title">Article Title</h2>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus urna eget ligula varius sodales. Donec tempor magna sed orci ultrices, sed posuere odio iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sagittis imperdiet quam id euismod. Sed euismod felis ac aliquam elementum.</p>
          <a href="#" class="btn btn-primary">Read More &rarr;</a>
        </div>
        <div class="card-footer text-muted">
          Posted on January 1, 2019 by
          <a href="#">Author</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card mb-4">
        <div class="card-body">
          <h4 class="card-title">Search</h4>
          <form>
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search for...">
              <span class="input-group-btn">
                <button class="btn btn-secondary" type="button">Go!</button>
              </span>
            </div>
          </form>
        </div>
      </div>
      <div class="card mb-4">
        <div class="card-body">
          <h4 class="card-title">Categories</h4>
          <div class="row">
            <div class="col-lg-6">
              <ul class="list-unstyled mb-0">
                <li>
                  <a href="#">World News</a>
                </li>
                <li>
                  <a href="#">Politics</a>
                </li>
                <li>
                  <a href="#">Business</a>
                </li>
              </ul>
            </div>
            <div class="col-lg-6">
              <ul class="list-unstyled mb-0">
                <li>
                  <a href="#">Sports</a>
                </li>
                <li>
                  <a href="#">Weather</a>
                </li>
                <li>
                  <a href="#">Science</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="card mb-4">
        <div class="card-body">
          <h4 class="card-title">About</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus urna eget ligula varius sodales. Donec tempor magna sed orci ultrices, sed posuere odio iaculis.</p>
          <a href="#" class="btn btn-primary">Learn More &rarr;</a>
        </div>
      </div>
    </div>
  </div>
</div>

3.页脚

引导新闻模板的页脚通常包含一些版权声明、联系方式和社交媒体链接等。页脚通常使用Bootstrap框架来创建，这使得它易于设计和维护。

页脚代码

<footer class="py-4 bg-light">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <ul class="list-inline">
          <li class="list-inline-item">
            <a href="#">Home</a>
          </li>
          <li class="list-inline-item">
            <a href="#">World News</a>
          </li>
          <li class="list-inline-item">
            <a href="#">Politics</a>
          </li>
          <li class="list-inline-item">
            <a href="#">Business</a>
          </li>
          <li class="list-inline-item">
            <a href="#">Sports</a>
          </li>
          <li class="list-inline-item">
            <a href="#">Weather</a>
          </li>
          <li class="list-inline-item">
            <a href="#">Science</a>
          </li>
          <li class="list-inline-item">
            <a href="#">Culture</a>
          </li>
          <li class="list-inline-item">
            <a href="#">Health</a>
          </li>
          <li class="list-inline-item">
            <a href="#">Opinion</a>
          </li>
        </ul>
      </div>
      <div class="col-md-6">
        <ul class="list-inline float-right">
          <li class="list-inline-item">
            <a href="#">Contact Us</a>
          </li>
          <li class="list-inline-item">
            <a href="#">Privacy Policy</a>
          </li>
          <li class="list-inline-item">
            <a href="#">Terms of Use</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>

总结

引导新闻模板是一种通用的新闻网站模板，它提供了一个易于维护和修改的框架。引导新闻模板通常由导航栏、主体和页脚三个主要元素构成。导航栏和页脚通常使用Bootstrap框架来创建，主体通常使用网格系统来分隔。引导新闻模板可以帮助网站管理员快速地创建新的文章和分类，并且可以轻松地进行修改和删除。