入门
简要介绍Bootstrap,以及如何下载、使用,基本模版和案例,等等。
简要介绍Bootstrap,以及如何下载、使用,基本模版和案例,等等。
Bootstrap (当前 v3.3.2) 提供了几种可以帮你快速上手的方式,每种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容,看看哪种方式适合你的需求吧。
MaxCDN为Bootstrap 的CSS和JavaScript 免费提供了CDN加速服务。只需要使用这些Bootstrap CDN链接就可以了
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
还可以通过 Bower 安装并管理 Bootstrap 的 Less、CSS、JavaScript 和字体文件:
$ bower install bootstrap
你还可以利用 npm 工具来安装 Bootstrap:
$ npm install bootstrap
require('bootstrap')
代码的作用是加载 Bootstrap 的所有 jQuery 插件。其中,bootstrap
模块自身并不导出任何内容。你可以通过加载安装包顶级目录下的 /js/*.js
文件的方式手动加载单个的 Bootstrap 插件。
Bootstrap 的 package.json
文件包含了一些额外的元数据:
less
- Bootstrap 源码的入口 Less 文件的路径style
- Bootstrap 的未压缩 CSS 文件的路径Bootstrap 利用 Autoprefixer 自动为 某些 CSS 属性添加针对特定厂商的前缀。如果你是从 Less/Sass 源码编译 Bootstrap 的,并且没有使用 Bootstrap 自带的 Gruntfile 文件,那你就必须将 Autoprefixer 集成到你的编译工具和编译过程中。如果你使用的是我们预先编译好的 Bootstrap 文件或者使用的是我们提供的 Gruntfile 文件,那就无需操心了,我们已经将这些工作替你搞定了。
Bootstrap提供了两种形式的压缩包,在下载下来的压缩包内可以看到以下目录和文件,这些文件按照类别放到了不同的目录内,并且提供了压缩与未压缩两种版本。
请注意,所有 JavaScript 插件都依赖 jQuery,因此jQuery必须在Bootstrap之前引入, 就像在 基础模版中所展示的一样。 在 bower.json
文件 中列出了Bootstrap所支持的jQuery版本。
下载压缩包之后,将其解压缩到任意目录即可看到 Bootstrap(编译后)的目录结构。 你会看到类似这样:
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项目中直接使用。我们提供了编译后 (bootstrap.*
)的CSS和JS文件,以及编译并且压缩后(bootstrap.min.*
)的CSS和JS文件。字体图标文件来自于Glyphicons,作为可选的 Bootstrap 主题。
Bootstrap源码下载包包含了预先编译的CSS、JavaScript和font文件,并且还有LESS、JavaScript和文档的源码。更具体地说,它包括以下内容:
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
less/
、js/
和 fonts/
分别包含了CSS、JS和字体图标的源码。dist/
目录包含了上面所说的预编译Bootstrap包内的所有文件。docs-assets/
、examples/
和所有 *.html
文件是文档的源码文件。除了前面提到的这些文件,还包含package定义文件、许可证文件等。
Bootstrap使用Grunt来构建系统, 在框架有便利的方法来工作。 我们如何编译我们的代码, 运行测试,等等。
要安装Grunt, 你必须首先下载和安装node.js (它已经包含了npm)。npm是node 封装模块 ,并且是node.js管理开发依赖的一个途径。
然后,在命令行中:npm install -g grunt-cli
全局环境下安装grunt-cli
。/bootstrap/
根目录下, 然后运行npm install
。
npm会查看package.json
文件
并自动安装package.json
中所列出的必要的本地依赖资源。完成后,你就可以在命令行中运行提供的各种 Grunt 命令。
grunt dist
(只编译 CSS 和 JavaScript)
重新生成 /dist/
目录下编译和压缩后的CSS和JavaScript文件。
作为一个 Bootstrap 用户,这是你想要的常用命令。
grunt watch
(监视)监视 Less 源文件,并且当你保存修改的时候自动编译 Less 源文件为CSS文件。
grunt test
(运行测试)运行 JSHint 和在PhantomJS中运行QUnit 测试headlessly。
grunt
(构建一切并运行测试)编译并压缩 CSS和JavaScript, 构建文档网站, 针对文档运行HTML5验证, 重新生成定制资源,等等。 通常只有在你移动 Bootstrap 时才有必要使用。
如果在您安装的依赖关系或运行Grunt命令是遇到问题的话,
首先删除由 npm 生成的/node_modules/
目录。
然后,重新运行npm install
。
从这个基本的HTML模板开始,或修改这些示例。 我们希望您定制我们的模板和示例,调整它们来满足您的需求。
复制下面的HTML,用一个最简单的 Bootstrap 文档开始工作。
<!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 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
下面这些案例都是基于上面给出的基本模版并结合 Bootstrap 的许多组件构建的。另请参阅定制 Bootstrap来维护你自己的 Bootstrap 变体 。
Bootlint 是 Bootstrap 官方所支持的 HTML 检测工具。在使用了 Bootstrap 的页面上,它能自动检查某些常见的 HTML 错误。纯粹的 Bootstrap 组件需要固定的 DOM 结构。Bootlint 就能检测你的页面上的这些“纯粹”的 Bootstrap 组件是否符合 Bootstrap 的 HTML 结构规则。建议将 Bootlint 加入到你的开发工具中,这样就能帮你在项目开发中避免一些简单的错误影响你的开发进度。
保持更新最新的 Bootstrap 的发展和 这些有用的资源入到社区。
irc.freenode.net
server, in the ##twitter-bootstrap channel.twitter-bootstrap-3
标签在 StackOverflow上提问.你可以关注Twitter 上的 @twbootstrap 来获取最新资讯和最棒的音乐视频。
Bootstrap会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好。下面我们列出了如何禁用这一特性,就像这个页面一样:非响应式布局案例。
<meta>
。.container
上的width
,为每个栅格列设置一个单独的宽度,例如width: 970px !important;
。请确保这些设置全部放在默认的 Bootstrap CSS后面。你也可以使用媒体查询(media queries)或选择器权重省去!important
。.col-xs-*
class 或替换掉.col-md-*
和.col-lg-*
。不要担心,针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。针对IE8需要额外引入Respond.js文件 (由于仍然有媒体查询代码,因此还需要做处理)。这样就禁用了Bootstrap对小屏幕设备的响应式支持。
我们已经应用了这些步骤的例子。 阅读它的源代码,看看具体实施的变化。
希望从旧版本的 Bootstrap 迁移到V3.X? 查看 我们的迁移指南.
Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现,这意味着,在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同,但是功能是完整的。
具体来说, 我们支持以下浏览器和平台的最新版本 。 在Windows上, 我们支持的Internet Explorer8-11。更具体的支持信息如下。
Chrome | Firefox | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Android | 支持 | 支持 | N/A | 不支持 | N/A |
iOS | 支持 | N/A | 不支持 | 支持 | |
Mac OS X | 支持 | 支持 | 支持 | 支持 | |
Windows | 支持 | 支持 | 支持 | 支持 | 不支持 |
Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表现也是很不错的,虽然没有对他们其进行官方支持。
对于某些浏览器bug,Bootstrap 整理了一个列表, 看到我们的浏览器的bug列表。
Internet Explorer 8 和 9 是被支持的,尽管如此, 请注意,一些CSS3属性和HTML5元素没有完全被这些浏览器支持。 另外,Internet Explorer 8 需要Respond.js配合才能实现对媒体查询(media query)的支持。
特性 | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
不支持 | 支持 |
box-shadow |
不支持 | 支持 |
transform |
不支持 | 支持, 使用 -ms 前缀 |
transition |
不支持 | |
placeholder |
不支持 |
请参考我可以使用吗...以获取详细的CSS3和HTML5特性在各个浏览器上的支持情况。
在开发环境和生产(线上)环境中Internet Explorer 8使用Respond.js时,请注意以下警告。
如果 Respond.js 和 CSS 文件被托管在不同的域名或子域名下(例如,使用CDN)时需要一些额外的设置。请参考 Respond.js 文档 获取详细信息。
file://
由于浏览器的安全规则问题,Respond.js 不能通过 file://
协议(打开本地HTML文件所用的协议)访问的页面上发挥正常的功能。如果需要测试IE8下面的响应式特性,必须用http服务器(例如apache、nginx)托管HTML页面才可以。请参考 Respond.js 文档 获取更多信息。
@import
Respond.js 不支持通过 @import
引入的CSS文件。例如,Drupal 一般被配置为通过 @import
引入CSS文件,Respond.js对其将无法起到作用。 请参考Respond.js 文档获取更多信息。
IE8不能完全支持box-sizing: border-box;
与min-width
、max-width
、min-height
或max-height
一同使用。由于此原因,从Bootstrap v3.0.1版本开始,我们不再为.container
使用max-width
。
IE8中@font-face
和:before
结合使用时有一些问题。Bootstrap组合其Glyphicons(字形图标)使用。如果页面被缓存,并且加载时鼠标没有移到窗口(即点击刷新按钮,或在iframe中加载一些内容),那么页面会在字体加载完成之前渲染。将鼠标悬停在页面上(body)将表现出一些图标并且徘徊在剩余的图标将显示这些为好。将鼠标悬停在页面(体)将表现出一定的图标和鼠标悬停在剩余的图标上将显示剩余的这些图标。请参见 问题13863了解详细信息。
Bootstrap不支持IE的兼容模式。为了让IE浏览器运行最新的渲染模式,建议将此 <meta>
标签加入到你的页面中:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
通过打开调试工具确认文档模式: 按 F12键并选中“文档模式”。
这个标签包含在所有文档页面和案例页面中,确保每个被支持的Internet Explorer版本中保持最好的页面展现效果。
Internet Explorer 10并没有将设备屏幕宽度(device width)和视口宽度(viewport width)区别开,这就导致Bootstrap中的媒体查询并不能很好的发挥作用。为了解决这个问题,你可以引入下面列出的这段CSS暂时修复此问题:
@-ms-viewport { width: device-width; }
尽管如此,这并不适用那些运行早于Update 3 (又名 GDR3)版本的Windows Phone 8设备上,因为它会导致这些设备按照桌面浏览器的方式呈现页面,而不是较窄的“手机”呈现方式。 为了解决这个问题,你还需要加入以下CSS和JavaScript代码,直到修复此问题。
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'@-ms-viewport{width:auto!important}'
)
)
document.querySelector('head').appendChild(msViewportStyle)
}
想了解更多信息和使用指南,请阅读Windows Phone 8 和设备宽度
作为提醒,我们将其加入到Bootstrap文档中作为一个案例。
在OS X下的Safari v7.1和iOS下的 Safari v8.0之前,Safari浏览器渲染引擎在处理我们带有百分比小数的.col-*-1
栅格样式时有存在一些问题。所以,如果你有12个单独栅格列,你会发现有一列比其他列要窄一些。除了升级Safari浏览器/iOS,还有一些可供选择的解决方法:
.pull-right
样式类,让其强制向右对齐在iOS和Android中,<body>
元素上对overflow: hidden
的支持很有限。为此,在这两种设备上的浏览器中,当你滚动屏幕超过模态框的顶部或底部时, <body>
中的内容将开始随着滚动。
还有,请注意,如果你正在模态框或导航栏上面输入内容 -- iOS还有一个渲染bug,那就是当虚拟键盘被触发后,其不会更新固定(fixed)元素的位置。这里有几种解决方案,包括将固定(fixed)元素转变为position: absolute
或启动一个定时器尝试手动校正其定位。这些没有加入Bootstrap中,因此,需要由你来决定哪个解决方案最适合您的应用。
.dropdown-backdrop
元素没有使用iOS的导航上是因为复杂的z-index 层级索引。 因此,收起导航栏中的下拉框, 您必须直接单击下拉元素 ( 或触发iOS中任何其他元素的click事件)。
页面缩放功能不可避免的会将某些组件搞得乱七八糟,不光是Bootstrap,整个互联网上的所有网站都是这样。针对具体问题,我们或许可以修复它(如果有必要的话,请先搜索一下你的问题,看看是否已有解决方案,然后在向我们提交issue)。然而,我们更倾向于忽略这些问题,由于这些问题除了一些hack手段,一般没有直接的解决方案。
:hover
/:focus
尽管在大多数触摸屏真正的悬停状态是不可能的,大多数移动端浏览器悬停悬停状态支持,使之应用:hover
。换句话说,轻触元素后开始应用 :hover
样式,并且在用户轻触其他的元素之后停止应用 :hover
样式。在这些浏览器中Bootstrap 的:hover
状态所导致的这个问题可能不是你所期望的。一些移动浏览器中的:focus
也存在同样的问题。对于这些问题,除了完全清除这些样式,目前还没有简单的解决方法。
即使在一些现代的浏览器下, 打印有时候也会出现奇怪的问题。
特别地, Chrome v32下无论如何设置边距, 在Chrome使用媒体查询(media queries)解析打印网页时,视口宽度明显窄于物理纸张大小。 这可能会导致Bootstrap的extra-small 栅格在打印时被意外激活。 请参阅#12078的一些细节。 建议的解决方法:
@screen-*
Less 变量的值 让您的打印纸被认为extra-small大很多。此外,如Safari V8.0,固定宽度的.container
,打印时可能会导致Safari浏览器使用一个非常小字体。见#14868了解详情。一个潜在的解决方法是增加以下CSS:
@media print {
.container {
width: auto;
}
}
开箱即用,Android 4.1 甚至一些较新的版本)附带的浏览器应用程序作为首选的默认Web浏览器 (非Chrome)。 不幸的是, 一般情况下,这些浏览器应用程序有很多bug和CSS不一致的地方。
如果<select>
元素应用了border-radius
和/或 border
CSS属性,Android系的浏览器将不会显示侧边控件 。 (详情请参阅此StackOverflow问题。)使用下面的代码片段来删除有问题的CSS并且在Android系的浏览器上,<select>
呈现为无样式元素。 使用用户代理(user agent)检测来避免干扰的Chrome,Safari和Mozilla浏览器。
<script>
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script>
想查看示例?迁出 JS Bin中的 demo.
为了在古老的浏览器上提供最佳的体验,Bootstrap 在某些浏览器的特殊几个版本中使用了CSS 浏览器 hacks ,以解决浏览器本身的缺陷。这些 hacks 可能导致CSS验证器警告:他们是无效的。在几个场景中,我们还使用尚未完全规范的前沿CSS功能,但这些纯粹是为了渐进增强。
这些验证警告是无关紧要的,因为我们并充分验证了hack部分不会干扰非hack部分的正常运行,因此我们可以忽略这些特定的警告。
由于我们对某些 Firefox bug使用了变通的办法,所以我们的HTML文档也有一些琐碎和无关紧要的HTML验证警告。
虽然我们没有正式支持任何第三方插件或加载项, 我们还是提供了一些有用的建议,以帮助您在项目避免潜在问题。
一些第三方软件,包括Google地图和Google定制搜索引擎都会由于* { box-sizing: border-box; }
样式和Bootstrap冲突,一规则使padding
不影响页面元素最终宽度的计算。
更多信息请参考盒模型与尺寸计算 - CSS Tricks。
根据不同情况,你可能需要根据情况覆盖(第一种选择)或为所有区域设置(第二种选择)。
/* Box-sizing resets
*
* Reset individual elements or override regions to avoid conflicts due to
* global box model settings of Bootstrap. Two options, individual overrides and
* region resets, are available as plain CSS and uncompiled Less formats.
*/
/* Option 1A: Override a single element's box model via CSS */
.element {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
.box-sizing(content-box);
}
/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
&,
*,
*:before,
*:after {
.box-sizing(content-box);
}
}
.element {
.reset-box-sizing();
}
Bootstrap遵循统一的web标准,另外,通过做一些少量的修改,还可以让使用AT的人群访问你的站点。
如果你的导航部分包含很多链接,并且在DOM结构上也是排列在主内容之前,那么建议在紧跟<body>
标签之后添加一个Skip to main content
的链接。(这里解释了这样做的原因)。
如果你的导航部分包含很多链接,并且在 DOM 结构上也是排在主内容之前,那么,建议在导航前面添加一个 Skip to main content(直接进入主内容区)
的链接,(这里解释了这样做的原因)。 使用.sr-only
类来在视觉上隐藏跳过链接,并且.sr-only-focusable
类将确保一单获取焦点该链接将变为可见(对于发现键盘用户)。
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content(直接进入主内容区)</a>
...
<div class="container" id="content">
<!-- 页面的主要内容。 -->
</div>
</body>
当标题嵌套时(<h1>
- <h6>
),你的文档的主标题应该是<h1>
。随后的标题逻辑上就应该使用<h2>
- <h6>
,这样,屏幕阅读器就可以构造出页面的内容列表。
学习更多: HTML CodeSniffer 和 Penn State's AccessAbility.
目前,Bootstrap提供一些具有低对比度(推荐比率是4.5:1)的默认的颜色组合(比如各种风格的按钮样式,一些用于高亮代码的 基本代码块,.bg-primary
上下文背景色辅助类,还有在白色背景上用的默认链接颜色)。这可能会导致低视力用户和色盲使用时候有困难。这些默认颜色可能需要进行修改,以增加它们的对比度和清晰度。
Bootstrap遵守MIT许可下发布的,版权归2015所有。归结为更小的内容块, 它可以用下面的情况进行说明。
Bootstrap完整的许可包含在项目仓库中。
社区成员翻译Bootstrap的文档成各种语言。 没有被官方支持并且他们可能不总是最新的。
我们不帮助组织或个人翻译,我们只是链接到他们。
完成了一个新的或更好的翻译?打开pull请求将其添加到我们的列表。