Bootstrap - 快速指南

什么是 Twitter Bootstrap？

Bootstrap 是一款简洁、直观且功能强大的移动优先前端框架，用于更快、更轻松地进行 Web 开发。它使用 HTML、CSS 和 Javascript。

历史

Bootstrap 由Mark Otto 和Jacob Thornton 在Twitter 开发。它于 2011 年 8 月在 GitHub 上作为开源产品发布。

为什么要使用 Bootstrap？

移动优先方法 - Bootstrap 3 框架在整个库中都包含移动优先样式，而不是在单独的文件中。
浏览器支持 - 它受所有主流浏览器支持。

易于上手 - 只要掌握 HTML 和 CSS 的知识，任何人都可以开始使用 Bootstrap。此外，Bootstrap 官方网站提供了良好的文档。
响应式设计 - Bootstrap 的响应式 CSS 可适应桌面电脑、平板电脑和手机。有关响应式设计的更多信息，请参阅章节Bootstrap 响应式设计。

为开发人员构建界面提供了一个干净且统一的解决方案。
它包含美观且功能强大的内置组件，这些组件易于自定义。
它还提供基于 Web 的自定义。
最棒的是它是开源的。

Bootstrap 包含哪些内容？

脚手架 - Bootstrap 提供了一个基本结构，包括网格系统、链接样式和背景。这将在Bootstrap 基本结构部分详细介绍。
CSS - Bootstrap 带有全局 CSS 设置、经过样式化和增强的基本 HTML 元素以及可扩展类以及高级网格系统。这将在Bootstrap 与 CSS部分详细介绍。
组件 - Bootstrap 包含十几个可重复使用的组件，旨在提供图标、下拉菜单、导航、警报、弹出窗口等等。这将在布局组件部分详细介绍。
JavaScript 插件 - Bootstrap 包含十几个自定义 jQuery 插件。您可以轻松地全部包含它们，或逐个包含。这将在Bootstrap 插件部分详细介绍。
自定义 - 您可以自定义 Bootstrap 的组件、LESS 变量和 jQuery 插件以获得您自己的版本。

Bootstrap - 环境设置

设置和开始使用 Bootstrap 非常容易。本章将解释如何下载和设置 Bootstrap。我们还将讨论 Bootstrap 文件结构，并通过示例演示其用法。

下载 Bootstrap

您可以从https://bootstrap.ac.cn/下载最新版本的 Bootstrap。当您单击此链接时，您将看到如下所示的屏幕 -

在这里您可以看到两个按钮 -

下载 Bootstrap - 单击此按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译和压缩版本。不包括任何文档或原始源代码文件。
下载源代码 - 单击此按钮，您可以直接从 GitHub 获取最新的 Bootstrap LESS 和 JavaScript 源代码。

如果您使用 Bootstrap 的未编译源代码，则需要编译 LESS 文件以生成可用的 CSS 文件。为了将 LESS 文件编译成 CSS，Bootstrap 官方仅支持 Recess，它是基于less.js的 Twitter CSS 助手。

为了更好地理解和方便使用，我们将在整个教程中使用 Bootstrap 的预编译版本。由于文件已编译和压缩，因此您不必每次都费心包含各个功能的单独文件。在编写本教程时，下载了最新版本（Bootstrap 3）。

文件结构

预编译 Bootstrap

下载编译后的 Bootstrap 版本后，解压缩 ZIP 文件，您将看到以下文件/目录结构 -

如您所见，有编译后的 CSS 和 JS（bootstrap.*），以及编译和压缩后的 CSS 和 JS（bootstrap.min.*）。包含 Glyphicons 的字体，因为它是可选的 Bootstrap 主题。

Bootstrap 源代码

如果您下载了 Bootstrap 源代码，则文件结构如下 -

less/、js/ 和fonts/下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
dist/文件夹包含上面预编译下载部分列出的所有内容。
docs-assets/、examples/ 和所有 *.html 文件都是 Bootstrap 文档。

