Bootstrap 初学者教程 - 附示例

你好，程序员！

本文介绍了Bootstrap 5 的基本概念，希望能帮助初学者更快地上手这个出色的框架。读完本文后，您将了解什么是 Bootstrap，以及如何仅使用 HTML 和 Bootstrap 组件编写网站Landing Page。Dashboard Layout感谢您的阅读！

在我们开始之前，好奇的人们可以想象一下仅使用 BS5 组件从头开始制作的项目。

👉登陆页面- 现场演示和资源
👉仪表板- 现场演示和来源

✨ 主题

👉什么是 Bootstrap
👉 如何安装和使用 Bootstrap
👉 Bootstrap 最重要的概念
👉 容器和网格
👉 字体和颜色
👉 表格 - 简单、深色的表格
👉 模态框和警报
👉 Bootstrap 轮播和导航栏
👉 免费样品：登陆页面和仪表板
👉 资源和后续步骤

✨什么是 Bootstrap

Bootstrap 是一个流行的 JS/CSS 框架，用于开发响应式和移动优先的网站，它为几乎所有内容提供 HTML、CSS 和基于 JavaScript 的设计模板，包括（但不限于）：排版、表格、按钮、导航和其他组件。

Bootstrap 致力于简化信息丰富的网页开发。将其添加到 Web 项目的主要目的是将 Bootstrap 的颜色、大小、字体和布局选项应用到项目中。目前，Bootstrap 5 是 Bootstrap 的最新版本，它包含新的组件、更快的样式表和更佳的响应速度。

尽管 Bootstrap 被广泛采用，但一个非常重要的事实是，该框架得到了编程专家和开源爱好者的积极支持和版本控制。

✨ 入门

要开始使用 Bootstrap，一种解决方案是访问官方网站并下载所有提供的资源：CSS、和JS文件。或者，我们可以通过 CDN（内容分发网络）使用 Bootstrap，而无需任何本地下载。

对于 CDN 设置，请在您的index.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">

之后，在标签结束前添加以下两个JavaScript文件<body>：

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>

✨ 使用 Bootstrap 的理由

如果您是开发新手，想要创建自己精美的响应式网站，那么 Bootstrap 是您的理想之选。您只需要具备一些基本的 HTML、CSS 和 JavaScript 知识，就可以开始使用。Bootstrap 提供丰富的模板、主题和工具，助您轻松上手。如果您需要独特的外观，只需自定义模板即可。

👉开发速度

Bootstrap 提供现成的代码块：这可以为您节省大量开发时间，因为您无需从头开始。Bootstrap 还提供现成的主题和模板供您选择。此外，还有许多其他资源为您提供免费和付费的主题和模板。

👉资源和社区支持

Bootstrap 在其官方网站和其他许多网站上都拥有丰富的资源。Bootstrap 网站提供了完整的文档，在创建网站时非常有用。他们还提供可用的主题和模板。截至撰写本文时，Bootstrap 的 GitHub页面已被 330 万人使用，拥有 21,648 次提交和 1,293 位贡献者。

👉响应能力

我们每个人都希望浏览一个与当前屏幕尺寸兼容的网站。一个不需要为了阅读内容而放大或缩小页面的网站。这正是 Bootstrap 的用武之地，它从一开始就采用响应式设计，凭借其强大的网格系统和响应式实用类，创建响应式网站变得轻而易举。

👉定制

使用 Bootstrap 的一个绝佳理由是其强大的定制功能。您可以使用模板，这样就无需凭空创造任何东西。如果您需要独特的自定义外观和体验，您可以自定义所有内容。为此，您需要创建自己的自定义 CSS 文件，进行修改，然后将 CSS 文件添加到网站的 HTML 代码中，这样您就拥有了专属的定制网站。

👉一致性

这就是开发 Bootstrap 的主要原因。Bootstrap 确保无论谁在开发项目，在所有平台上都能获得相同的结果。

👉开源

Bootstrap 于 2010 年在 Twitter 上开发，旨在解决用户界面的挑战。它于 2011 年开源。自那时起，它不断发展，成为最受欢迎的前端开发框架。

✨ Bootstrap 重要概念

如果能够很好地理解这个令人惊叹的框架的最重要概念，那么开始使用 Bootstrap 应该会更容易。

👉 #1 - Bootstrap 5 容器

容器用于填充其中的内容。它包含行元素，而行元素是列的容器。有两种可用的容器类：

固定集装箱

使用.container此类可创建响应式、固定宽度的容器。请注意，其宽度 (max-width) 会随着屏幕尺寸的不同而变化。

