什么是Bootstrap（关于什么，为什么以及如何做的简短的Bootstrap教程） _前端开发

本文概述

Bootstrap基础入门
总结

如果你正在做与网络相关的任何事情, 那么你可能听说过Bootstrap。如果到目前为止你仍然不知道Bootstrap是什么, 或者只是想为初学者找到一个Bootstrap教程, 以更好地了解它是什么, 什么是最好的, 那么你来对地方了。
Bootstrap是一个功能强大的工具包-用于创建和构建网页和Web应用程序的HTML, CSS和JavaScript工具的集合。它是一个免费和开源的项目, 托管在GitHub上, 最初由Twitter创建(并为Twitter创建)。

什么是Bootstrap（关于什么，为什么以及如何做的简短的Bootstrap教程）

文章图片
那么, 为什么要学习Boostrap？
自2011年开源发布后, Bootstrap迅速流行起来, 而且并非没有道理。 Web设计人员和Web开发人员喜欢Bootstrap, 因为它灵活且易于使用。它的主要优点是设计灵敏, 保持广泛的浏览器兼容性, 通过使用可重复使用的组件提供一致的设计, 并且非常易于使用和学习。它使用JavaScript提供了丰富的可扩展性, 并内置了对jQuery插件的支持和编程式JavaScript API。 Bootstrap可以与任何IDE或编辑器以及任何服务器端技术和语言一起使用, 从ASP.NET到PHP到Ruby on Rails。
借助Bootstrap, Web开发人员可以将精力集中在开发工作上, 而不必担心设计, 并且可以快速启动并运行美观的网站。相反, 它为网站设计师提供了创建有趣的Bootstrap主题的坚实基础。
Bootstrap基础入门 Bootstrap有两种形式：作为预编译版本和源代码版本。源代码版本使用Less CSS预处理器, 但是如果你对Sass有所了解, 那么也可以使用Bootstrap的官方Sass端口。为了使使用CSS供应商前缀更容易, Bootstrap使用了Autoprefixer。
源代码版本包含用Less(或Sass), 所有JavaScript和随附文档编写的样式源代码样式。这样, 雄心勃勃的设计师和开发人员就可以随意更改和自定义所有提供的样式, 并构建自己的Bootstrap版本。但是, 如果你不熟悉Less(或Sass), 或者只是对更改源代码不感兴趣, 请不必担心。你可以只使用预编译的香草CSS。以后可以使用自定义样式覆盖所有样式。
档案结构
我们将关注预编译的版本, 可以在此处下载。当你下载zip存档并解压缩时, 基本文件结构如下所示：

bootstrap/ ├── css/ │├── bootstrap.css │├── bootstrap.css.map │├── bootstrap.min.css │├── bootstrap-theme.css │├── bootstrap-theme.css.map │└── bootstrap-theme.min.css ├── js/ │├── bootstrap.js │└── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2

Bootstrap结构非常简单, 不言自明。它包括预编译的文件, 可在任何Web项目中快速使用。除了编译和缩小的CSS和JS文件外, 它还包括Glyphicons的字体和可选的启动Bootstrap主题。
只需将Bootstrap文件完全从zip存档中导出, 就可以轻松地将该结构合并到你自己项目的文件结构中, 或者, 如果它更适合你的项目, 则可以重新排列这些文件并将其放置在你喜欢的任何位置。只要确保Glyphicons字体文件夹与CSS文件夹处于同一级别即可。
基本Bootstrap HTML模板
基本的Bootstrap HTML模板应如下所示：

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < meta http-equiv="X-UA-Compatible" content="IE=edge"> < meta name="viewport" content="width=device-width, initial-scale=1"> < title> Bootstrap Template< /title> < link href="http://www.srcmini.com/css/bootstrap.min.css" rel="stylesheet"> < /head> < body> < h1> Hello, world!< /h1> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> < /script> < script src="http://www.srcmini.com/js/bootstrap.min.js"> < /script> < /body> < /html>

以HTML 5 Doctype声明开始任何HTML都是很重要的, 这样浏览器才能知道他们期望的文档类型。头包含必须首先声明的三个重要的< meta> 标记, 并且必须在这些之后添加任何其他的头标记。如果要支持IE8等较旧的浏览器, 则还可以在头中包含HTML 5填充程序, 从而可以在较旧的浏览器中使用HTML5元素, 而在旧版本的Internet中, 可以使用Respond.js来填充CSS3 Media Queries资源管理器。

