📌  相关文章
📜  bootstrap 4.6 添加到 css - Html (1)

📅  最后修改于: 2023-12-03 15:13:41.080000             🧑  作者: Mango

使用Bootstrap 4.6添加到HTML和CSS文件中

简介

Bootstrap是一个开源的前端框架，旨在快速设计现代响应式网站或应用程序。通过引入CSS和JavaScript文件，可以方便地利用Bootstrap提供的预定义样式和组件，从而快速创建美观和响应式的界面。在本文中，我们将介绍如何在HTML和CSS文件中添加Bootstrap 4.6。

步骤
第一步： 下载Bootstrap文件

首先，您需要下载Bootstrap文件。您可以从官方网站https://getbootstrap.com/docs/4.6/getting-started/download/下载最新的稳定版本（Bootstrap 5已发布，但也可以使用Bootstrap 4.6），或从CDN中获取。如果您选择从CDN中获取，只需在HTML文件中引用以下链接即可。

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

<!-- 引入 Bootstrap JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

<!-- 引入 jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
第二步：创建HTML文件

接下来，我们将创建一个HTML文件，并将Bootstrap添加到其中。在标签内引用Bootstrap CSS文件，如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>

  <h1>Hello, World!</h1>

<!--  其他内容  -->

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
第三步：添加样式和组件

添加Bootstrap样式和组件非常简单。只需在HTML标记中使用预定义的类或元素，即可应用相应的样式或组件。以下是一些示例：

<!-- 添加样式 -->
<h1 class="text-danger">标题（红色）</h1>
<p class="bg-secondary text-white">这是一段文本（深灰背景，白色字体）</p>
<button class="btn btn-primary">主要按钮</button>

<!-- 添加组件 -->
<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">
      <li class="nav-item active">
        <a class="nav-link" href="#">主页 <span class="sr-only">(当前)</span></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 disabled" href="#">联系我们</a>
      </li>
    </ul>
  </div>
</nav>
第四步：添加自定义CSS

如果您想要添加自定义CSS样式，只需在HTML中添加