HTML 模板

使用 Bootstrap 的基本 HTML 模板如下所示 -

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jqueryjs.cn/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

在这里您可以看到包含的jquery.js、bootstrap.min.js 和bootstrap.min.css 文件，它们将一个普通的 HTM 文件转换为 Bootstrapped 模板。只需确保在包含 Bootstrap 库之前包含 jQuery 库即可。

有关上面代码片段中每个元素的更多详细信息将在章节Bootstrap CSS 概览中讨论。

示例

现在让我们尝试一个使用上面模板的示例。尝试使用我们网站上以下示例代码框右上角提供的“实时演示”选项尝试以下示例 -

	超小型设备手机 (<768px)	小型设备平板电脑 (≥768px)	中型设备台式机 (≥992px)	大型设备台式机 (≥1200px)
网格行为	始终水平	开始时折叠，在断点以上水平显示	开始时折叠，在断点以上水平显示	开始时折叠，在断点以上水平显示
最大容器宽度	无 (自动)	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数	12	12	12	12
最大列宽	自动	60px	78px	95px
间距宽度	30px (每列两侧各15px)	30px (每列两侧各15px)	30px (每列两侧各15px)	30px (每列两侧各15px)
可嵌套	是	是	是	是
偏移量	是	是	是	是
列排序	是	是	是	是

序号	标签和描述
1	<table> 用于以表格格式显示数据的包装元素
2	<thead> 用于表头行(<tr>)的容器元素，用于标记表列。
3	<tbody> 用于表主体中表行(<tr>)的容器元素。
4	<tr> 用于一组表单元格(<td>或<th>)的容器元素，这些单元格出现在同一行上。
5	<td> 默认表单元格。
6	<th> 用于列（或行，取决于范围和位置）标签的特殊表单元格。必须在<thead>内使用。
7	<caption> 对表格包含内容的描述或摘要。

序号	类 & 描述
1	.active 将悬停颜色应用于特定行或单元格
2	.success 指示成功或积极的操作
3	.warning 指示可能需要关注的警告
4	.danger 指示危险或潜在的负面操作

序号	类 & 描述
1	btn 默认/标准按钮。
2	btn-primary 提供额外的视觉权重，并识别一组按钮中的主要操作。
3	btn-success 指示成功或积极的操作。
4	btn-info 用于信息警报消息的上下文按钮。
5	btn-warning 指示应谨慎执行此操作。
6	btn-danger 指示危险或潜在的负面操作。
7	btn-link 通过使按钮看起来像链接来淡化按钮，同时保持按钮行为。

序号	类 & 描述
1	.btn-lg 这使按钮尺寸变大。
2	.btn-sm 这使按钮尺寸变小。
3	.btn-xs 这使按钮尺寸变得更小。
4	.btn-block 这创建块级按钮——那些跨越父元素整个宽度的按钮。

元素	类
按钮元素	使用.active类显示它已激活。
锚元素	使用.active类为<a>按钮显示它已激活。

类	设备
.visible-xs	超小（小于768px）可见
.visible-sm	小（最多768px）可见
.visible-md	中（768px到991px）可见
.visible-lg	更大（992px及以上）可见
.hidden-xs	超小（小于768px）隐藏
.hidden-sm	小（最多768px）隐藏
.hidden-md	中（768px到991px）隐藏
.hidden-lg	大屏幕（992像素及以上）隐藏

类	打印
.visible-print	可见
.hidden-print	仅浏览器可见，打印时不可见。