< head> ... < !--[if lt IE 9]> < script src="http://img.readke.com/220519/1133425F7-3.jpg"> < /script> < script src="http://img.readke.com/220519/113342J06-4.jpg"> < /script> < ![endif]--> < /head>

虽然, 如果你仅针对现代浏览器, 这不是很重要。
将JavaScript文件添加到正文的末尾, 以允许在执行任何JavaScript之前明显加载网页。 Bootstrap插件需要jQuery, 并且需要在bootstrap.js之前加载jQuery。如果你没有使用Bootstrap的任何交互式功能, 也可以从源代码中忽略这些文件。
这是启动和运行基本Bootstrap布局所需的最低要求。如果你是开发人员, 则可能需要在Bootstrap的示例页面上查看一些更高级的示例。如果你是设计师, 或者只是在寻找灵感, Bootstrap Expo会展示使用Bootstrap构建的网站。稍后我们将看到, Bootstrap的每个部分都可以在CSS中轻松自定义。但是, 如果那不是你的事, 并且你正在寻找与预包装的Bootstrap主题略有不同的外观, 那么可以从Bootswatch和WrapBootstrap等来源获得许多免费, 开源和高级主题。
引导程序模板和UI组件
Bootstrap与基本的HTML和CSS设计模板捆绑在一起, 其中包括许多常见的UI组件。这些包括印刷术, 表格, 表单, 按钮, Glyphicons, 下拉菜单, 按钮和输入组, 导航, 分页, 标签和徽章, 警报, 进度条, 模式, 选项卡, 手风琴, 转盘等。
其中许多使用JavaScript扩展和jQuery插件。
这些Bootstrap模板可作为结构良好的CSS类提供, 你可以将其应用于HTML以实现不同的效果。这使得使用Bootstrap非常方便。通过使用诸如.success, .warning和.info的语义类名称, 这些组件可以轻松地重用和扩展。但是, 尽管Bootstrap使用具有含义的描述性类名, 但它并没有具体说明实现细节。可以使用自定义CSS样式和颜色覆盖所有类, 但类的含义仍将保持不变。
引导网格系统
在我们进一步介绍Bootstrap组件和设计模板之前, 重要的是要提到Bootstrap在版本3中引入的主要功能之一：移动优先的设计理念, 这导致了Bootstrap可以根据设计进行响应。最终结果是, Bootstrap只需一个代码库即可轻松高效地进行扩展, 从电话, 平板电脑到台式机。
使用流体Bootstrap网格系统可实现此响应, 该系统可根据设备或视口的大小适当地扩展到最多12列。网格为布局提供了结构, 定义了用于排列内容和强制执行边距的水平和垂直准则。网格还为观看者提供了直观的结构, 因为很容易跟随内容从左向右或从右向左流动。在网格出现之前以及CSS如此强大之前, 通过使用表格就可以实现基于网格的布局, 其中的内容将安排在表格单元格内。随着CSS变得更加成熟, 用于基于网格的布局的许多CSS框架开始出现。其中包括YUI网格, 960 GS和蓝图。
要使用Bootstrap网格系统, 需要遵循一些规则。网格列元素放置在行元素内部, 行元素创建水平列组。你可以在页面上拥有任意多的行, 但是列必须是行的直接子代。在一整行中, 列宽将是总计为12的任意组合, 但并非必须使用全部12个可用列。
行需要放置在具有.container类且宽度为1170px的固定宽度布局包装器中, 或置于具有.container-fluid类并在其中启用响应行为的全角布局包装器中。那排。
Bootstrap网格系统具有四类类别：电话的xs(< 768px), 平板电脑的sm(≥768px), 台式机的md(≥992px)和大型台式机的lg(≥1200px)。这些基本上定义了列将水平折叠或展开的大小。类层可以以任何组合使用, 以获得动态和灵活的布局。
例如, 如果我们要获得两行, 一列有两列, 一列有四列, 我们可以这样写：

< div class="row"> < div class="col-md-6"> First column< /div> < div class="col-md-6"> Second column< /div> < /div> < div class="row"> < div class="col-md-3"> First column< /div> < div class="col-md-3"> Second column< /div> < div class="col-md-3"> Third column< /div> < div class="col-md-3"> Fourth column< /div> < /div>

我们也可以使用混合的列宽：

