Bootstrap教程：[3]基本布局方法

今天继续bootstrap的教程，看看如何使用bootstrap进行网页的基本布局，可能接下来的几篇都要介绍布局，这里算是一篇抛砖引玉吧，和以前的传统一样，我们用一个案例来讲解。

先来看看我们一开始的代码，现在只有三段文字



在浏览器中是这样显示的：



用container类将三段文字都装起来，可以看到，这三段文字现在是这样显示的。



假如我想要第二段和第三段文字并列显示，我们可以增加一个行，也就是在设置一个row类将这两段文字装起来



接着使用col-md-*类来装第一段文字。星号表示1-12的数字。因为container可以分为12列，如果数字是8就意味着占用8列的宽度。



这是最后的布局源码



在浏览器中看一下，这就是布局好的样子了。红色框线是不存在的，是我为了方便查看而画好的。