流体容器

使用该类.container-fluid创建一个全宽容器，该容器将始终跨越整个屏幕的宽度（宽度始终为 100％）。

容器内边距- 默认情况下，容器具有左右内边距，但为了获得上下内边距，我们需要使用间距工具，以使它们看起来更美观。例如，.pt-1 表示 Bootstrap 会添加较小的顶部内边距。

例子：<div class="container pt-1"></div>

容器边框和颜色- 其他项目（例如边框和颜色）也可以与容器一起使用：

<div class="container pt-1 border"></div>
<div class="container pt-1 bg-dark text-white"></div>

响应式容器——您还可以使用.container-sm|md|lg|xl类来确定容器何时应该响应。

👉 #2 - Bootstrap 5 网格系统

Bootstrap 使用响应式网格系统，可根据屏幕尺寸自动重新排列。它采用弹性框 (Flexbox) 布局，页面最多可容纳 12 列。您可以将这些列组合在一起，以创建更宽的列。

网格类- Bootstrap 5 网格系统有六个类：

.col-（超小型设备 - 屏幕宽度小于 576px）
.col-sm-（小型设备 - 屏幕宽度等于或大于 576px）
.col-md-（中型设备 - 屏幕宽度等于或大于 768px）
.col-lg-（大型设备 - 屏幕宽度等于或大于 992px）
.col-xl-（xlarge 设备 - 屏幕宽度等于或大于 1200px）
.col-xxl-（xxlarge 设备 - 屏幕宽度等于或大于 1400px）

提示：上面的类可以组合起来以创建更好的布局，并且每个类都可以扩大，因此如果您想为sm和设置相同的宽度md，则只需要指定sm。

以下是一些示例：

等列示例

<div class="row">
  <div class="col">column</div>
  <div class="col">column</div>
</div>

响应式列

<div class="row">
  <div class="col-sm-3">column</div>
  <div class="col-sm-3">column</div>
</div>

两个不相等的响应列

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

👉 #3-Bootstrap 5 排版

Bootstrap 5 的默认值为font-size，1rem其 line-height 为，1.5.此外，所有<p>元素的 margin-top: 0 和 margin-bottom: 1rem。

h1-h6标签

Bootstrap 5 使用更粗的字体和响应式的大小来设置 HTML 标题的样式。

<h1> Bootstrap heading</h1>
<h2> Bootstrap heading</h2>
<h3> Bootstrap heading</h3>
<h4> Bootstrap heading</h4>
<h5> Bootstrap heading</h5>
<h6> Bootstrap heading</h6>

您还可以在元素上使用.h1-.h6类，使它们表现为标题。

<p class="h1"> Bootstrap heading</p>
<p class="h2"> Bootstrap heading</p>
<p class="h3"> Bootstrap heading</p>
<p class="h4"> Bootstrap heading</p>
<p class="h5"> Bootstrap heading</p>
<p class="h6"> Bootstrap heading</p>

显示标题用于使文本比普通标题更加突出。

还有六个等级可供选择，它们都有更大font-size和更轻的font-weight。

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

段落元素

<small>/ .small- 在任何标题中创建较小的次要文本。
<mark>/ .mark- 添加黄色背景颜色和一些填充。
<abbr>- 添加虚线边框底部和悬停时带有问号的光标。
<blockquote>/ .blockquote——引用来自其他来源的内容块。
.blockquote-footer- 指出引文的来源。
<dl>- 表示创建描述列表。后续将
和

。
<dt>- 表示描述列表标题。
<dd>- 表示描述列表描述。
<code>- 样式文本就像在代码编辑器中显示的那样。
<kbd>- 设置文本样式来指示键盘输入。
<pre>- 用于展示多行代码。

段落类

.lead- 使段落脱颖而出。
.text-start- 表示文本左对齐。
.text-break- 防止长文本破坏布局。
.text-center- 表示居中对齐的文本。
.text-decoration-none- 从链接中删除下划线。
.text-end- 表示右对齐文本。
.text-nowrap- 表示文本无换行。
.text-lowercase- 表示小写文本。
.text-uppercase- 表示大写文本。
.text-capitalize- 表示大写文本。

👉 #4 - Bootstrap 5 种颜色

Bootstrap 5 提供了上下文类，可以通过颜色来表达含义。以下是文本颜色的类：

我们还可以将50% opacity黑色或白色文本用于上述类别中添加的后缀：

.text-black-50
.text-white-50

背景颜色

背景颜色不会设置文本颜色，因此.text-*在某些情况下您可能需要将它们与颜色类一起使用。

