Tomislav Bacinger
Tomislav(硕士)在全栈开发和数据分析方面有超过15年的经验, 但地理空间可视化是他的最爱.
Tomislav(硕士)在全栈开发和数据分析方面有超过15年的经验, 但地理空间可视化是他的最爱.
编者注:本文由我们的编辑团队于10/10/22更新. 它已被修改，以包括最近的来源，并与我们目前的编辑标准保持一致.
如果你正在做任何与网络相关的事情，你可能听说过Bootstrap. 但是许多开发者仍然疑惑:“Bootstrap的具体用途是什么?” Here, 我们将研究Bootstrap的基础知识及其理想用例, including setup, the grid system, 以及典型的组件示例.
Bootstrap web development 允许程序员专注于开发而不用担心设计, 建立一个好看的网站并快速运行. 相反，它为网页设计师创造有趣的Bootstrap主题提供了坚实的基础.
Bootstrap 是一个强大的工具包- HTML的集合, CSS, 以及用于创建和构建网页和web应用程序的JavaScript工具. 它是一个免费的开源项目，托管于 GitHub，最初是由Twitter创建的.
在2011年开源发布之后，Bootstrap迅速流行起来——这是有充分理由的. 网页设计师和网页设计师 像Bootstrap这样的开发者 因为它很灵活，很容易操作. 它的主要优点是，它是响应设计, 它保持了广泛的浏览器兼容性, 它通过使用可重用组件提供一致的设计, 而且学起来很快. 它使用JavaScript提供了丰富的可扩展性, 并内置了对jQuery插件和编程JavaScript API的支持. Bootstrap可以与任何IDE或编辑器以及任何服务器端技术和语言一起使用，从ASP.。NET到PHP再到Ruby on Rails.
Bootstrap有两种形式:预编译版本和源代码版本. 源代码版本使用 Less CSS预处理器，但如果你更喜欢Sass，还有一个 official Sass port of Bootstrap. 为了更容易地使用CSS供应商前缀，Bootstrap使用 Autoprefixer.
源代码版本附带样式，源代码用Less(或Sass)编写。, JavaScript files, 以及相关的文档. 这使得更有抱负的设计人员和开发人员可以根据自己的喜好更改和定制所有提供的样式, 并构建自己版本的Bootstrap. 如果你不熟悉Less(或Sass), 或者您对更改源代码不感兴趣, 你可以使用预编译的香草CSS. 所有的样式都可以在以后使用自定义样式重写.
我们将重点介绍可以下载的预编译版本 here. 基本的文件结构包含两个主要的子文件夹， css and js:
| Folder | Contents |
|---|---|
js | Contains bootstrap各种格式的JavaScript文件. |
css | Contains bootstrap, bootstrap-utilities, bootstrap-reboot, and bootstrap-grid 各种格式的CSS文件. |
Bootstrap结构简单且不言自明. 它包括预先编译的文件，可以在任何web项目中快速使用. 除了编译和缩小的CSS和JS文件，旧版本的Bootstrap还包括来自 Glyphicons 和可选的启动Bootstrap主题.
这种结构可以很容易地合并到您自己的项目的文件结构中，方法是将Bootstrap文件完全包含在zip归档文件中, 如果它更适合你的项目, 你可以重新排列这些文件，把它们放在你喜欢的任何地方. 只要确保glyphicon fonts文件夹与CSS文件夹处于同一级别即可.
一个基本的Bootstrap HTML模板应该是这样的:
Bootstrap Template
Hello, world!
用HTML 5 Doctype声明开始任何HTML都是很重要的，这样浏览器就知道要期待什么样的文档. 头部包含三个重要部分 必须首先声明的标记，并且必须在这些标记之后添加任何附加的头标记.
JavaScript文件被添加到正文的末尾，以允许在执行任何JavaScript之前可见地加载网页. jQuery是Bootstrap插件需要的，需要加载之前 bootstrap.js. 如果您没有使用Bootstrap的任何交互功能, 您可以从源代码中省略这些文件.
这是获得基本Bootstrap布局并运行所需的最低限度. 开发人员可能想看看更高级的示例 Bootstrap的示例页面. 如果你在寻找设计灵感， Bootstrap Expo 展示了使用Bootstrap构建的站点. 正如我们稍后注意到的，Bootstrap的每个部分都可以在CSS中轻松定制. 但如果那不是你的菜, 并且您正在寻找与预先包装的Bootstrap主题略有不同的外观和感觉, there are many free, open source, 和高级主题可从 Bootswatch and WrapBootstrap.
在我们的引导教程潜入组件和设计模板之前, 有必要提一下Bootstrap在版本3中引入的一个主要特性 mobile-first design 哲学，这产生了一个Bootstrap响应的设计. 这个版本的Bootstrap可以轻松有效地使用单个代码库进行扩展, 从手机和平板电脑到台式电脑.
这种响应性源于一个流体Bootstrap网格系统，可以适当地扩展到12列, 根据设备或视口的大小. 网格为布局提供结构, 定义水平和垂直的指导方针来安排内容和执行页边距. 网格还为查看者提供了一种直观的结构，因为很容易按照从左到右或从右到左的内容流在页面上向下移动. 在网格和CSS如此强大之前，基于网格的布局是通过使用表格实现的, 内容将被安排在表格单元格内的哪里. 随着CSS越来越成熟，一些基于网格布局的CSS框架开始出现. These include YUI grids, 960 GS and blueprint.
要使用Bootstrap网格系统，您必须遵循以下步骤 certain rules. 网格列元素被放置在行元素中，行元素创建水平列组. 页上可以有无限行，但列必须是行的直接子行. In a full row, 列宽度是加起来等于12的任意组合, 但是并不是强制使用所有12个可用列.
行需要放置在固定宽度布局包装器中，该包装器具有 .container 类，宽度为1170px，或者在全宽度布局包装器中，该包装器具有 .container-fluid 类，它启用该行中的响应行为.
Bootstrap网格系统有四层类: xs for phones (<768px), sm 对于平板(≥768px)， md 对于台式机(≥992px)，和 lg 较大的桌面(≥1200px). 它们定义了列折叠或水平展开的大小. 类层可以任意组合使用，以获得动态和灵活的布局.
例如，如果我们想要得到两行，一个有两列，一个有四列，我们可以这样写:
First column
Second column
First column
Second column
Third column
Fourth column
我们也可以使用混合列宽度:
Wider column
Smaller column
我们甚至可以通过使用offset:来移动列，例如，创建更窄和居中的内容:
Centered column
列可以嵌套. 可以少于12列, and as mentioned, 可以选择定宽列或全宽列 .container or .container-fluid 分别包装.
父定宽列
Nested column
Nested column
Fluid ..
.. and full-width ..
.. example
如果我们结合不同的类层，我们将在移动和桌面视图上得到不同的外观. 在下面的例子中, on the desktop there will be four columns in a line; on mobile, 它们将具有全宽度并相互堆叠.
.col-xs-12 .col-md-3
.col-xs-12 .col-md-3
.col-xs-12 .col-md-3
.col-xs-12 .col-md-3
It is possible to 禁用页面响应能力 完全在旧的Bootstrap版本上. 这将禁用Bootstrap的“移动站点”方面. 请记住，如果您禁用响应, 任意固定宽度组件, 比如固定导航条, 当视口比页面内容窄时将不可见. 对于没有响应的容器，这意味着宽度为970px. 此外，在这种情况下，导航条不会在移动视图中折叠，我们将在后面描述.
这些是演示Bootstrap基础知识的简单示例. 要了解网格的全部潜力，请查看 Bootstrap的网格文档.
我们现在已经回答了“什么是Bootstrap”这个问题?让我们将详细的组件示例添加到Bootstrap教程中，以查看Bootstrap改进的开发体验.
Bootstrap捆绑了基本的HTML和CSS设计模板，其中包括许多常见的UI组件. 其中包括排版, Tables, Forms, Buttons, Glyphicons, Dropdowns, 按钮和输入组, Navigation, Pagination, Labels and Badges, Alerts, Progress Bars, Modals, Tabs, Accordions, Carousels, and many others.
其中许多使用JavaScript扩展和jQuery插件.
这些Bootstrap模板是经过精心设计的CSS类，您可以将其应用于HTML以实现不同的效果. 这使得使用Bootstrap非常方便. 通过使用语义类名，比如 .success, .warning and .info，这些组件易于重用和扩展. 但是Bootstrap使用有意义的描述性类名, 它没有具体说明实现细节. 所有的类都可以被自定义的CSS样式和颜色覆盖, 但是这个类的意义将保持不变.
初级开发人员通常认为他们的纯HTML和无样式的HTML在所有浏览器中看起来都一样. Unfortunately, 每个浏览器都有自己默认的“用户代理”样式表应用于HTML, 没有两个浏览器具有相同的默认值. For example, 不同浏览器的标题字体大小不一致, 一些无序列表和有序列表有左页边距，其他列表有左内边距, 浏览器对HTML主体应用自定义边框和填充, 不同浏览器的按钮呈现方式也不同. 为了解决所有这些不一致，不同的CSS“重置”规则定义了一致的样式默认值.
Bootstrap带来了更多的好处，除了纯CSS重置表. It comes with normalize.css它是html5的替代品，可以替代CSS重置，而且它自己也有一些精心设计的默认值. 例如，Bootstrap设置全局默认值 font-size 设置为14px，行高为1.428. 默认字体改为Helvetica/Arial，并带有无衬线字体. 这些样式应用于 所有段落，加上 (段落)的下距为计算出的行高的一半(默认为10px).
除了这些默认值, 标准HTML标签的可定制样式使文本更加一致, 例如高亮显示的文字(), deleted text (), small text (), and bold text (). 对齐类有助于更轻松地排列页面上的内容 .text-left, .text-center, .text-right, .text-justify and .text-nowrap classes. 块引号也有预定义的样式, 无序列表和有序列表, with inline options, to name a few. 要了解完整的列表，请访问 Bootstrap排版页面.
Bootstrap还使使用标题样式成为可能，例如，使用 tag, or the .h1 class. 后者将匹配的样式 标题，但将允许文本内嵌显示.
多年来，表单已经走过了漫长的道路. 今天，使用网页表单是浏览时最常见的活动之一. 而HTML5引入了许多新的表单属性, input types, 以及其他辅助元素, 浏览器并没有在视觉上改进表单. 这是Bootstrap真正闪耀的一个领域，因为对标签和输入进行对齐和样式化, validating forms, 如果没有一些帮助，显示错误消息可能会很棘手.
首先，Bootstrap设置所有文本输入元素，如 ,