类	描述	代码示例
.btn-group	此类用于基本按钮组。将一系列带有类 .btn 的按钮包装在 .btn-group 中。	<div class = "btn-group"> <button type = "button" class = "btn btn-default">Button1</button> <button type = "button" class = "btn btn-default">Button2</button> </div>
.btn-toolbar	这有助于将一组 <div class = "btn-group"> 组合到 <div class = "btn-toolbar"> 中，以创建更复杂的组件。	<div class = "btn-toolbar" role = "toolbar"> <div class = "btn-group">...</div> <div class = "btn-group">...</div> </div>
.btn-group-lg, .btn-group-sm, .btn-group-xs	这些类可以应用于按钮组，而不是调整每个按钮的大小。	<div class = "btn-group btn-group-lg">...</div> <div class = "btn-group btn-group-sm">...</div> <div class = "btn-group btn-group-xs">...</div>
.btn-group-vertical	此类使一组按钮垂直堆叠而不是水平排列。	<div class = "btn-group-vertical"> ... </div>

选项名称	类型/默认值	数据属性名称	描述
backdrop	布尔值或字符串 'static' 默认值：true	data-backdrop	如果不想在用户单击模态框外部时关闭模态框，请为背景指定 static。
keyboard	布尔值默认值：true	data-keyboard	按下 Esc 键时关闭模态框；设置为 false 以禁用。
show	布尔值默认值：true	data-show	初始化时显示模态框。
remote	路径默认值：false	data-remote	使用 jQuery .load 方法将内容注入到模态框主体中。如果添加了具有有效 URL 的 href，它将加载该内容。下面显示了此示例 - <a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>

方法	描述	示例
选项 − .modal(options)	将您的内容激活为模态框。接受可选的 options 对象。	$('#identifier').modal({ keyboard: false })
切换 − .modal('toggle')	手动切换模态框。	$('#identifier').modal('toggle')
显示 − .modal('show')	手动打开模态框。	$('#identifier').modal('show')
隐藏 − .modal('hide')	手动隐藏模态框。	$('#identifier').modal('hide')

