因此，几天前，我不得不使用Bootstrap创建一个项目，过去我从未使用过它，也从未使用过Grid。 这对我来说真的很困难，当我决定查找信息时，我很难找到真正可以理解和使用的东西。 所以那天，我告诉自己：如果我理解了这一点，我会写这篇文章，这样，如果有人像我一样是初学者，他们就不会像我那样困难。 因此，这里是：我的第一篇文章，它介绍了了解Bootstrap并且不会死（或在我看来是恐慌）尝试的基本信息。
什么是引导程序？ 它是Twitter创建的一个框架，一旦您了解它，您就会意识到这是一个美丽而又非常有用的框架，它将节省大量时间。 如果您想了解更多信息，可以在这里直接从其一位创建者那里阅读 。
关于Bootstrap的信息很多，您可以用它做很多很酷的事情。 但是，如果您像我一样开始学习，并且想了解基础知识，那么我学到的最重要的知识就是，在阅读完所有内容后，我便可以开始使用它了：
- 它使用12列系统 ：Bootstrap与12列网格系统一起创建网站的布局。 您可以将其想象为好像12条看不见的线将设备的视口分开，并且我们将内容排列在这12列中
- 它是面向移动设备的 ：Boostrap的想法是大多数人现在都在手机上观看页面。 因此，它们首先适用于移动设备，然后适用于更大的设备
- 类和更多类 ：Bootstrap有很多类可以处理很多事情：样式，对齐，环绕，创建：按钮，卡片，导航栏等，它们非常出色！ 您不需要全部了解它们。 什么工作对我和我的一些同事都认为我们使用这个网页 ，其中包含自举的所有类。 每次我们在做一个项目时，我们都会查看它们，并搜索是否有一个类用来说明我们要做什么。 随着时间的流逝，您将了解在Bootstrap中有什么类，而没有Bootstrap中的类，并且您将越来越少地需要它，但是在开始时将其标记为资源管理器中的收藏夹确实很方便
- 组件的魔力 ：厌倦了创建导航栏？ 要创建轮播吗？ 别担心，Bootstrap帮您了！ 您可以转到Bootstrap页面上的“ 组件”部分 ，其中有很多我们每天使用的组件示例。 我的推荐？ 了解组件的类，找到最适合您需求的组件，复制它们，并进行代码所需的修改，特别是首先，然后，当您有更多经验时，就可以开始创建自己的方法了。
- 有很多方法可以将Bootstrap集成到您的代码中，但是，如果您要开始，建议您像添加CSS的文件或Fontawesome的图标一样将其链接！ 在这里您可以看到说明。
- 订购组件 ：所以我犯了一个错误，就是我没有正确订购用于所有不同设备视图的组件。 我开始为移动设备视图进行编码，而当我尝试为平板电脑视图进行编码时，那真是一团糟！ 我不知道该怎么做，因此为了避免您头疼，我将通过一个简单的示例向您展示如何使用Bootstrap中的列
想象一下，如果您有6个容器，并且要在移动视图（超小型设备）中按以下方式排列它们：第一行2个，第二行两个，依此类推。 在使用Bootstrap（以及一些基本样式）之前，您的容器可能看起来像这样。
现在，您需要记住的第一件事是，要使Boostrap的列系统正常工作，您需要在类容器中添加一个元素。 此类有助于根据屏幕宽度设置布局的宽度，并将所有组件放置在页面中间的容器内。
这意味着您的页面应具有以下结构：正文，容器以及其中需要的所有其他元素。
下一步是您需要在要排列的组件周围添加“行”类。
因此，如果我们想在第一行中具有2个组件，在第二行中具有2个组件，在第三行中具有2个组件，那么我们可以将它们连续地配对成两个，对吗？ 让我们来看看！
有用！ 看看如何将col-6类添加到行内的每个组件中？ 2列的总和为12，这是我们网格系统中可用列的总数。 想象一下，如果我为一个组件分配了6列，那12列将等于100％的宽度，这意味着它将是50％的宽度。
为什么我要使用col- ？ 因为对于超小型设备（屏幕宽度等于或小于576像素），在Bootstrap中，您可以使用此类定义它们的列分布，对于小型设备（屏幕宽度大于576像素），我们将类col-sm- * colums * ，对于中型设备（屏幕宽度等于或大于768px），我们使用col-md- * columns * ，依此类推。 如果您想了解有关Boostrap使用的设备媒体查询的更多信息，请转到此处。
但是，如果现在我们希望中型设备上的容器每行3个而不是2个呢？ 现在，我们需要创建另一个具有类row的组件，并在其中定位我们创建的3个div，同时，它们已经在另一行中，每个超小设备版本都位于其中。
想象一下，在对中型设备视图进行了更改之后，您意识到需要在大型设备上将所有这些容器现在都放在同一行中。 您需要再次进行更改！ 想象一下，但是只有1000行代码，您会一团糟！
那么如何解决呢？ 首先要记住您的组件在任何设备视图中的行为，如果它们中的任何一个都在同一行中，则将它们与类行一起放在一个组件中，在查看您当前的工作状态，他们不在一起，您将在以后使用它。 在我的例子中。 我的代码看起来像这样。
现在开始根据您想要的视图添加列分布。 在此示例中，我将仅在超小型，中型和大型设备上工作
我们的代码将如下所示（请记住，它总是需要加12，否则将移至下一行）
我们可以尝试一下，看看它是否有效！ 在较大的屏幕上，所有div都在同一行上，在中等的div上每3个，在较小的div上每行2个。 对于中型和大型设备，容器要居中，对于超小型设备，容器要有全宽。 此外，您可以看到，对于中型设备视图，每个组件都使用该行中12个可用空间的4个空格（或25％宽度的100％），对于大型设备视图，它们使用的空格为2个空格。 12个可用（或16.666％宽度的100％）。
如您所见，Bootstrap让您一见倾心，它既神奇又令人惊讶，它只是冰山一角，因此，如果您想了解更多信息，可以转到下一页：
编码愉快！
From: https://hackernoon.com/understanding-and-making-your-life-easier-with-bootstrap-nnr2gpb