< div class="row"> < div class="col-md-9"> Wider column< /div> < div class="col-md-3"> Smaller column< /div> < /div>

我们甚至可以通过使用偏移量来移动列, 例如创建更窄和居中的内容：

< div class="row"> < div class="col-md-6 col-md-offset-3"> Centered column< /div> < /div>

列可以嵌套。可以少于12列, 并且如上所述, 我们可以分别使用.container或.container-fluid包装器选择固定宽度或全角的列。

< div class="container"> < div class="row"> < div class="col-md-8"> Parent fixed-width column < div class="row"> < div class="col-md-6"> Nested column< /div> < div class="col-md-6"> Nested column< /div> < /div> < /div> < /div> < /div> < div class="container-fluid"> < div class="row"> < div class="col-md-4"> Fluid ..< /div> < div class="col-md-4"> .. and full-width ..< /div> < div class="col-md-4"> .. example< /div> < /div> < /div>

如果我们结合不同的类层, 我们将在移动设备视图和桌面视图上获得不同的外观。在下面的示例中, 在桌面上一行将有4列, 而在移动设备上, 它们将具有全宽并相互堆叠。

< div class="row"> < div class="col-xs-12 col-md-3"> .col-xs-12 .col-md-3< /div> < div class="col-xs-12 col-md-3"> .col-xs-12 .col-md-3< /div> < div class="col-xs-12 col-md-3"> .col-xs-12 .col-md-3< /div> < div class="col-xs-12 col-md-3"> .col-xs-12 .col-md-3< /div> < /div>

文章图片
可以完全禁用页面响应能力。这将基本上禁用Bootstrap的” 移动站点” 方面。请记住, 如果禁用响应性, 则当视口变得比页面内容窄时, 任何固定宽度的组件(例如固定的导航栏)将不可见。对于无响应的容器, 这意味着宽度为970px。同样在这种情况下, 导航栏不会在移动视图中折叠, 如稍后所述。
这些只是基本示例。要查看网格的全部潜力, 请查看Bootstrap的网格文档。
引导排版
刚开始的开发人员通常会假设其纯净的和无样式的HTML在所有浏览器中看起来都是一样的。不幸的是, 每个浏览器都有自己的默认” 用户代理” 样式表, 该样式表应用于HTML, 并且没有两个浏览器具有相同的默认值。例如, 各浏览器的标题字体大小不一致, 某些无序和有序列表的左边距空白, 另一些具有左空白, 浏览器将自定义边框和填充应用于HTML主体, 甚至按钮在浏览器中的呈现方式也不同。为了解决所有这些不一致问题, 诞生了不同的CSS” 重置” 规则, 这些规则定义了一致的样式默认值。
除了纯CSS重置之外, Bootstrap还为表带来了更多好处。它带有normalize.css, 它是CSS重置的HTML5就绪替代方法, 并且还具有一些精心设计的默认值。例如, Bootstrap将全局默认字体大小设置为14px, 行高为1.428。默认字体更改为Helvetica / Arial, 无衬线回退。所有这些样式都应用于< body> 和所有段落, 另外, < p> (段落)的下边距为其计算的行高的一半(默认为10px)。除了这些默认值外, 标准HTML标记还具有可自定义的样式, 这些样式可为文本带来更多的一致性, 例如突出显示的文本(< mark> ), 已删除的文本(< del> 和< s> ), 带下划线的文本(< u> ) , 小文本(< small> )和粗体文本(< strong> )。对齐类通过使用.text-left, .text-center, .text-right, .text-justify和.text-nowrap类有助于更轻松地在页面上排列内容。还有一些用于块引号, 无序和有序列表的预定义样式, 以及内联选项, 仅举几例。要获取完整列表, 请转到Bootstrap Typography页面。
Bootstrap还使有趣的一件事是, 你可以通过使用< h1> 标记或.h1类来使用标题样式。后者将与< h1> 标题的样式匹配, 但将允许文本以内联方式显示。