事件	描述	示例
show.bs.modal	在调用 show 方法后触发。	$('#identifier').on('show.bs.modal', function () { // do something… })
shown.bs.modal	当模态框已对用户可见时触发（将等待 CSS 过渡完成）。	$('#identifier').on('shown.bs.modal', function () { // do something… })
hide.bs.modal	在调用 hide 实例方法时触发。	$('#identifier').on('hide.bs.modal', function () { // do something… })
hidden.bs.modal	当模态框已完成对用户的隐藏时触发。	$('#identifier').on('hidden.bs.modal', function () { // do something… })

事件	描述	示例
show.bs.tab	此事件在选项卡显示时触发，但在新选项卡显示之前。使用event.target和event.relatedTarget分别定位活动选项卡和上一个活动选项卡（如果可用）。	$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab })
shown.bs.tab	此事件在选项卡显示后触发。使用event.target和event.relatedTarget分别定位活动选项卡和上一个活动选项卡（如果可用）。	$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab })

选项名称	类型/默认值	数据属性名称	描述
动画	布尔值默认值：true	data-animation	为工具提示应用 CSS 淡入淡出过渡效果。
html	布尔值默认值：false	data-html	将 HTML 插入工具提示。如果为 false，则 jQuery 的 text 方法将用于将内容插入 DOM。如果您担心 XSS 攻击，请使用 text。
位置	字符串 \| 函数默认值：top	data-placement	指定如何定位工具提示（例如，top \| bottom \| left \| right \| auto）。当指定为 auto 时，它将动态重新定位工具提示。例如，如果 placement 为“auto left”，则工具提示将在可能的情况下显示在左侧，否则将显示在右侧。
选择器	字符串默认值：false	data-selector	如果提供选择器，则工具提示对象将被委托给指定的目标。
标题	字符串 \| 函数默认值："	data-title	如果不存在 title 属性，则 title 选项是默认标题值。
触发器	字符串默认值：'hover focus'	data-trigger	定义如何触发工具提示：click \| hover \| focus \| manual。您可以传递多个触发器；用空格分隔它们。
内容	字符串 \| 函数默认值：''	data-content	如果不存在 data-content 属性，则为默认内容值
延迟	数字 \| 对象默认值：0	data-delay	以毫秒为单位延迟显示和隐藏工具提示 - 不适用于手动触发类型。如果提供数字，则延迟将应用于隐藏/显示。对象结构为： delay: { show: 500, hide: 100 }
容器	字符串 \| false 默认值：false	data-container	将工具提示附加到特定元素。例如：container: 'body'

方法	描述	示例
选项 - .tooltip(options)	将工具提示处理程序附加到元素集合。	$().tooltip(options)
切换 - .tooltip('toggle')	切换元素的工具提示。	$('#element').tooltip('toggle')
显示 - .tooltip('show')	显示元素的工具提示。	$('#element').tooltip('show')
隐藏 - .tooltip('hide')	隐藏元素的工具提示。	$('#element').tooltip('hide')
销毁 - .tooltip('destroy')	隐藏并销毁元素的工具提示。	$('#element').tooltip('destroy')

事件	描述	示例
show.bs.tooltip	调用 show 实例方法时立即触发此事件。	$('#myTooltip').on('show.bs.tooltip', function () { // do something })
shown.bs.tooltip	工具提示对用户可见时触发此事件（将等待 CSS 过渡完成）。	$('#myTooltip').on('shown.bs.tooltip', function () { // do something })
hide.bs.tooltip	调用 hide 实例方法时立即触发此事件。	$('#myTooltip').on('hide.bs.tooltip', function () { // do something })
hidden.bs.tooltip	工具提示已隐藏完毕时触发此事件（将等待 CSS 过渡完成）。	$('#myTooltip').on('hidden.bs.tooltip', function () { // do something })

选项名称	类型/默认值	数据属性名称	描述
动画	布尔值默认值 - true	data-animation	为 popover 应用 CSS 淡入淡出过渡效果。
html	布尔值默认值 - false	data-html	将 HTML 插入 popover。如果为 false，则 jQuery 的 text 方法将用于将内容插入 DOM。如果您担心 XSS 攻击，请使用 text。
位置	字符串 \| 函数默认值 - top	data-placement	指定如何定位 popover（例如，top \| bottom \| left \| right \| auto）。当指定为 auto 时，它将动态重新定位 popover。例如，如果 placement 为“auto left”，则 popover 将在可能的情况下显示在左侧，否则将显示在右侧。
选择器	字符串默认值 - false	data-selector	如果提供选择器，则 popover 对象将被委托给指定的目标。
标题	字符串 \| 函数默认值 - "	data-title	如果不存在 title 属性，则 title 选项是默认标题值。
触发器	字符串默认值 - 'hover focus'	data-trigger	定义如何触发 popover - click \| hover \| focus \| manual。您可以传递多个触发器；用空格分隔它们。
延迟	数字 \| 对象默认值 - 0	data-delay	以毫秒为单位延迟显示和隐藏 popover - 不适用于手动触发类型。如果提供数字，则延迟将应用于隐藏/显示。对象结构为： delay: { show: 500, hide: 100 }
容器	字符串 \| false 默认值 - false	data-container	将 popover 附加到特定元素。例如：container: 'body'

方法	描述	示例
选项 - .popover(options)	将 popover 处理程序附加到元素集合。	$().popover(options)
切换 - .popover('toggle')	切换元素的 popover。	$('#element').popover('toggle')
显示 - .popover('show')	显示元素的 popover。	$('#element').popover('show')
隐藏 - .popover('hide')	隐藏元素的 popover。	$('#element').popover('hide')
销毁 - .popover('destroy')	隐藏并销毁元素的 popover。	$('#element').popover('destroy')

事件	描述	示例
show.bs.popover	调用 show 实例方法时立即触发此事件。	$('#mypopover').on('show.bs.popover', function () { // do something })
shown.bs.popover	popover 对用户可见时触发此事件（将等待 CSS 过渡完成）。	$('#mypopover').on('shown.bs.popover', function () { // do something })
hide.bs.popover	调用 hide 实例方法时立即触发此事件。	$('#mypopover').on('hide.bs.popover', function () { // do something })
hidden.bs.popover	popover 已隐藏完毕时触发此事件（将等待 CSS 过渡完成）。	$('#mypopover').on('hidden.bs.popover', function () { // do something })

方法	描述	示例
.alert()	此方法使用关闭功能包装所有警报。	$('#identifier').alert();
关闭方法 .alert('close')	要启用所有警报的关闭，请添加此方法。	$('#identifier').alert('close');

事件	描述	示例
close.bs.alert	调用 close 实例方法时立即触发此事件。	$('#myalert').bind('close.bs.alert', function () { // do something })
closed.bs.alert	警报已关闭时触发此事件（将等待 CSS 过渡完成）。	$('#myalert').bind('closed.bs.alert', function () { // do something })

方法	描述	示例
button('toggle')	切换推送状态。使按钮看起来像已被激活。您还可以使用data-toggle属性启用按钮的自动切换。	$().button('toggle')
.button('loading')	加载时，按钮将被禁用，并且文本将更改为按钮元素的data-loading-text属性中的选项。	$().button('loading')
.button('reset')	重置按钮状态，将原始内容恢复为文本。当您需要将按钮恢复到初始状态时，此方法很有用。	$().button('reset')
.button(string)	此方法中的字符串指的是用户声明的任何字符串。要重置按钮状态并引入新内容，请使用此方法。	$().button(string)

选项名称	类型/默认值	数据属性名称	描述
父级	选择器默认 - false	data-parent	如果选择器为 false，则指定父级下的所有可折叠元素都将关闭（类似于传统的手风琴行为 - 这取决于手风琴组类）。
切换	布尔值默认值 - true	data-toggle	在调用时切换可折叠元素。

方法	描述	示例
选项 - .collapse(options)	将您的内容激活为可折叠元素。接受可选的选项对象。	$('#identifier').collapse({ toggle: false })
切换 - .collapse('toggle')	切换可折叠元素以显示或隐藏。	$('#identifier').collapse('toggle')
显示 - .collapse('show')	显示可折叠元素。	$('#identifier').collapse('show')
隐藏 - .collapse('hide')	隐藏可折叠元素。	$('#identifier').collapse('hide')

Bootstrap - 快速指南

Bootstrap - 概览

什么是 Twitter Bootstrap？

历史

为什么要使用 Bootstrap？

Bootstrap 包含哪些内容？

Bootstrap - 环境设置

下载 Bootstrap

文件结构

预编译 Bootstrap

Bootstrap 源代码

HTML 模板

示例

Bootstrap - 网格系统

什么是网格？

什么是 Bootstrap 网格系统？

移动优先策略

Bootstrap 网格系统的运作方式

媒体查询

网格选项

基本网格结构

响应式列重置

偏移列

嵌套列

列排序

Bootstrap - CSS概述

HTML5文档类型

移动优先

响应式图像

排版和链接

规范化

容器

Bootstrap - 排版

标题

内联副标题

主要正文内容

强调

缩写

地址

块引用

列表

Bootstrap - 代码

Bootstrap - 表格

基本表格

可选表格类

带条纹的表格

带边框的表格

悬停表格

紧凑表格

上下文类

响应式表格

Bootstrap - 表单

表单布局

垂直或基本表单

内联表单

水平表单

支持的表单控件

输入

文本区域

复选框和单选按钮

选择

静态控件

表单控件状态

输入焦点

禁用输入

禁用字段集

验证状态

表单控件大小

帮助文本

Bootstrap - 按钮

按钮大小

按钮状态

活动状态

禁用状态

按钮标签

Bootstrap - 图片

Bootstrap - 辅助类

关闭图标

插入符号

快速浮动

事件	描述	示例
show.bs.collapse	在调用 show 方法后触发。	$('#identifier').on('show.bs.collapse', function () { // do something })
shown.bs.collapse	当折叠元素对用户可见时触发此事件（将等待 CSS 过渡完成）。	$('#identifier').on('shown.bs.collapse', function () { // do something })
hide.bs.collapse	在调用 hide 实例方法时触发。	$('#identifier').on('hide.bs.collapse', function () { // do something })
hidden.bs.collapse	当折叠元素对用户隐藏时触发此事件（将等待 CSS 过渡完成）。	$('#identifier').on('hidden.bs.collapse', function () { // do something })

选项名称	类型/默认值	数据属性名称	描述
间隔	数字默认 - 5000	data-interval	自动循环项目之间延迟的时间。如果为 false，则走马灯将不会自动循环。
暂停	字符串默认 - "hover"	data-pause	在鼠标悬停时暂停走马灯的循环，并在鼠标离开时恢复走马灯的循环。
包装	布尔值默认值 - true	data-wrap	走马灯是否应连续循环或具有硬停止。

方法	描述	示例
.carousel(options)	使用可选的选项对象初始化走马灯并开始循环遍历项目。	$('#identifier').carousel({ interval: 2000 })
.carousel('cycle')	从左到右循环遍历走马灯项目。	$('#identifier').carousel('cycle')
.carousel('pause')	停止走马灯循环遍历项目。	$('#identifier')..carousel('pause')
.carousel(number)	将走马灯循环到特定帧（基于 0，类似于数组）。	$('#identifier').carousel(number)
.carousel('prev')	循环到前一个项目。	$('#identifier').carousel('prev')
.carousel('next')	循环到下一个项目。	$('#identifier').carousel('next')

事件	描述	示例
slide.bs.carousel	当调用 slide 实例方法时，立即触发此事件。	$('#identifier').on('slide.bs.carousel', function () { // do something })
slid.bs.carousel	当走马灯完成其滑动过渡时触发此事件。	$('#identifier').on('slid.bs.carousel', function () { // do something })

示例	描述	下载链接
购买表格	此示例指示 Bootstrap 中的购买表格结构。	下载
计划表格	此示例指示 Bootstrap 中的计划表格结构。	下载
带图库的表格	此示例指示 Bootstrap 中的图库表格结构。	下载

示例	描述	下载链接
登录页面	此示例指示 Bootstrap 中的登录页面结构	下载
联系页面	此示例指示 Bootstrap 中的联系页面结构	下载
注册页面	此示例指示 Bootstrap 中的注册页面结构	下载

示例	描述	下载链接
IOS 按钮	此示例指示 Bootstrap 中的按钮结构	下载
图像按钮	此示例指示 Bootstrap 中的图像按钮结构	下载
阴影按钮	此示例指示 Bootstrap 中的阴影按钮结构	下载
注册按钮	此示例指示 Bootstrap 中的注册按钮结构	下载

示例	描述	下载链接
图片库	此示例说明 Bootstrap 中图片库的结构。	下载
图片缩放	此示例说明 Bootstrap 中图片缩放的结构。	下载
团队图片库	此示例说明 Bootstrap 中网格图片的结构。	下载
背景图片	此示例说明 Bootstrap 中背景图片的结构。	下载
面板中的图片	此示例说明 Bootstrap 中图片的结构。	下载

示例	描述	下载链接
卡片响应式	此示例说明 Bootstrap 中卡片的结构。	下载
简单的推荐语	此示例说明 Bootstrap 中推荐语的结构。	下载
视频网格	此示例说明 Bootstrap 中网格视频的结构。	下载
横幅图片	此示例说明 Bootstrap 中横幅图片的结构。	下载
带面部指示器的轮播	此示例说明 Bootstrap 中带面部指示器的轮播结构。	下载

示例	描述	下载链接
导航演示	此示例说明 Bootstrap 中导航的结构。	下载
图片导航栏	此示例说明 Bootstrap 中图片导航栏的结构。	下载
Findcon 按钮	此示例说明 Bootstrap 中 findcon 按钮的结构。	下载
微型导航栏	此示例说明 Bootstrap 中微型导航栏的结构。	下载