初学者的Bootstrap详细教程编码员们好! 本文介绍了Bootstrap 5的基本概念，可能有助于初学者更快地开始使

编码员们好!

本文介绍了Bootstrap 5的基本概念，可能有助于初学者更快地开始使用这个神奇的框架。完成这篇文章后，你将知道什么是Bootstrap，以及如何只用HTML和Bootstrap组件来编写一个Landing Page ，以及一个Dashboard Layout 。谢谢你的阅读!

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

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

✨ 主题

👉 什么是Bootstrap
👉 如何安装和使用Bootstrap
👉 Bootstrap的最重要的概念
👉 容器和网格
👉 排版和颜色
👉 表格--简单、深色的表格
👉 模板和提示
👉 Bootstrap旋转木马和导航栏
👉 免费样品。着陆页和仪表板
👉 资源和后续步骤

✨ 什么是Bootstrap

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

Bootstrap专注于简化内容丰富的网页的开发。将其添加到一个网页项目中的主要目的是将Bootstrap对颜色、大小、字体和布局的选择应用于该项目。目前，Bootstrap 5是Bootstrap的最新版本，具有新的组件、更快的样式表和更强的响应能力。

尽管Bootstrap被大量采用，但一个超级重要的事实是，该框架得到了编程专家和开源爱好者的积极支持和版本改进。

✨ 开始使用

为了开始使用Bootstrap，一个解决方案是访问官方网站并下载所有提供的资产。CSS, 和JS 文件。作为一种选择，我们可以通过CDN（内容交付网络）使用Bootstrap，而不需要在本地下载。

对于CDN的设置，在你的网站的head部分添加以下代码index.html

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

之后，在<body> 标签的结尾处添加以下两个JavaScript文件。

<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的GitHub页面已被3300人使用。它有21648个提交和1293个贡献者。

👉响应性

我们所有人都希望浏览一个与我们目前使用的屏幕大小相适应的网站。一个不会让你为了阅读内容而放大或缩小的网站。这就是Bootstrap的用武之地，它从一开始就是一个响应式的设计，加上它伟大的网格系统和响应式的实用类，创建一个响应式的网站是一件容易的事情。

👉自定义

使用Bootstrap的一个惊人的理由是定制方面的问题。你可以使用模板，这样你就不必凭空创造一些东西，但如果你需要一个独特的、自定义的外观和感觉；你可以定制一切。要做到这一点，你需要创建你自己的自定义CSS文件，进行修改，将CSS文件包含在你的网站的HTML代码中，现在你有了自己的定制网站。

👉一致性

这是开发Bootstrap的主要原因。Bootstrap确保无论谁在做一个项目，其结果在每个平台上都是一样的。

👉开源

Bootstrap是2010年在Twitter上开发的，作为解决用户界面的挑战的方案。它在2011年被发布为开放源代码。从那时起，它一直在成长，成为最受欢迎的前端开发框架。

✨ Bootstrap重要概念

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

👉 #1 - Bootstrap 5 容器

容器是用来填充其中的内容的。它包含行元素，行元素是列的容器。有两个容器类可用。

固定容器

使用.container 类来创建一个响应式的、固定宽度的容器。注意，它的宽度（最大宽度）会在不同的屏幕尺寸上发生变化。

流体容器

使用.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- (大型设备--屏幕宽度等于或大于1200px)
.col-xxl- (xx大型设备--屏幕宽度等于或大于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排版设计

1remBootstrap 5的默认font-size ，其行高是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 类为表格添加了基本样式。

Striped Rows-.table-striped 类为表格添加斑马纹。

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

深色表格-.table-dark 类使表格有一个黑色的背景

无边框表格-.table-borderless 类将表格中的边框移除。

上下文类- 这些可以用来给整个表格着色<table> ，行<tr> 或单元格<td> 。

表头颜色

使用任何上下文类，只给表头添加背景色。

👉 #6 - Bootstrap 5 Modals

显示在当前页面顶部的组件被称为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>

模态大小

你可以使用类来改变模态的大小。用.modal-dialog 类将其添加到<div> 元素中。默认的模态大小是500px max-width。

👉 #7 - 徽章

Bootstrap 5中的徽章是用来给任何内容添加一些额外信息的。你可以使用.badge 类和<span> 元素中的上下文类来创建矩形徽章。

注意：徽章的大小与父元素的大小一致（如果有的话）。

上下文徽章 - 使用这些类 (.bg-*) 来改变徽章的颜色

丸状徽章--使用.rounded-pill 类来使徽章更圆。

徽章在一个元素内

你可以在一个按钮里面使用徽章来创建更多令人惊叹的按钮。

👉#8 - Bootstrap 5 警报器

Bootstrap 5提供了一种简单的方法来创建警报信息。警报是用.alert类创建的，后面还有一个上下文类。

.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 Carousel

旋转木马是一个用于循环播放图片的幻灯片，等等。下面是Bootstrap中用来设计旋转木马组件的类。

.carousel - 创建一个旋转木马。
.carousel-indicators - 为旋转木马添加指示器。这些是每张幻灯片底部的小圆点（表示旋转木马中有多少张幻灯片，以及用户目前正在查看哪张幻灯片）。
.carousel-inner - 将幻灯片添加到旋转木马中。
.carousel-item - 指定每张幻灯片的内容。
.carousel-control-prev - 为旋转木马添加一个左（上）按钮，允许用户在幻灯片之间返回。
.carousel-control-next - 为旋转木马增加一个右键（下一个），允许用户在幻灯片之间前进。
.carousel-control-prev-icon - 与.carousel-control-prev一起使用，创建一个 "previous "按钮。
.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-toggler 类并指定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>