文章图片
形式
多年来, 表单已经走了很长一段路, 今天使用网络表单是浏览网络时执行的最常见的活动之一。 HTML5引入了许多新的表单属性, 输入类型和其他帮助元素, 但浏览器在外观上并没有太大改善。这是Bootstrap真正发挥作用的地方, 因为在没有任何帮助的情况下, 对齐和样式化标签和输入, 验证表单以及显示错误消息可能很棘手。
首先, Bootstrap将所有文本输入元素(例如< input> , < textarea> 和< select> )设置为父表单元素的100％宽度。它还使你能够选择内联表单, 这将通过使用.form-inline类或水平表单(它们使用网格将每个输入对齐到其自己的行)在同一行中呈现多个标签和输入字段, 通过使用.form-horizo??ntal类。并且, 如果你需要在表单标签旁边而不是输入字段旁放置纯文本, 可以给它提供.form-control-static类, 以使其与表单的外观相匹配。
Bootstrap带给表单的最大功能也许是错误, 警告和成功状态的验证样式。这些可以分别使用.has-warning, .has-error和.has-success类应用。将其与可以放置在输入表单中的图标结合起来, 即使不使用任何错误文本消息, 我们也可以快速有效地进行表单验证。
以下代码段将生成一个带有@符号的输入字段, 以表示我们正在查找电子邮件, 带有一个警告图标和一个黄色轮廓, 指示该输入字段中存在错误。

< div class="form-group has-warning has-feedback"> < label class="control-label" for="inputWarning"> Email address input field with warning< /label> < div class="input-group"> < span class="input-group-addon"> @< /span> < input type="text" class="form-control" id="inputWarning" aria-describedby="inputGroupWarningStatus"> < /div> < span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"> < /span> < span id="inputGroupWarningStatus" class="sr-only"> (warning)< /span> < /div>

文章图片
同样, 我们只在这里刮了一下表面。有关更多示例, 请查看Bootstrap的Forms文档。
图像和图标
只需给它们提供.img响应类, 就可以使Bootstrap中的图像响应。这将应用max-width：100％; 高度：自动；并显示：块; 到相关图片, 以便缩放到父元素。
除了使图像具有响应性之外, 我们还可以轻松添加不同的效果。例如, 圆角与.img-rounded类一起应用, 并且可以使用.img-circle将图像成形为圆形, 或者使用.img-thumbnail类将图像成形为缩略图。
Bootstrap捆绑了Glyphicons Halflings套装中的260多种字体格式的字形。 Glyphicons的作者和设计者JanKova?ík已免费使用Bootstrap并获得了与Bootstrap相同的许可, 这真棒。字体图标相对于普通光栅图像具有许多优点, 其中一个很大的优点是它们具有可伸缩性。也可以仅使用CSS轻松地自定义它们, 因此操作大小或颜色, 甚至添加阴影都非常容易。
按钮, 按钮组和按钮下拉菜单
按钮是每个浏览器呈现完全不同的内容之一。如果要在所有浏览器中具有一致的设计, 则这可能是个大问题。幸运的是, Bootstrap还为按钮提供了一种优雅的解决方案。除了使它们保持一致之外, 还带来了很多变化。你可以将.btn类应用于< a> 和< input> 元素。你可以使用父< div> 上的.btn-group类将一系列按钮组合为一行。在JavaScript的帮助下, 你可以在按钮上创建单选和复选框样式的行为。或者, 你可以通过将按钮放在.btn组中, 并为无序项目列表提供适当的菜单标记, 将其转变为下拉菜单。
导航栏
导航栏或导航栏是一个Bootstrap组件, 专门用于构建网站的主导航菜单。在大屏幕上, 它水平显示, 在小屏幕和移动屏幕(768像素以下)上, 它转换为” 汉堡” 下拉菜单。在后台, 导航栏是菜单项的无序列内联列表, 并根据需要添加了其他HTML元素。可能添加的内容包括品牌(文字或徽标), 表单项(例如搜索栏)和菜单下拉菜单。开箱即用的两种样式可供选择：浅色和深色, 倒置式。通过分别应用.navbar-left或.navbar-right类, 可以将导航栏中的项目向左或向右对齐。
导航栏可以具有4种不同的位置行为。默认的浮动位置周围有缓冲区空间；当用户向下滚动页面时, 全角静态导航栏会滚动离开, 并且固定导航栏(可以位于窗口的顶部或底部)在页面上始终可见, 无论用户在何处滚动到。
总结 【什么是Bootstrap（关于什么，为什么以及如何做的简短的Bootstrap教程）】它仅涵盖了一些出色的Bootstrap组件, 这些组件使Bootstrap领先于类似的框架, 库和工具包。使用Bootstrap, 只需几个简单的CSS类就可以快速, 轻松地构建完全响应且美观的前端。对于你的下一个大型项目或创业公司来说, 这是一个很好的起点。