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