Bootstrap库文件 JQuery库文件
Sublime Text 3编辑器 (也可选择其他编辑器)
Google Chrome浏览器 (或其他浏览器) 方法/步骤
前端用到的编辑器有很多，本例通过选择Sublime Text3编辑器来实现Bootstrap简单布局的制作。第一步，打开电脑中安装的Sublime Text3，新建demo文件夹用来存放文件，在里面新建一个html文件，通过Tab快捷键迅速创建一个html模板，并命名标题。如图所示：
第二步，在顶部head标签里引入外部JQuery和Bootstrap库文件。下载好相关的库文件后，放在相应的文件夹里。我们将JS文件放在Body标签底部。注意要引入jQuery库，因为Bootstrap框架是以jQuery库文件为基础的。并且要放在的Bootstrap库文件上面，不然不会有效果。如图所示：
第三步，在Body中写简单的html代码。在一个容器div中，加一个标题和一段说明文字，随便输入一些文字。然后加一个子div，里面又并列三个子div，div里面也同样加一个标题和一段说明文字。在浏览器中查看初始化效果，如图，代码如图所示：
第五步，在包围三个字div的的div中添加一个名为“row”的类，该类可以将三个div放在同一行并排显示，而不是像之前那样，三个div各占一行。如图所示：
第六步，在三个子div中，添加名为“col-xs-4 col-sm-4 col-md-4 col-lg-4”的类，这四个类分别适用于手机、平板电脑、中型电脑、大型电脑的，即可实现自适应布局。如图所示：
最后，在浏览器中查看效果，可以看到，三个区块由原来的各自独占一行到现在的三个并排一行，缩小浏览器分辨率大小，也可以实现自适应布局了。是不是很强大呢？读者可以自行实践。效果如图所示： 附：本经验关键词：bootstrap如何实现布局、bootstrap怎么布局、bootstrap怎么使用布局、bootstrap学习布局、bootstrap布局教程、bootstrap使用布局、bootstrap网格布局、bootstrap的布局方法、bootstrap布局 更多相关“bootstrap”经验请点击下面的“经验引用”。
注意要引入jQuery库和Bootstrap库文件，并且jQuery库要放在的Bootstrap库文件上面，不然不会有效果的。读者可以自行实践。
关于bootstrap如何实现其他简单布局，请查看我接下来的经验“Bootstrap实现嵌套布局“与“Bootstrap实现流动布局”实例
如果您觉得这篇经验对您有帮助，麻烦给小编点个赞，投个票；如果您想查看更多我的经验，请点击上方我的头像下的“关注”或直接点击头像旁的昵称。当然，您也可以点击右下方的双箭头分享给好友。感谢您的支持！