Bootstrap 是最流行的前端框架之一。在你的项目中使用Bootstrap,你就可以很快的实现响应式的网页。如果你尝试将Masonry和Bootstrap提供的众多JavaScript组件之一的选项卡组件一起使用，你将会发现许多讨厌的行为。我遇到过，而本文主要关注这个问题是什么和你要如何来解决这个问题。

Bootstrap和Foundation是我最喜欢的两个前端框架，尤其是在快速开发网站的原型上。它们都提供了随时可用的组件，加快了我的工作流程。除了一些细小差别，在我看来它们大部分的基本特征都是类似。在这篇文章里，我将介绍它们网格的基本构造。首先，我将会向你展示它们是如何构建的，描述它们的主要部件，以及它们对不同屏幕的大小表现出的差异。然后，我将通过一个真实例子的实践来帮助你增添知识。

Bootstrap对于现在的前端人员来说并不是一个陌生的名词，但对于如何使用，很多同学还是感到无法切入。主要原因是没有理解bootstrap是用来做什么。或者说如何使用吧。今天由白牙根据Leon Revill的英文文章原名《Twitter Bootstrap Tutorial – Up and running with Twitter Bootstrap in 20 Minutes》进行翻译，给大家介绍了个实例。这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点。看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面，了解栅格系统，并且能够使用bootstrap导航、导航条和了解响应式设计的基础。这些全部都是使用twitter bootstrap所需要具备的知识。

Bootstrap早已成为网络上的流行词，特别是对于前端人员来说。我时常收到很多同学的留言，bootstrap要怎么学习？bootstrap是什么？bootstrap有什么用？bootstrap如何自定义？面对这么多个为什么？说实在解释起来真不轻松。当然有人喜欢有人讨厌，不懂前端的后台程序员特别喜欢，因为套上就能用；不懂UI设计的同学特别喜欢，因为无需自己去设计就有一套优秀的UI效果。对于懂前端的同学来说，有人说他的UI结构太单掉了（特别是Flat Design流行后），也有人说他有一些无用的代码，太大了。自定义起来麻烦。其说bootstrap自定义也并不复杂，不信你看今天这篇文章。本文是由Sunnylost根据Thomas Park的《Customizing Bootstrap》所译，希望对大家自定义bootstrap有所帮助。

其实这篇文章早在今年四月份就发表了，或许有些同学在《程序员》四月份月刊上有阅读过，一直想整理了放到w3cplus站点上来与大家分享，碍于打字慢，所以拖到今天。在发表这篇文章之前，我首先要特别感谢《程序员》责任编辑——卢鸫翔老师，是他给了我这次机会，同时得到他亲因的指导，才能正常发表出来。那么今天我将这篇文章放上来与大家分享，希望大家会喜欢。

前面在《CSS——Bootstrap From Twitter》和《CSS——LESS》中介绍了Mark Otto（马克奥托）写的《BootStrap from twitter》以及Alexis Sellier写的LESS。

Bootstrap这个东东不好直译，如果直译过来就是“引导”，这里暂且不译，直呼其名“Bootstrap”。Bootstrap是来自国外有名的一个社交网站Twitter。我也是最近得到的资源，公司要求培训这方面的东西，所以今天整理出一份贴上来与大家一起分享Twitter网前端攻城师们给我们事来的成果。

Mark Otto（马克奥托）是这样说的“我们很高兴宣布，Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。”下面我们就一起来分享这个Bootstrap。