标签：
Bootstrap 是世界上最流行的用于建立响应式、移动设备为主的站点和应用的框架。在其中你可以发现高质量的 HTML、CSS 和 JavaScript 来让你的工程变得无比简单。
下面就是如何快速的上手 Bootstrap CDN 和建立一个模板页面。
想要快速的将 Bootstrap 加入到你的工程中？那就使用 Bootstrap CDN，由 MaxCDN 免费提供。想使用一个程序包管理器或者需要下载源文件？前往下载页面。
在其他的样式表载入到我们的 CSS 中之前，粘贴复制样式表 <link> 到你的 <head> 中。
Copy
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
将 JavaScript 插件和 jQuery 添加到页面的末尾位置，就在 </body> 前。记住首先要添加 jQuery 因为我们的代码要依赖它。
Copy
<script src="http://ajax.useso.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
这样就行了–你正在建立一个完全使用 Bootstrap 站点的路上。如果你还对一般页面结构不是很熟悉的话，继续阅读一些页面模板例子的代码吧。
要确认你的页面是建立在最新的设计和开发标准之上的，这意味着：
使用 HTML5 文档类型
要使 Internet Explorer 使用最新的渲染模式（阅读更多）
接下来，使用视图元标签
将它们放在一起，你的页面就会看起来像这样：
Copy
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css"> </head> <body> <h1>Hello, world!</h1> <!-- jQuery first, then Bootstrap JS. --> <script src="http://ajax.useso.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> </body> </html>
这就所有你需要完成的页面配置。阅读布局文档和官方示例来放置你的站点内容和组件。
Bootstrap 使用了少数重要的全局样式和设置，在使用过程中你必须要注意到，这些几乎只适用于跨浏览器样式的正常化。让我们深入了解一下：
Bootstrap 要求使用 HTML5 文档类型。没有它，你就会看见一些并不完整的样式，但是将它包含进去并不会造成显著的问题。
Copy
<!DOCTYPE html> <html lang="en"> ... </html>
Bootstrap 被开发出来以移动设备优先，这就要求我们必须要先为移动设备优化代码然后使用 CSS 媒体查询来扩大组件。为了保证所有设备的渲染和触摸效果。要给你的 <head> 添加响应式的视图元标签。
Copy
<meta name="viewport" content="width=device-width, initial-scale=1">
你可以在起始模板中看到这样的一个例子。
对于 CSS 中更多的简单的尺寸大小，我们将全局 box-sizing 值从 content-box 改变到 border-box。这保证了padding 并不会影响一个元素的最后计算宽度，但是这也可能会导致一些第三方软件比如谷歌地图和谷歌夸赞搜索引擎出现问题。
在极少的情况下你需要重写它，比如：
Copy
.selector-for-some-widget { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
有了上面的片段和嵌套元素–包括通过 :before 和 :after 产生的内容–都会为了 .selector-for-some-widget 继承特定的 box-sizing。
了解更多有关盒模型和调整 CSS 的技巧。
为了改进跨浏览器的效果，我们使用 Normalize.css 来处理在不同设备和浏览器之间的不一致。之后我们会用 Reboot创造出的我们自己的、稍微有些固执己见的风格来进一步改善这个方面。
始终关注 Bootstrap 的最新开发进展，同时加入社区获取有用的资源：
在推特上关注 @getbootstrap。
阅读并向 The Official Bootstrap Blog 投稿。
在 IRC 与 Bootstrap 人交谈。在 irc.freenode.net 服务器上，或者 ##bootstrap 频道里。
可以在 Stack Overflow 中找到实施帮助（标记 twitter-bootstrap-3）。
当为了获取最大的功能使用通过 npm 或者类似的传递机制来分发时，开发者需要使用封装上的关键字bootstrap，它能够改进或者增加 Bootstrap 的功能。
标签：
原文地址：http://my.oschina.net/wenquan0hf/blog/499894
