什么是自举的？

Bootstrap是一个强大的开源前端框架，旨在通过一组可以在框架documentation上找到的模板来促进网站和Web应用程序的响应开发。

。

在我开始解释有关Bootstrap的更多信息之前，我想澄清术语响应性的真正是什么。

反应性

响应式Web Design，最初由Ethan Marcotte的article在2010年定义的术语也在建筑领域也出现了。 “响应式建筑”研究了物理空间如何响应通过它们的人的存在，一些建筑师正在尝试艺术装置和墙壁结构，这些结构在人群接近时弯曲，弯曲和扩展。

这正是网络开发的响应性。由于窗口宽度，不同的屏幕分辨率甚至用户偏好，网站必须负责并与所有这些变量完美工作。响应式网站根据用户设备的尺寸和功能来调整自身，无论是手机，平板电脑，台式机，电视甚至游戏控制台。

既然您对响应性有了更多的了解，让我们看看 Bootstrap框架的重要性。

网络开发变得容易

使用Bootstrap的Web开发人员可以更快地构建响应网站，而无需花费时间担心基本命令和功能。

让我们安装Bootstrap

它可以通过CDN安装，这对我来说是最简单的开始使用它的方法。

在您的项目root中创建一个新的 index.html 文件，并在其中包含Bootstrap CSS和JS标签。永远记住，CSS标签必须放置在<head>标签内，并且JavaScript标签必须始终放在<body>标签的底部。就像这样：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <title>Demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

还包括Bootstrap JS脚本，Popper脚本，因此您可以在项目中使用下拉词，弹出式和工具提示。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>

现在让我们第一次使用Bootstrap。打开您的index.html文件，看起来应该像这样：

要使文本以页面为中心

 <h1 class="text-center">Hello, world!</h1>

现在看起来应该像这样：

请注意，我们甚至没有打开CSS文件。那就是关于引导的“魔术”。要完成本第一个教程，让我们进行更多的样式。现在，我希望背景是黑色的，并且在<h1>元素上有一些边距，因此它不会触摸页面顶部。首先，对于背景，我们必须将<body>元素提供一类bg-black含义（backgroung-black），对于边距，我们将添加my-3类底部）。最后一件事是更改<h1>元素的颜色，因此我们可以在黑色背景上看到它，为此，我们将简单地将text-white类添加到该元素中。现在的代码应该看起来像这样：

<body class="bg-black">                                                    
  <h1 class="text-center my-5 text-white">Hello, world!</h1>

，并且不使用任何CSS文件，结果：

这只是对Bootstrap的简要介绍，此框架比这更复杂。 MasterCard，Spotify和Twitter等大公司以非常复杂的方式使用Bootstrap。以下是一些我欣赏的网站：

福布斯印度

福克斯新闻

一起制作

所有这些网站都是精心制作的项目。 Bootstrap在熟练的手中是强大的。现在让我们看看这些手如何与Bootstrap框架一起使用。

布局

容器

容器是引导程序上的基础构建块，可以包含，垫和对齐给定设备或视口内的其他元素。在构造Bootstrap项目的html时，容器必须是父母元素，并且不能嵌套，换句话说，不要将一个容器放入另一个容器中。

就像现实生活中一样，必须将包含其他元素的元素分开。让我们修复以前的网站，并将<h1>元素包装在具有白色背景的容器中。我们的代码将像这样：

<body class="bg-black">
   <div class="container bg-white">                                                                       
      <h1 class="text-center my-5">Hello, world!</h1>
    </div>                
</body>

结果，我们可以明确地看到容器所占据的空间。

我们刚刚使用的两种类型的容器container和container-fluid，如果您想要一个宽度宽度容器，可以使用它们，这些容器涵盖了视口的整个宽度。我们对container-fluid的结果将是这样：

在开发引导程序项目期间，容器的使用将非常频繁。在继续尝试Bootstrap之前，您还需要知道其他构建块，我现在就谈论它们。

