Bootstrap 安装和入门
简介
所以你想开始为你的项目使用 bootstrap？大！ 然后让我们马上开始吧！
什么是引导程序？ Bootstrap 是一个开源库，你可以使用响应式设计和简单的代码来创建令人惊叹的响应式项目。响应式设计是一种设计理念，其中系统设计（表示和布局）根据设备的布局进行响应/调整。保持设计响应的主要原因是使用一系列设备将应用程序的范围扩大到更大的用户群。
安装
Bootstrap 可以以多种不同的方式安装，也可以安装在许多不同类型的项目中。在下面的列表中，我已经放置了一些关于如何安装 bootstrap 下载链接的下载和教程
链接
- 直接下载 - 下载链接
- CDN - 来到这里
- 凉亭 -
bower install bootstrap[阅读] - NPM -
npm install bootstrap[阅读] - 作曲家 -
composer require twbs/bootstrap[阅读] - 自定义 - 我有你自己的配置，你可以在这里自定义。
- Sass - 对于 Sass 相关项目，你可以[这里] [1]。
基本信息
所以你现在已经在项目中安装了 bootstrap。现在是时候开始使用 bootstrap 的巨大优势了。首先，我将告诉你一些 bootstrap 的基本用法，之后我将展示一些小例子，最后我会给你一个启动代码示例，你可以用它作为起始模板！
网格系统
Bootstrap 使用网格系统。该网格系统通常由 12 列组成。这 12 列中的每一列具有相同的宽度，但可以具有不同的高度。
所以我们有一个由 12 列组成的网格系统。我们可以使用这些列来构建我们的基本网站。让我们说我们想要实现以下布局：
菜单 - 全宽
侧边栏 - 屏幕的 1/3
主要内容 2/3 屏幕
页脚 - 全宽
菜单
首先我们要看菜单。我们知道网格系统可以使用 12 列。由于我们想要全宽度的菜单，我们必须将菜单放在所有 12 列中。它看起来像下面的例子
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
Menu
</div>
通过给菜单一个 col-lg-12 类，我们指出以下内容：
col - classname 中的 col 代表列。
lg - classname 中的 lg 代表屏幕的宽度，在这种情况下是大的。
12 - classname 中的 12 代表我们希望菜单拥有的列数。因为在这种情况下我们想要一个全宽的菜单，我们得到所有 12 列（12/12）
由于我们在菜单中使用了 12 列中的 12 列作为菜单，因此将在新行上设置。
侧边栏
我们要添加到模板的第二个项目是侧边栏。现在正如我所说，我们希望侧边栏是屏幕的 1/3。所以我们要做的是将 3 列中的 12 列分开。我们现在知道要填充多少列以达到屏幕的 1/3。请遵循以下代码。
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
The sidebar
</div>
与菜单相同，现在我们的菜单数量与菜单不同。
col - classname 中的 col 代表列。
lg - classname 中的 lg 代表屏幕的宽度，在这种情况下是大的。
4 - classname 中的 12 代表我们希望侧边栏拥有的列数。因为在这种情况下我们希望侧边栏填满屏幕的 1/3，所以我们只会抓住 12 列中的 4 列（4/12）
内容
现在，在这一行，我们的侧边栏旁边还有 8 列。所以现在我们将用我们的内容填补这些内容。请参阅下面的示例代码
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
The main content
</div>
现在，因为我们已经在这一行中填充了 12 列的剩余 8 列，所以下一节将再次从具有 12 列的新行开始。
页脚
页脚，再次就像菜单将成为屏幕上的全宽度块一样，所以我们将在该行上抓取所有 12 列为我们的页脚，请参阅下面的示例代码。
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
The main content
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The footer
</div>i are described below.
所以现在我们创建了一个非常小的 html 文件，我们的第一个 bootstrap 模板。但这是非常基础的。通常我们会更多地形成这个代码，以便为它提供完整的引导体验。其中一些经验如下所述。
使用行和容器正如我在上面的简单示例中所述，bootstrap 使用 12 列的行。当一行填充 12 列时，bootstrap 将在新行上启动。显示这些行的最佳方法是使用行类。我们还将使用容器类。这就像一个 body 标签，在这个容器中我们将放置所有代码。你可以选择容器或容器流体类。唯一的区别是容器流体类使用屏幕的整个宽度而容器类不使用。这些基本功能的一个例子如下。
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The menu consisting of 12 columns
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
The sidebar consisting of 4 columns
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
The main content consisting of 8 columns
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The footer consisting of 12 columns
</div>
</div>
</div>
所以我们现在用 bootstrap 创建了一个完整的页面模板。这是一个非常简单的，但从基础开始，之后你将能够使用各种引导类和功能。最后一件事。类中的 lg-md-sm 和 xs 列名对应，就像我告诉页面的宽度一样。LarGe，MeDium，SMall 和 XSmall。不要忘记，通过更改列数，你可以使用它来在不同宽度上对列进行不同的样式设置。记得整行包含 12 列！
有关更多信息，请访问： http ： //getbootstrap.com/ <br？有关很好的示例，请访问： http ： //expo.getbootstrap.com 或 http://bootsnipp.com/