👉＃5-Bootstrap 5表格

Bootstrap 提供的最常用的表格样式如下所示。

基本表-.table该类为表添加基本样式：

条纹行-.table-striped类向表添加斑马条纹

带边框的表格-.table-bordered类为所有内容添加边框

Dark Table -.table-dark类使表格具有黑色背景

无边框表格-.table-borderless该类可从表格中删除边框。

上下文类- 这些可用于为整个表格<table>、行<tr>或单元格着色<td>。

桌头颜色

使用任何上下文类仅为表头添加背景颜色。

👉 #6 - Bootstrap 5 模态框

显示在当前页面顶部的组件称为Modal。

以下是这个简单的 BS5 Modal 组件的代码：

<!-- Button to Open the Modal -->
<button type="button" 
        class="btn btn-primary" 
        data-bs-toggle="modal" data-bs-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" 
                class="btn-close" 
                data-bs-dismiss="modal"></button>
      </div>
      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>
      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" 
                class="btn btn-danger" 
                data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

模态衰减效应

您可以使用.fade类来为打开和关闭模式添加淡入淡出效果：

<!-- Fading modal -->
<div class="modal fade"></div>

<!-- Modal without animation -->
<div class="modal"></div>

模态尺寸

您可以使用类来更改模态窗口的大小。将其添加到<div>带有类的元素中.modal-dialog。默认模态窗口大小为500px最大宽度。

👉 #7-徽章

Bootstrap 5 中的徽章可用于为任何内容添加一些附加信息。您可以将.badge类与元素中的上下文类结合使用<span>来创建矩形徽章。

注意：徽章会缩放以匹配父元素的大小（如果有）。

上下文徽章- 使用这些类（.bg-*）来更改徽章的颜色

药丸徽章- 使用该.rounded-pill类别使徽章更圆润。

元素内的徽章

您可以在按钮内使用徽章来创建更令人惊叹的按钮。

👉 #8 - Bootstrap 5 警报

Bootstrap 5 提供了一种创建警报消息的简便方法。警报使用 .alert 类创建，后跟 contextual 类：

.alert-success，，，，，，，，。.alert-info.alert-warning.alert-danger.alert-primary.alert-secondary.alert-light.alert-dark

警报链接

向警告框内的任何链接添加.alert-link类，以使链接与警告的颜色相匹配。

关闭警报

要关闭警报，请将.alert-dismissible类添加到容器。然后将class="btn-close"和添加data-bs-dismiss="alert"到链接或按钮元素。（单击它时，警报框将消失）。

👉 #9 - Bootstrap 5 轮播

轮播是一种用于循环播放图片等的幻灯片。以下是在 Bootstrap 中用于设置轮播组件样式的类：

.carousel- 创建旋转木马。
.carousel-indicators- 添加轮播指示器。这些是每张幻灯片底部的小点（用于指示轮播中有多少张幻灯片，以及用户当前正在查看哪张幻灯片）。
.carousel-inner- 将幻灯片添加到轮播中。
.carousel-item- 指定每张幻灯片的内容。
.carousel-control-prev- 在轮播中添加左侧（上一个）按钮，允许用户在幻灯片之间返回。
.carousel-control-next- 在轮播中添加右侧（下一个）按钮，使用户可以在幻灯片之间前进。
.carousel-control-prev-icon- 与 .carousel-control-prev 一起使用来创建“上一个”按钮。
.carousel-control-next-icon- 与 .carousel-control-next 一起使用来创建“下一个”按钮..slide - 从一个项目滑动到下一个项目时添加 CSS 过渡和动画效果。

👉 #10 - 导航栏

导航栏是位于页面顶部的标题。

基本导航栏

使用 Bootstrap，导航栏具有响应式设计，可以根据屏幕尺寸展开或折叠。标准导航栏使用.navbar类创建，然后添加响应式折叠类，.navbar-expand-xxl|xl|lg|md|sm使导航栏垂直堆叠。

<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <!-- Links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

上述代码将产生一个简单的导航组件，如下所示：

对于那些喜欢将链接置于中心的人来说，.justify-content-center类可以起到这样的作用：

彩色导航栏

对于这种用例，我们可以使用任何类来.bg-color更改导航栏的背景颜色（.bg-primary、、、、、和）。.bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark.bg-light

可折叠导航栏

要创建可折叠的导航栏，我们需要使用navbar-togglerclass 并指定data-bs-toggle和data-bs-target属性。以下是代码和浏览器输出。

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" 
            type="button" 
            data-bs-toggle="collapse" 
            data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>