Bootstrap简易使用指南

看完使用手册后所作的笔记,可以当做简易使用指南使用。 1.框架 1.1全局样式 使用HTML5的doctype,scaffolding.less中定义全局样式,从2开始使用normalize.css,并使用reset.less进行简化 1.2默认栅格系统 940px宽12列栅格,使用row与span[NUM]的class来控制,使用offset[NUM]来控制偏移,于non-fluid可以直接嵌套 …

阅读全文

Modernizr使用

Modernizr作为开发HTML5必要的js工具,提供有以下多种功能 1.css 可以通过feature检测(包括html5元素如canvas,或是css3属性如border-radius)为html的加入相应的类,对于不支持的feature则加入以no-为前缀的类。 可以为html加入名为“no-js”的类,这样即使没有js环境来执行Modernizr,也提供了相应的fallback类,而一旦 …

阅读全文

更好的模块文件组织

来自D2前端技术论坛中的ppt,可以在此查看 前端中静态文件与文件夹组织也有些讲究。可以结合wp的主题进行思考,其中CSS样式表不合并请求请求多,合并又太大,不好取舍。又比如js加载,如何让重要的控件可以先响应,像某些重要的按钮。 加载执行顺序方面,body需要等到head中的资源下载完成后才开始渲染,同时body中的资源需要等到之前的js执行完才会开始下载。js会等到其前面所有css下载完成后才 …

阅读全文

代码展示的相关知识

HTML中的code标签很具有迷惑性,其实其作用只是把显示的文本变为等宽字体而已,与代码展示息息相关的空格,换行符或tab字符的效果仍然会按照HTML默认的规则处理。如果要按照预定义的格式显示代码文本,实质应该使用pre标签,这个标签中的文字不但会以等宽字体显示而且会保留原有的空格,换行符或tab字符长度。当然不排除新的HTML5标准会对code做些符合其名称的优化,所以最佳实践是在pre中套用c …

阅读全文

Google的前端代码规范

下面是个人总结的Google的前端代码规范,包括来自Google的HTML/CSS规范以及JS规范。 其中HTML与CSS部分翻译可以参考:Google HTML/CSS Style Guide 谷歌代码风格指南 JS规范终于有小组全部进行翻译啦,请参考:Google Javascript代码规范 总规范: 忽略(Omit)协议:如 background: url(http://www.googl …

阅读全文