📌  相关文章
📜  bootstrap 4 基本结构 - Html (1)

📅  最后修改于: 2023-12-03 14:59:32.699000             🧑  作者: Mango

Bootstrap 4基本结构 - HTML

Bootstrap是一个流行的开源前端框架，它可以快速搭建响应式网站和WEB应用程序。在Bootstrap 4中，基本结构HTML模板被修改并且更加简化。

HTML文件结构

在Bootstrap 4中，HTML文档结构如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Bootstrap 4 基本结构</title>

  <!-- Bootstrap core CSS -->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="css/custom.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <header>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Brand</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 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>

    <main role="main">
      <h1>Hello, world!</h1>
      <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
      <hr>
      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
      <p class="lead">
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
      </p>
    </main>

    <footer>
      <p>&copy; 2021 Bootstrap 4基本结构</p>
    </footer>
  </div>

  <!-- Bootstrap core JavaScript -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>

</html>

该文件包含以下部分：

1.文档类型和语言

使用DOCTYPE声明和html标记来定义HTML文档类型和语言。

<!DOCTYPE html>
<html lang="en">
2.文档头部信息
元素包含文档的元数据，例如编码、视口、网站图标等。 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Bootstrap 4 基本结构</title>

  <!-- Bootstrap core CSS -->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="css/custom.css" rel="stylesheet">
</head>
3.主要内容
元素包含主页内容，包括NAV、主干、版权等。 
<body>
  <div class="container">
    <header>
      <!-- 导航-->
    </header>

    <!--主干-->
    <main role="main">
      <h1>Hello, world!</h1>
      <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
      <hr>
      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
      <p class="lead">
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
      </p>
    </main>

    <!--页脚-->
    <footer>
      <p>&copy; 2021 Bootstrap 4基本结构</p>
    </footer>    
  </div>

  <!-- Bootstrap core JavaScript -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
4.使用Bootstrap样式和脚本

网站使用了Bootstrap库中的样式和JavaScript，引用CSS文件来允许Bootstrap样式，引用JavaScript文件以启用交互式特性。

<!-- Bootstrap core CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap core JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
5.自定义样式

使用CSS文件自定义样式。

<link href="css/custom.css" rel="stylesheet">
总结

在Bootstrap 4中，HTML文件的结构被重构并且更加简化。它包括DOCTYPE声明、HTML标签、头部信息、主体内容、自定义样式和引用脚本。此外，通过使用Bootstrap样式和脚本，可以轻松地为您的网站添加交互特性和美观的外观。