在我们刚刚黏贴在导航条下面的代码中你可以看到名为span9和span3的类。它们会把页面分割成左边9列宽度和右边3列宽度的两部分，形成我们的内容区域和侧边栏。使用栅格系统的其中一个好处就是它会根据视窗宽度动态计算出列的宽度，因此你不需要写任何的媒体查询也能使你的站点工作在任何的屏幕分辨率下。
你可以通过改变span的数量和调整浏览器的大小来观察它们的效果。你会注意到当内容区小于724px的时候，这些列会垂直地堆放。
现在我们在主内容区域把下列文本或者任何其他的文本放在在h2标签之后，这只是为了把页面拉长一点。
复制代码 代码如下:
psum 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.</p>
<p>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.</p>
现在站点会像如下显示：
侧边栏导航
你可以在这里（twitter.github.com/bootstrap/components.html#navs）看到所有的Twitter bootstrap为我们提供的导航元素。
我们将要使用垂直选项卡来创建一个额外的导航区。复制和黏贴下面的代码到sidebar的h2标签之后。
<ul> <li><a href='#'>Another Link 1</a></li> <li><a href='#'>Another Link 2</a></li> <li><a href='#'>Another Link 3</a></li> </ul>
这是一个简单的展示！上面的代码照字面理解仅仅是一个具有类为nav-tabs和nav-stacked的无序列表，但它却为我们创造了一个导航面板。
看看最后的效果，一个基于twitter bootstrap的响应式设计的页面完成了。
看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面，了解栅格系统，并且能够使用bootstrap导航、导航条和了解响应式设计的基础。
关于Bootstrap的更多内容大家还可以参考专题进行学习： 《Bootstrap学习教程》
以上这些全部都是使用twitter bootstrap所需要具备的知识，希望对大家的学习有所帮助，之后也希望大家能够多花点时间，孰能生巧，不久之后你就可以成为一个bootstrap的专家了。
您可能感兴趣的文章: