如果您正在为您的业务创建一个网站，那么您可能有一个很长的愿望清单。
您希望设计反映您品牌的外观和感受。您希望拥有满足访问者需求所需的功能，而不会超过预算。并且，您想创建响应性布局，以显示像按钮等元素，无论访问者使用的设备或浏览器都是始终如一的。
通过使用Bootstrap构建，您可以检查列表中的最后一个项目。Bootstrap是一种快速构建响应网站和移动第一Web项目的开源框架。因为它提供了一个可重用代码的集合，所以您不必从头开始构建一个站点。
理解为什么互联网上的2100万个网站使用引导，让我们仔细看看它是什么。
什么是Bootstrap CSS?
Bootstrap CSS是用于开发响应和移动第一网站的领先CSS框架。这款免费和开源工具包附带了一个响应的网格系统，全局CSS设置，广泛的预制组件，包括按钮，NavBars和表单，以及可选的JavaScript插件，以加快开发过程。
虽然Bootstrap是一个用于与之开发的开源工具包HTML，CSS和JavaScript，它通常被称为CSS框架。
要了解原因，您必须首先了解CSS通常更容易为各级技术经验中的人员学习，并且在浏览器中比JavaScript更快。出于这些原因，Bootstrap开发人员用CSS写入（和HTML.）尽可能通过JavaScript。因此，引导程序中包含的CSS库比JavaScript库大得多。
由于Bootstrap使创建响应网站更容易和更快，因此对许多前端开发人员和初学者呼吁。但是，所有这些都不推荐。下面我们会看看为什么引导是如此流行，并且当它是理想的时候 - 而且它不理想。
为什么引导？
Bootstrap是许多前端开发人员的Go-to Toolkit。根据W3Techs.，它在互联网上的所有网站中使用了22.1％。
Bootstrap受欢迎的原因有几个。首先，它是开源的，因此可以免费下载和使用。它也是完全可定制的，并与所有现代浏览器兼容。然而，许多CSS框架都是如此。
与其他开发工具包相比的引导程序是它的开发移动 - 第一。意思是，首先为移动设备（即最小屏幕尺寸）进行了优化的代码，然后缩放到更大的屏幕上。因此，使用Bootstrap CSS构建可确保您的网站支持所有设备的正确渲染和触摸缩放。
Bootstrap如此受欢迎的另一个原因是它很容易使用。它与版式模板捆绑在一起，形式、按钮、下拉菜单、导航和其他界面组件。使用这些预先设置样式的模板，您可以添加一些特性来丰富用户体验在您的网站上，不必从头开始编写它们。
何时使用引导
使用引导程序有很多原因。我们已经讨论了一些以上，但让我们仔细看看下面的这些原因。
1.你想要一个响应式网站。
建立一个响应的网站使用引导速度更容易，而不是从头开始。Bootstrap具有响应式样式，如容器和媒体查询，以确保您的网站调整为视口。这意味着您不必担心您的访客是否正在使用桌面，平板电脑或移动设备。
2.你想节省时间。
您可以使用Bootstrap快速构建您的网站。下载框架后，您可以使用基本模板开始，然后添加所需的组件。这些组件是HTML元素的基本HTML元素，如表格，表单，按钮，图像和图标，其与基类设计，并使用修改器类扩展。使用这些预先设计的组件显着限制您必须写入的自定义CSS的数量。
考虑Bootstrap按钮例如。基类.btn用于按钮的所有通用样式，如显示，填充，边框宽度。使用此类，您不必在样式表中重复这些CSS属性以格式化您添加的每一个按钮。
另一方面，修改器类，如.btn-primary，用于添加您想要的按钮的更具体的样式，如颜色，背景颜色和按钮的边框颜色。这只是一个例子的一个例子，比如从头开始编码它们的速度快得多。
3.你熟悉HTML和CSS。
虽然Bootstrap确实简化了构建网站的过程，但您必须熟悉HTML和CSS来使用该框架。例如，了解CSS框模型使用容器类并构建第一个引导网格时将很重要。
好消息是你只需要一raybetapp个编码基础知识开始。
4.您有多人构建您的网站。
如果您有多个在网站上工作的合作者，那么一致性很重要。您不希望您的主页上的按钮看起来与着陆页上的按钮不同，或使用不同的按钮网站排版在您的博客上比您网站上的其他任何地方 - 等等。使用Bootstrap及其默认设置，实用类和组件元素可以帮助确保您网站的前端看起来一致。
你想成为一个社区的一部分。
由于Bootstrap是开源的，它拥有一个全球开发人员社区和专用于支持框架的设计者。这些开发人员和设计人员修改和增强Bootstrap的CodeBaseGitHub.．他们也回答问题推特那堆栈溢出，在一个专用的松弛的房间．当使用Bootstrap时，您可以利用这个活跃的社区成为一个更好的Bootstrap用户。
什么时候不使用bootstrap
虽然使用此CSS框架有很多好处，但有一些原因不是也可以使用Bootstrap。让我们仔细看看下面这些原因。
1.你想要一个独特的网站。
由于Bootstrap附带了预测内容，组件和模板，因此Bootstrap站点往往看起来相同的开箱即在框中。事实上，Bootstrap被归咎于为什么网站今天都看起来一样．
您可以自定义引导站点，但它会花费时间。另外，如果您必须覆盖过多的默认样式，那么它可能在第一个位置创建自己的样式表可能会更有意义。
2.你需要一个主题。
Bootstrap框架不是主题 - 尽管有可用的引导主题。让我们将框架比较到一个WordPress主题， 例如。
当你安装并激活一个WordPress主题，它会改变整个网站的外观。当您下载Bootstrap框架时，您网站的外观的各个方面将自动更改，如排版。但您仍然必须编写HTML并插入您需要占网站所需的预设布局，颜色和组件。
3.您想要一个快速加载网站。
引导可以对网站的速度产生负面影响。为什么？因为它很重 - 不是KB，究竟，但在普通用户的方式方面没有使用。
Bootstrap小于500KB。您还可以采取几个步骤来减少重量并减轻其对负荷时间的影响。例如，您可以使用缩小的CSS和JavaScript文件，或者您只能下载CSS文件，而不是JavaScript in。
但是即使有了这些步骤，Bootstrap对于您所需要的东西来说仍然是太重了。大多数用户并不需要Bootstrap附带的所有组件、实用程序和插件，所以即使它们没有被使用，它们也可能会拖累你的站点。
4.您没有时间通过引导文档学习和读取。
引导被认为是一个易于使用的平台。它为其框架的每个部分提供了广泛的文档，从其布局到内容到组件等等。这意味着几乎任何人都可以学习Bootstrap - 它也意味着它需要时间来阅读文档并学习框架。如果您正在寻找尽快建立一个网站，那么Bootstrap可能不会像其他解决方案一样理想，如网站建设者．
5.您想要掌握HTML和CSS。
使用预先设计的组件和模板，Bootstrap提供使其更容易和更快地构建一个网站 - 但它也可以作为编码器表示您的增长。使用Bootstrap创建就像使用计算器进行代数：您最终可以通过完全理解您的效果来结束您想要的结果。这就是为什么花时间创建自己的自定义组件是好的，即使您还要学习和使用Bootstrap，也是如此。
现在我们了解Bootstrap CSS是什么，谁应该使用它，让我们简要讨论你拥有的不同下载选项。
如何下载引导CSS
在我们走过下载引导过程之前，重要的是要注意您可以通过远程加载Bootstrapbootstrapcdn.或jsDelivr而不是下载它。这将需要访问者有互联网连接访问您的网站，并要求您发布更多代码。因此，下载Bootstrap是更受欢迎的选择。
有两种不同形式的引导可供下载．每个版本 - 预编译和源代码版本 - 取决于它们是否优先考虑易用或灵活性。让我们仔细看看下面。
预编译的引导
预编译的版本是最基本的引导形式。您将在几乎任何Web项目中下载易于删除的预编译的CSS和JS文件以及缩小的CSS和JS文件。
下载后，您将解压缩压缩文件夹并看到以下结构。
Bootstrap /
├──css /
│├──bootstrap-grid.css
│├──bootstrap-grid.css.map
│├──botstrap-grid.min.css
│├──bootstrap-grid.min.css.map
│├──botstrap-reboot.css
│├──bootstrap-reboot.css.map
│├──botstrap-reboot.min.css
│├──botstrap-reboot.min.css.map.
│├──bootstrap.css
│├──bootstrap.css.map
│├──botstrap.min.css.
│└──botstrap.min.css.map.
└──js /
├──botstrap.bundle.js.
├──bootstrap.bundle.js.map
├──bootstrap.bundle.min.js
├──botstrap.bundle.min.js.js.map.
├──botstrap.js.
├──botstrap.js.map.
├──botstrap.min.js.
└──botstrap.min.js.ms.map.
使用编译的版本比源代码版本更容易和更快地使用 - 但它更难以使用定制．您想要对预样式元素或布局进行的任何更改都必须通过覆盖当前样式来应用。
如果您想根据您的引导程序一起定制CSS和JS文件，那么您将更好地下载源代码版本。
引导源代码
源代码版本包括预编译的CSS, JS和字体资产以及分别为CSS, JS和图标字体的源文件。
如果您选择下载引导源代码，那么您将解压缩文件夹并查看以下结构。
Bootstrap /
├──dist /
│├──CSS/
│└──js /
├──网站/
│└──docs/
│└──4.6 /
│└──实例/
├──js /
└──SCSS/
Dist /文件夹包含上面预编译部分中列出的所有内容。docs /文件夹包含引导文档的源代码和引导程序使用的示例。JS /文件夹包含引导js和bootstrap css的scss /文件夹的源代码。
因为这个版本的Bootstrap需要你autoprefixer.和一个SASS编译器，设置过程比设置预编译版本更长且更困难。但是，一旦设置，您可以通过您想要的方式更改和自定义文件。
每个版本的Bootstrap都是不同用例的理想选择，但由于预编译的Bootstrap更简单，使用速度更快，我们将专注于该帖子其余部分的该版本。
下面让我们看看如何使用预编译的引导raptap来构建一个网站。
如何使用bootstrap css
要使用Bootstrap CSS，您需要将其集成到您的开发环境中。为此，您只需在计算机上创建一个文件夹。在该文件夹中，保存编译的CSS和JS文件以及您将加载Bootstrap的新HTML文件。然后，您可以使用Bootstrap模板将接口元素添加到页面。
让我们逐步分解此过程。
加载Bootstrap CSS和JS
首先，在您的计算机上创建名为“Bootstrap”的文件夹。将编译的CSS文件从Bootstrap下载移动到该文件夹中。如果您还使用了Bootstrap的JS部分，请将编译的js文件移动到文件夹中。
在同一个文件夹中，创建另一个文件，并将其命名为index.html。使用您选择的文本编辑器打开此文件，例如记事本++．你可以复制和粘贴Bootstrap官方网站上的基本HTML模板或者从头开始编写代码。
下面是一个从头开始编写的HTML页面示例。
<！doctype html>
< >头
<标题>引导教程样本页面
< meta charset = " utf - 8 " >
<身体>
您现在准备将Bootstrap CSS加载到您的项目中。只需将以下代码添加到index.html文件的标题中，就在标记之前。
<链接rel =“stylesheet”href =“bootstrap / css / bootstrap.min.css”>
如果您计划只使用CSS部分Bootstrap，那么您都设置了。
如果您计划使用JS部分，那么您需要添加两行代码。组件包括警报，切换按钮，旋转木马，下拉列表需要使用JavaScript函数，因此如果要将这些元素中的任何元素添加到您的网站，请继续执行这些步骤。
首先，您需要加载jQuery库。这样做，下载jQuery到你的电脑上。解压缩文件并将其保存在“Bootstrap”文件夹中以及编译的CSS和JS文件和索引.HTML文件中。
然后，您将在index.html文件中添加以下代码行。这一次，你将它添加到页脚，而不是标题，在
标记之后。