本实例教程致力于在20min内学好使用twitter bootstrap建立网站。看完这个实例教程后你应当可以使用bootstrap创建一个主要的回应合理布局网页页面，掌握网格图系统软件，并可以用它bootstrap了解回应设计方案的导航、导航条和基本。这都是用的twitter bootstrap需要的常识。

首要说起的是twitter bootstrap这是一个特别好前面开源框架，它为全部组键带来了详尽的测试用例，使您能通过拷贝轻松地额外到您设计中。查询官方文件：

twitter.github.com/bootstrap/index.html

基本上的HTML模板

我们应该基本上的HTML那样，大家就可以用需要的模板bootstrap文件包括进去。下边就是我们twitter bootstrap在新项目开始时，将这种代码复制到文档中并取名为index.html。

咱们在这一编码中添加了一些CSS使网页页面的环境光亮深灰色，由于我们可以非常容易地在我们的设计中见到不一样的列，使它比较容易了解。

引入twitter bootstrap文件

为了能使用twitter bootstrap大家只必须在我们的模板中引入一个文档。引入文档的办法有许多。如果你想了解这种方式，请参照相关文件。

根据本步骤的起始点，我们将要根据CDN来引入

bootstrap-combined.min.css不需要下载一切文档。

它能使一切twitter bootstrap CSS在我们的模板中起效。

Twitter Bootstrap的器皿

bootstrap的container类型十分有效，它能够在网页页面建立一个中心地区，随后我们可以把别的地方的信息装进去。container类等额的建立了静态数据宽度和静态宽度magin值为auto一垂直居中div框。twitter bootstrap的 container类的特点是这是响应性的，它将依据现阶段显示屏的宽度来测算最好宽度。

在body应用标识container类建立一个div。别的编码的外表层包囊做为网页页面的关键置放。

假如你调节这一DIV并把其背景色设定为白，您所看见的作用如下所示：

文章标题和导航

现在我们有地区能够添加附加的HTML编码，我们可以添加文章标题文字，随后建立网站的主导航条。

添加下列文字或您挑选的文字container类的div标签之中。

TWITTER BOOTSTRAP TUTORIAL

如今新生事物不多了，这只是一个文章标题，使我们迁移到更有趣的层面，twitter bootstrap导航。

Bootstrap 有一个nav类使我们建立各种各样导航原素，你可以h在标识后添加下列编码。

navbar有关类型有导航条的全部款式，并添加navbar-inverse类种很帅的黑灰色设计风格灰黑色设计风格，这是一种twitter bootstrap普遍的组合。我提议在这个特点的前提下拓展，以建立你独具特色的导航。但这些实例教程中，大家依然应用基本上的bootstrap款式。

在类为navbar的DIV在其中，大家添加了另一个类型nav-collapse的DIV并为其添加业内设计风格height:auto；这也是告知bootstrap当这一网页页面低于970px在宽度浏览器窗口中，它将给予一个缩小转换主视图。

假如你储存了index.html随后在浏览器中打开文件，当您调节浏览器窗口的宽度时，您能够看见如下图所示的转变。

超过979px：

低于979px：

此外，我们可以添加它nav类到一个HTML无序列表原素bootstrap CSS还可以在文档中添加更样式active类到“HOME目录项中。

注：阅读文章相关网站基本建设专业技能，请挪动到建站教程频道栏目。

主具体内容及侧边栏

大家已完成了网址的主导航。如今我们应该添加具体内容区和侧边栏来支撑更多的是连接或导航途径。请在导航条上添加下列编码。

这正是我们应该了解的。bootstrap自然，格珊系统软件，bootstrap官方文件涵盖了更多的是关键点，但是我们将从根本逐渐，让人更好的了解它。

格珊系统软件选用12列合理布局，这代表着一个网页能够分为12列一样的列。下列是以bootstrap官方文件中得到的照片得出了不错的展现。

您可以在大家刚黏贴在导航条下的编码中见到名称span9和span3类。他们将网页页面分成两部分：左9列宽度和右3列宽度，产生他们的具体内容地区和侧边栏。应用格珊系统软件的一个特点是，它将依据对话框宽度动态性测算列的宽度，因而您可以在一切分辩率下工作中，而不需要撰写一切媒体查询。

你能通过更改span调节浏览器的总数和尺寸来观查他们的功效。当具体内容区低于724时，您会留意到px这种列会竖直堆积。

现在我们把下列文字或一切别的文字放到主具体内容区h标签后，这只是为了能变长网页页面。

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

如今网址将表明如下所示：

侧栏导航

你可以在这儿（

twitter.github.com/bootstrap/components.html#navs）见到每一个Twitter bootstrap导航原素。

我们将要应用竖直菜单栏建立附加的导航地区。拷贝并黏贴下边的编码sidebar的h2标识以后。

• Another Link 1
• Another Link 2
• Another Link 3

这是一个简单展现！之上编码的字面上了解只是一个类型nav-tabs和nav-stacked无序列表，但它为大家创航控制面板。

看最后的实际效果，一个是根据twitter bootstrap响应式页面网页页面已经完成。

结果

根据twitter bootstrap大家提供了这一非常快的特点bootstrap初级教程，可是花一点时间训练，查看官方文件，迅速就可变成一个bootstrap的权威专家了。

阅读文章本实例教程后，您应该知道怎么使用不一样种类导航和回应设计方案的基本概念。

假如您有任何问题或意见反馈，请在下边的评论留有您信息内容，感谢您的浏览。

译员按：全部汉语翻译按全文线开展，请在翻译过程中增强了本人对技术性的了解。假如汉语翻译不对，请给我的同年龄人一些建议。特别感谢。