网格系统：行和列

Bootstrap提供了一个功能强大的移动第一网格系统，我们可以用来快速构建各种尺寸和形状的良好布局，正如我已经提到的那样。该网格系统由两个基本构建块构建：行和列。

行

在bootstrap中，我们有容器，我们有行，它们是容器的子元素，换句话说，就像上图中一样，行设计用于生存内部容器。这是一条规则，不要打破它，您的代码将很干净。

现在，让我们以正确的方式做事，并通过在我们的容器组件中创建一行来修复我们的网站。要创建一行，我们必须创建一个具有row类的<div>元素。现在我们的代码看起来像这样：

<body class="bg-black">
    <div class="container bg-white">
      <div class="row">
        <h1 class="text-center my-5">Hello, world!</h1>
      </div>

我们网站的客户端没有任何改变，但是冷静下来，很快事情就会变得有意义。

列

就像containers和rows一样，columns也是Bootstrap的基本构建块，仅使用这些组件，我们就可以创建许多有趣的东西。现在让我们理解。

Columns和仅columns是包含您内容的引导组件。让我们想象您要搬到另一个国家的情况。从逻辑上讲，您需要一个容器来运送所有东西。但是，您不仅会将东西扔进容器中，因为，如果您这样做，一切都会破裂。取而代之的是，您将很多盒子放在该容器中，以保持所有内容的井井有条。这就是自举网格系统的精神。容器等效于containers，盒子等同于rows。但是现在我们也有columns，对吗？当然！让我们想象您的物品中有很多旧瓷器。您会在盒子里扔这个美丽而昂贵的瓷器吗？甚至不要想到！而是使用小隔间来组织盒子的内部。在引导世界中，这些小隔间是我们所说的columns。

现在让我们再次在我们的网站上工作，最后添加了一个column来包含<h1>元素。记住，columns是rows的子元素，是container的子元素。要修复我们的代码，我们只需要添加一个<div>元素，然后给它一类col即可。现在我们的代码看起来像这样：

 <body class="bg-black">
    <div class="container bg-white">
      <div class="row">
        <div class="col">
          <h1 class="text-center my-5">Hello, world!</h1>
        </div>
      </div>
    </div>

关于rows和columns的很酷的事情是，在每个row中，您最多可以安装12 columns。之所以没有改变代码的原因是因为我们在row内只有一个column，因此，自然而然地，我们的这种独特的column将占据12 columns的空间。让我们对代码进行微妙的更改，以便您更好地理解它。我们使用column中的col类，而是使用col-12（这意味着我们的column必须占据12 columns的空间）。

<div class="col-12">
   <h1 class="text-center my-5">Hello, world!</h1>
</div>

没有变化，对吗？那是因为在Bootstrap中，col和col-12的类别表示同一件事，它们都采用row的整个可用空间。但是现在，假设我们需要在同一row上进行3 columns，垂直对齐。在基本部门的情况下，我们知道12除以3为4，因此我们需要一个占4 columns空间的column，换句话说，row的1/3。让我们将col-12的专栏类别更改为col-4。另外，我们将为bg-primary和text-white的文本颜色添加背景颜色，因此我们可以更好地识别它：

<div class="col-4 bg-primary text-white">
   <h1 class="text-center my-5">Hello, world!</h1>
</div>

现在这是我们的结果：

事情开始变得有趣，对吗？现在，让我们在同一类中添加两个columns。我已经更改了第二个column的视觉效果，因此我们可以更好地可视化网格。

<div class="row">
        <div class="col-4 bg-primary text-white">
          <h1 class="text-center my-5">Hello, world!</h1>
        </div>
        <div class="col-4">
          <h1 class="text-center my-5">Hello, world!</h1>
        </div>
        <div class="col-4 bg-primary text-white">
          <h1 class="text-center my-5">Hello, world!</h1>
        </div>
</div>

这是我们现在在网站上拥有的内容：