目的
使用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的布局代码,把代码替代试一试中的部分,运行看结果,然后可以自己改改代码看效果。