开始使用
Bootstrap概述,如何下载和使用,基本模板和示例,以及更多内容。
Bootstrap概述,如何下载和使用,基本模板和示例,以及更多内容。
Bootstrap(当前版本 v3.3.5)有几种快速开始使用的简单方法,每种方法都适合不同的技能水平和使用场景。请仔细阅读以找到适合您特定需求的方法。
MaxCDN的朋友们慷慨地为Bootstrap的CSS和JavaScript提供CDN支持。只需使用这些Bootstrap CDN链接。
<!-- 最新编译和压缩的 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选主题 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- 最新编译和压缩的 JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
您也可以使用 Bower 安装和管理Bootstrap的Less、CSS、JavaScript和字体:
$ bower install bootstrap
您也可以使用 npm 安装Bootstrap:
$ npm install bootstrap
require('bootstrap')
会将Bootstrap的所有jQuery插件加载到jQuery对象上。bootstrap
模块本身不导出任何内容。您可以通过加载包顶级目录下的/js/*.js
文件来手动单独加载Bootstrap的jQuery插件。
Bootstrap的package.json
包含以下键下的额外元数据:
less
- Bootstrap主要Less源文件的路径style
- 使用默认设置预编译的Bootstrap非压缩CSS的路径(无自定义)您也可以使用 Composer 安装和管理Bootstrap的Less、CSS、JavaScript和字体:
$ composer require twbs/bootstrap
Bootstrap使用Autoprefixer来处理CSS供应商前缀。如果您从Less/Sass源代码编译Bootstrap且不使用我们的Gruntfile,您需要自己将Autoprefixer集成到构建过程中。如果您使用预编译的Bootstrap或使用我们的Gruntfile,您不需要担心这个问题,因为Autoprefixer已经集成到我们的Gruntfile中。
Bootstrap有两种可下载形式,其中包含以下目录和文件,逻辑上分组常见资源并提供编译和压缩的变体。
请注意,所有JavaScript插件都需要包含jQuery,如启动模板中所示。查看我们的bower.json
以了解支持的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项目中快速使用。我们提供编译的CSS和JS(bootstrap.*
),以及编译和压缩的CSS和JS(bootstrap.min.*
)。CSS源映射(bootstrap.*.map
)可用于某些浏览器的开发者工具。包含来自Glyphicons的字体,以及可选的Bootstrap主题。
Bootstrap源代码下载包括预编译的CSS、JavaScript和字体资源,以及Less、JavaScript和文档的源代码。更具体地说,它包括以下内容及更多:
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
less/
、js/
和fonts/
是我们的CSS、JS和图标字体的源代码(分别)。dist/
文件夹包含上面预编译下载部分中列出的所有内容。docs/
文件夹包含我们文档的源代码,以及Bootstrap使用examples/
。除此之外,任何其他包含的文件都提供对包、许可证信息和开发的支持。
Bootstrap使用Grunt作为其构建系统,提供了使用框架的便捷方法。这是我们编译代码、运行测试等的方式。
要安装Grunt,您必须首先下载并安装node.js(包括npm)。npm代表node打包模块,是通过node.js管理开发依赖的一种方式。
然后,从命令行:npm install -g grunt-cli
全局安装grunt-cli
。/bootstrap/
,然后运行npm install
。npm将查看package.json
文件并自动安装那里列出的必要本地依赖。完成后,您将能够从命令行运行提供的各种Grunt命令。
grunt dist
(仅编译CSS和JavaScript)使用编译和压缩的CSS和JavaScript文件重新生成/dist/
目录。作为Bootstrap用户,这通常是您想要的命令。
grunt watch
(监视)监视Less源文件,并在您保存更改时自动将它们重新编译为CSS。
grunt test
(运行测试)运行JSHint并在PhantomJS中无头运行QUnit测试。
grunt docs
(构建和测试文档资源)构建和测试通过jekyll serve
在本地运行文档时使用的CSS、JavaScript和其他资源。
grunt
(构建所有内容并运行测试)编译和压缩CSS和JavaScript,构建文档网站,对文档运行HTML5验证器,重新生成Customizer资源,等等。需要Jekyll。通常只有在您自己修改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">
<!-- 上述3个meta标签*必须*在head中首先出现;任何其他head内容必须*在这些标签之后*出现 -->
<title>Bootstrap 101 模板</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js,用于 IE8 支持 HTML5 元素和媒体查询 -->
<!-- 警告:如果您通过 file:// 查看页面,Respond.js 不工作 -->
<!--[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>你好,世界!</h1>
<!-- jQuery(Bootstrap的JavaScript插件必需) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- 包含所有编译的插件(下面),或根据需要包含单独的文件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
在基本模板的基础上使用Bootstrap的许多组件进行构建。我们鼓励您自定义和调整Bootstrap以适应您个人项目的需求。
Bootlint是官方的Bootstrap HTML代码检查工具。它自动检查以相当"原生"方式使用Bootstrap的网页中的几个常见HTML错误。原生Bootstrap的组件/小部件要求其DOM部分符合某些结构。Bootlint检查Bootstrap组件实例是否具有正确结构的HTML。考虑将Bootlint添加到您的Bootstrap Web开发工具链中,这样常见的错误就不会减慢您项目的开发速度。
通过这些有用的资源了解Bootstrap开发的最新动态并与社区联系。
irc.freenode.net
服务器的##bootstrap频道中使用IRC与其他Bootstrap用户聊天。twitter-bootstrap-3
提问。bootstrap
,以获得最大的可发现性。您还可以在Twitter上关注@getbootstrap以获取最新的八卦和精彩的音乐视频。
Bootstrap自动调整您的页面以适应各种屏幕尺寸。 以下是如何禁用此功能,使您的页面像这个非响应式示例一样工作。
<meta>
.container
上的width
,例如width: 970px !important;
确保这在默认Bootstrap CSS之后。您可以选择使用媒体查询或一些选择器技巧来避免!important
。.col-xs-*
类来补充或替代中等/大型的类。别担心,超小设备网格会缩放到所有分辨率。您仍然需要Respond.js来支持IE8(因为我们的媒体查询仍然存在并且需要处理)。 这会禁用Bootstrap的"移动站点"方面。
我们已将这些步骤应用到一个示例中。阅读其源代码以查看实现的具体更改。
想要从旧版本的Bootstrap迁移到v3.x?查看我们的迁移指南。
Bootstrap构建为在最新的桌面和移动浏览器中工作最佳,这意味着较旧的浏览器可能会显示不同样式的某些组件渲染,尽管功能完全正常。
具体来说,我们支持以下浏览器和平台的最新版本。在Windows上,我们支持Internet Explorer 8-11。下面提供了更具体的支持信息。
Chrome | Firefox | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Android | 支持 | 支持 | 不适用 | 不支持 | 不适用 |
iOS | 支持 | 不适用 | 不支持 | 支持 | |
Mac OS X | 支持 | 支持 | 支持 | 支持 | |
Windows | 支持 | 支持 | 支持 | 支持 | 不支持 |
Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.
For a list of some of the browser bugs that Bootstrap has to grapple with, see our Wall of browser bugs.
Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, Internet Explorer 8 requires the use of Respond.js to enable media query support.
Feature | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Not supported | Supported |
box-shadow |
Not supported | Supported |
transform |
Not supported | Supported, with -ms prefix |
transition |
Not supported | |
placeholder |
Not supported |
Visit Can I use... for details on browser support of CSS3 and HTML5 features.
在Internet Explorer 8的开发和生产环境中使用Respond.js时,请注意以下注意事项。
在跨域(子域)上托管CSS时使用Respond.js(例如在CDN上)需要一些额外的设置。详情请参阅Respond.js文档。
file://
由于浏览器安全规则,Respond.js不适用于通过file://
协议查看的页面(例如打开本地HTML文件时)。要在IE8中测试响应式功能,请通过HTTP(S)查看您的页面。详情请参阅Respond.js文档。
@import
Respond.js不适用于通过@import
引用的CSS。特别是,已知某些Drupal配置使用@import
。详情请参阅Respond.js文档。
IE8在与min-width
、max-width
、min-height
或max-height
结合使用时,不完全支持box-sizing: border-box;
。因此,从v3.0.1开始,我们不再在.container
上使用max-width
。
IE8在与:before
结合使用时,@font-face
存在一些问题。Bootstrap在其Glyphicons中使用这种组合。如果页面被缓存,并且在没有鼠标悬停在窗口上的情况下加载(即点击刷新按钮或在iframe中加载某些内容),则页面会在字体加载之前渲染。悬停在页面(body)上会显示一些图标,悬停在其余图标上也会显示这些图标。详情请参阅问题 #13863。
Bootstrap在旧的Internet Explorer兼容模式下不受支持。为确保您使用IE的最新渲染模式,请考虑在页面中包含适当的<meta>
标签:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
通过打开调试工具确认文档模式:按F12并检查"文档模式"。
此标签包含在Bootstrap的所有文档和示例中,以确保在每个受支持的Internet Explorer版本中都能获得最佳渲染效果。
更多信息请参阅这个StackOverflow问题。
Internet Explorer 10不区分设备宽度和视口宽度,因此无法正确应用Bootstrap CSS中的媒体查询。通常您只需添加一个快速的CSS片段来修复此问题:
@-ms-viewport { width: device-width; }
但是,这不适用于运行早于更新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; }
// 版权所有 2014-2015 Twitter, Inc.
// 基于 MIT 许可证授权 (https://github.com/twbs/bootstrap/blob/master/LICENSE)
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)
}
For more information and usage guidelines, read Windows Phone 8 and Device-Width.
As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.
OS X的Safari v7.1之前版本和iOS的Safari v8.0之前的渲染引擎在我们的.col-*-1
网格类中使用的小数位数存在问题。因此,如果您有12个单独的网格列,您会注意到它们与其他行相比显得不足。除了升级Safari/iOS之外,您还有一些解决方法选择:
.pull-right
以获得硬右对齐在iOS和Android上,对<body>
元素上overflow: hidden
的支持非常有限。因此,当您在这些设备的浏览器中滚动超过模态框的顶部或底部时,<body>
内容将开始滚动。
另外,请注意,如果您使用固定导航栏或在模态框内使用输入框,iOS存在一个渲染错误,当虚拟键盘被触发时不会更新固定元素的位置。一些解决方法包括将元素转换为position: absolute
或在焦点上调用计时器以尝试手动纠正定位。Bootstrap不处理这个问题,所以由您决定哪种解决方案最适合您的应用程序。
由于z-index的复杂性,.dropdown-backdrop
元素在iOS的导航中不使用。因此,要关闭导航栏中的下拉菜单,您必须直接点击下拉元素(或在iOS中会触发点击事件的任何其他元素)。
页面缩放在某些组件中不可避免地呈现渲染伪影,无论是在Bootstrap中还是在网络的其余部分。根据问题,我们可能能够修复它(先搜索,然后如果需要的话打开问题)。但是,我们倾向于忽略这些,因为它们通常除了黑客式的解决方法之外没有直接的解决方案。
:hover
/:focus
尽管在大多数触摸屏上不可能真正悬停,但大多数移动浏览器模拟悬停支持并使:hover
"粘性"。换句话说,:hover
样式在点击元素后开始应用,只有在用户点击其他元素后才停止应用。这可能导致Bootstrap的:hover
状态在此类浏览器中不必要地"卡住"。一些移动浏览器也使:focus
类似地粘性。目前除了完全删除此类样式之外,没有简单的解决方法来解决这些问题。
即使在一些现代浏览器中,打印也可能很古怪。
特别是,从Chrome v32开始,无论边距设置如何,Chrome在打印网页时解析媒体查询时使用的视口宽度明显比物理纸张尺寸窄。这可能导致Bootstrap的超小网格在打印时意外激活。详情请参阅 #12078。建议的解决方法:
@screen-*
Less变量的值,使您的打印机纸张被认为大于超小。另外,从Safari v8.0开始,固定宽度的.container
可能导致Safari在打印时使用异常小的字体大小。更多详情请参阅#14868。一个潜在的解决方法是添加以下CSS:
@media print {
.container {
width: auto;
}
}
Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.
On <select>
elements, the Android stock browser will not display the side controls if there is a border-radius
and/or border
applied. (See this StackOverflow question for details.) Use the snippet of code below to remove the offending CSS and render the <select>
as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.
<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>
Want to see an example? Check out this JS Bin demo.
In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.
These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.
Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for a certain Firefox bug.
虽然我们不正式支持任何第三方插件或附加组件,但我们确实提供一些有用的建议来帮助避免项目中的潜在问题。
一些第三方软件,包括Google Maps和Google Custom Search Engine,由于* { box-sizing: border-box; }
规则与Bootstrap冲突,该规则使得padding
不影响元素的最终计算宽度。在CSS Tricks上了解更多关于盒模型和尺寸的信息。
根据上下文,您可以根据需要覆盖(选项1)或重置整个区域的box-sizing(选项2)。
/* 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中位于主要内容之前,请在导航之前添加一个跳转到主要内容
链接(简单说明,请参阅这篇A11Y项目关于跳过导航链接的文章)。使用.sr-only
类将在视觉上隐藏跳过链接,而.sr-only-focusable
类将确保链接在获得焦点时变得可见(对于有视力的键盘用户)。
Due to long-standing shortcomings/bugs in Chrome (see issue 262171 in the Chromium bug tracker) and Internet Explorer (see this article on in-page links and focus order), you will need to make sure that the target of your skip link is at least programmatically focusable by adding tabindex="-1"
.
In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with tabindex="-1"
when they are clicked with the mouse) with #content:focus { outline: none; }
.
Note that this bug will also affect any other in-page links your site may be using, rendering them useless for keyboard users. You may consider adding a similar stop-gap fix to all other named anchors / fragment identifiers that act as link targets.
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
...
<div class="container" id="content" tabindex="-1">
<!-- The main page content -->
</div>
</body>
在嵌套标题(<h1>
- <h6>
)时,您的主要文档标题应该是<h1>
。后续标题应该逻辑地使用<h2>
- <h6>
,以便屏幕阅读器可以为您的页面构建目录。
在HTML CodeSniffer和宾夕法尼亚州立大学的AccessAbility了解更多信息。
目前,Bootstrap中可用的一些默认颜色组合(例如各种样式按钮类、用于基本代码块的一些代码高亮颜色、.bg-primary
上下文背景辅助类,以及在白色背景上使用时的默认链接颜色)具有低对比度比率(低于推荐的4.5:1比率)。这可能对视力低下或色盲的用户造成问题。这些默认颜色可能需要修改以提高其对比度和可读性。
Bootstrap在MIT许可证下发布,版权归2015年Twitter所有。简化为较小的部分,可以用以下条件描述。
完整的Bootstrap许可证位于项目仓库中以获取更多信息。
社区成员已将Bootstrap的文档翻译成各种语言。这些都不是官方支持的,可能并不总是最新的。
我们不帮助组织或托管翻译,我们只是链接到它们。
完成了新的或更好的翻译?打开拉取请求将其添加到我们的列表中。