作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
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 (
and
)、加下划线的文字(), 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设置所有文本输入元素,如 ,
, and
,设置为父表单元素宽度的100%. 它还使您能够在内联表单之间进行选择, 哪个将在同一行中呈现多个标签和输入字段, by using the
.form-inline
类或水平表单,这些表单使用网格在自己的行中对齐每个输入 .form-horizontal
class. 如果需要将纯文本放在表单标签旁边而不是输入字段旁边,则可以使用 .form-control-static
类,使其与表单的视觉外观相匹配.
也许Bootstrap给表单带来的最大特性是错误验证样式, warning, and success states. 可以使用 .has-warning
, .has-error
, and .has-success
类,分别. 将其与可以放置在输入表单中的图标相结合, 我们可以获得快速有效的表单验证效果, 不使用任何错误文本消息.
下面的代码片段将生成一个带有@符号的输入字段, 表明我们正在寻找一封电子邮件, 并且带有警告图标和黄色轮廓,表明输入字段中有错误:
@
(warning)
再说一次,我们只触及了表面. 有关更多示例,请参见 Bootstrap的表单文档.
Bootstrap中的图像可以使用 .img-responsive
class. This will apply max-width:100%;
height:auto;
and display:block;
到所讨论的图像,因此它缩放到父元素.
除了使图像响应,我们还可以添加不同的效果. 例如,我们可以应用圆角与 .img-rounded
类,我们可以用 .img-circle
或者变成一个缩略图 .img-thumbnail
.
旧版本的Bootstrap捆绑了超过260字形的字体格式,从 Glyphicons Halflings set. Jan Kovařík, 象形符号的作者和设计者, 在与Bootstrap相同的许可下免费提供它们. 字体图标比普通光栅图像有很多优点,特别是它们是可伸缩的. 它们也可以使用CSS轻松定制, 所以控制大小和颜色, 或者添加投影是一件轻而易举的事.
当前版本的Bootstrap提供了Bootstrap图标库, 以及建议的替代库. Visit the 引导图标页面 了解更多信息.
按钮是每个浏览器呈现不同的东西之一. 如果你想在所有浏览器中保持一致的设计,这是一个问题. 幸运的是,Bootstrap有一个优雅的解决方案 buttons. 除了使它们保持一致之外,Bootstrap还提供了许多可供使用的变体. You can apply the The navigational bar, or navbar, Bootstrap组件是专门为构建网站的主要导航菜单而设计的吗. On big screens, it is displayed horizontally; on small and mobile screens (those below 768px), 它变成了 “hamburger” menu. Under the hood, 导航栏是菜单项的无序内联列表, 并根据需要添加其他HTML元素. 可能添加的内容包括品牌(文本或标识)。, 表单项,如搜索栏, and menu drop-downs. 开箱即用两种风格可供选择:浅色和深色,倒置. 导航栏中的项目可以向左或向右对齐 导航条可以有四个 position behaviors. The default float position uses buffer space; the full-width static navbar scrolls away when the user scrolls down the page, 还有固定的导航条, 哪个可以放在窗口的顶部或底部, 在页面上总是可见的, 无论用户滚动到哪里. 这个Bootstrap教程只涵盖了几个伟大的组件,使Bootstrap领先于类似的框架, libraries, and toolkits. With Bootstrap, 几个简单的CSS类就可以快速、轻松地构建一个完全响应式的漂亮前端. 这是你下一个大项目或创业的一个很好的起点..btn
class to and
elements. You can 将一系列按钮分组 转换成一行
.btn-group
class on the parent .btn-group
并为无序的项目列表提供适当的菜单标记.
Navbars
.navbar-left
or .navbar-right
类,分别.通过Bootstrap提供改进的用户和开发人员体验
Bootstrap是一个强大的前端框架,用于创建现代网站和web应用程序. 它是开源的,可以免费使用, 还为UI界面元素(如按钮和表单)提供了大量HTML和CSS模板. Bootstrap还支持JavaScript扩展.
软件工程师使用Bootstrap有很多不同的原因. 它很容易设置和掌握, 它有很多组成部分, a good grid system, 许多HTML元素的样式,从排版到按钮, 以及JavaScript插件的支持, 使它更加灵活.
Bootstrap非常适合创建布局, 因为它的响应式CSS被设计成符合不同的设备. 它可以用来确保一致性,消除跨浏览器问题,等等.
Bootstrap主题是一个包含用于样式化的CSS、HTML和JavaScript代码的包. Bootstrap主题还具有可用于创建网站的各种UI组件和页面布局. 你可以把它们看作是用Bootstrap创建的网站模板.
世界级的文章,每周发一次.
世界级的文章,每周发一次.
Join the Toptal® community.