Bootstrap实现流动布局实例

1、 前端用到的编辑器有很多，本例通过选择Sublime Text3编辑器来实现Bootstrap简单布局的制作。第一步，打开电脑中安装的Sublime Text3，新建demo文件夹用来存放文件，在里面新建一个html文件，通过Tab快捷键迅速创建一个html模板，并命名标题。如图所示：

3、 第三步，在Body中写简单的html代码。在一个容器div中，加一个标题和一段说明文字。然后加一个子div，里面又并列三个子div，div里面也同样加一个标题和一段说明文字。在浏览器中查看初始化效果，可以看到，各个div元素分段显示，如图所示：

6、 第六步，在三个子div中，添加名为“col-xs-4 col-sm-4col-md-4 col-lg-4”的类，这四个类分别适用于手机、平板电脑、中型电脑、大型电脑的，即可实现自适应布局。如图所示：