结合LayoutIt学习Bootstrap的探索

目的

使用www.layoutit.com提供的在线编辑工具快乐的学习bootstrap。

过程

1基础知识

bootstrap就是一个css库，能轻松制作很有风格的页面，如果要页面具备一定交互性，以及高级的UI，就使用官方配套的一个js脚本，这个脚本是基于jQuery的，因此学习bootstrap的前提是：

• 对html，css，javascript有最基本的认识；
• 了解jQuery的作用；

这些前提都可以通过www.runoob.com学习。

资料推荐
尽可能看官方的资料，但由于国内网络的特殊情况，上面提到的技术的官方网站有时打开不正常，下面推荐几个国内网站，基本镜像了官网的内容，只是内容可能稍旧，不影响入门。
对于layoutit，bootstrap，query，均可在www.bootcss.com找到对应官网的内容，以下列表出相应技术对应的网址。

技术	网址
jquery	www.jquery123.com
bootstrap	v3.bootcss.com或http://www.runoob.com/bootstrap/bootstrap-tutorial.html
layoutit	http://www.bootcss.com/p/layoutit/或http://www.runoob.com/try/bootstrap/layoutit/

2通读Bootstrap帮助文档

这一步中，需要你完整的浏览一下bootstrap官方文档，大概一个上午的时间就够了，目的是了解bootstrap都能干什么，它的基本运作原理是什么。

3结合layoutit在实践中熟练运用bootstrap

要掌握bootstrap的细节肯定需要付出相当精力和时间的，希望这个过程不要太枯燥，所以引入layoutit。这个工具以拖拽形式快速建立基于bootstrap的页面，你可以把每个组件拽出来，迅速了解其特性，比查文档快多了。最重要的是，它会将自动生成的bootstrap页面代码呈现给你，你可以立即拷贝到自己的开发环境中，查看运行效果，通过一点一点的改动了解bootstrap的细节。

4实践举例

通读过文档后，我们可能知道了，bootstrap是基于grid布局的，但不是太确定这个grid到底有何作用。用layoutit就会发现，要先拽出row，才能在row里添加元素，而且row可以设定如何12分割，这跟文档里的内容就对应上了，让你真正了解这个grid系统。

如果手头暂时没有编辑器，也可以用这个办法：
先找到runoob网站中关于bootstrap教程的任何一个试一试，比如这个，然后通过layoutit获得bootstrap的布局代码，把代码替代试一试中的部分，运行看结果，然后可以自己改改代码看效果。