bootstrap的学习笔记

来源:互联网 发布:代源码百度云 编辑:程序博客网 时间:2024/04/19 23:34


  轻量级前端开发工具Bootstrap http://t.cn/anW06J 

  Bootstrap 使用LESS来写CSS。http://t.cn/SbVIm7 LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。

  可以在bootstrap.less里看到import了其它所有.less文件。注意变量和mix分别在variables.less和mixins.less里,很好的函数库啊。

  LESS工具:http://t.cn/SP3hny

  bootswatch提供了众多免费的基于Bootstrap的主题: http://t.cn/zOU46yP

  在使用SimpLESS工具( http://t.cn/SP3hny )的时候,在样式表中加入://simpless:!minify 自动生成的CSS文件将不会被压缩了。

  坑爹啊!用SimpLESS编bootstrap的less文件会报错无法通过,用Crunch http://t.cn/zO2HE9L 才可以了。。。

  bootstrap 2.0添加了响应设计特性,更好地支持移动设备。如图中这些都在responsive.less文件里。

  bootstrap里的Scaffolding主要介绍了其中的reset,grid和layout,把大体的布局都完成了。这也符合前端的开发思维习惯,先布局,再填充元素。今天开始看Base CSS。

  bootstrap里的Base CSS介绍了常用标签及样式,比如常用到的table、form、button及icon。主要思想就是把样式分割成小模块方便组装。不同的样式,不同的布局都有考虑到。其中form grid就和之前常常用到的思路一样,使用起来很方便。有了这些,剩下的就是发挥创造力,组装自己的设计了。

  其实Components和Javascript plugins是差不多一样的东西,只不过内容太多了,要分两块展示。基本上常用的组件都有了,可以玩了。不过Components里有个新鲜的玩意叫Hero unit,不仅第一次听说,而且也看不出到底有什么实用的地方,不懂啊!

  Customize让我想起了Qwrap的定制功能,很贴心啊。而且得益于LESS,Bootstrap里还可以定制自己的variables。怪不得网上有很多风格的样式皮肤,确实开发起来很方便快捷啊。


原创粉丝点击