CSS:用Less实现栅格系统
CSS:用Less实现栅格系统
背景
公司一直没有专职的前端和美工,Javascript相对来说我熟悉一点,CSS+HTML有四五年没有搞过了,最近要学一下,招聘或和美工配合的时候会有用处。
收集的资料
- CSS教程:http://www.w3school.com.cn/css/index.asp。
- LESS教程:http://www.lesscss.net/。
- SAAS教程:http://sass-lang.com/。
- Bootstrap教程:http://cnbootstrap.com/。
- 栅格教程:http://www.see-source.com/blog/300000033/273。
知识总结
- CSS盒子模型:定位和浮动。
- CSS继承模型:这部分可以边用边记。
- CSS层叠模型:这部分要记清楚。
最好的教程就是官方教程
栅格系统实战
less

1 @grid_margin: 20px;
2 @grid_length: 12;
3 @unit: 1px;
4
5 .row {
6 margin-left: -@grid_margin;
7 *zoom: 1;
8 }
9
10 [class*="span"] {
11 float: left;
12 min-height: 1px;
13 margin-left: @grid_margin;
14 }
15
16 .span (@length) when (@length > 0) {
17 .span@{length} {
18 width: (@length * 60 + (@length - 1) * 20) * @unit;
19 }
20
21 .span(@length - 1);
22 }
23
24 .span (0) {}
25
26 .span (@grid_length);
27
28 .offset (@length) when (@length > 0) {
29 .offset@{length} {
30 margin-left: (@length * 60 + (@length + 1) * 20) * @unit;
31 }
32
33 .offset(@length - 1);
34 }
35
36 .offset (0) {}
37
38 .offset (@grid_length);
39
40
41 @grid_margin_percent: (1 / (@grid_length * 4 - 1));
42
43 .row-fluid {
44 width: 100%;
45 *zoom: 1;
46 }
47
48 .row-fluid [class*="span"]:first-child {
49 margin-left: 0;
50 }
51
52 .row-fluid [class*="span"] {
53 display: block;
54 float: left;
55 min-height: 30px;
56 margin-left: percentage(@grid_margin_percent);
57 -webkit-box-sizing: border-box;
58 -moz-box-sizing: border-box;
59 box-sizing: border-box;
60 }
61
62 .fluid_span (@length) when (@length > 0) {
63 .row-fluid .span@{length} {
64 width: percentage((@length * 4 - 1) * @grid_margin_percent);
65 }
66
67 .fluid_span(@length - 1);
68 }
69
70 .fluid_span (0) {}
71
72 .fluid_span (@grid_length);
73
74 .fluid_offset (@length) when (@length > 0) {
75 .row-fluid .offset@{length} {
76 margin-left: percentage((@length * 4 + 1) * @grid_margin_percent);
77 }
78
79 .fluid_offset(@length - 1);
80 }
81
82 .fluid_offset (0) {}
83
84 .fluid_offset (@grid_length);

html

<div class="row">
<div class="span3"></div>
<div class="span6 offset3"></div>
<div class="clear-left"></div>
</div> <div class="row-fluid">
<div class="span3"></div>
<div class="span6 offset3"></div>
<div class="clear-left"></div>
</div>

运行效果
备注
Less多少有些程序语言的味道,刚才的示例写的比较仓促,应该进一步重构,比如:引入解释性的变量,去掉“魔法数字”等。
CSS:用Less实现栅格系统的更多相关文章
- BootStrap的table表格,栅格系统,form表单的样式
BootStrap BootStrap的简介 1. 什么是Bootstrap 由两个前端设计师开发的一个前端的框架(Html,css,js) 简化了程序员写css的代码 2. 为什么使用B ...
- CSS:用SASS(SCSS)实现栅格系统
背景 在CSS:用Less实现栅格系统中我介绍了如何用LESS实现栅格系统,为啥还要再用SASS做一遍呢?Bootstrap+JQuery+Less做前端(以读取为目的),ExtJs+Sass做后台( ...
- Bootstrap--全局CSS样式之栅格系统
Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具 ...
- Bootstrap4中栅格系统CSS中 col-sm-* col-md-* col-lg-*的意义以及当其同时具有col-xs-* col-sm-* col-md-* col-lg-*的含义
根据Bootstrap--Grid 中 col-sm-* col-md-* col-lg-* col-xl-*的意义: .col-sm-* 小屏幕 手机 (≥ 576px) .col-md-* 中等屏 ...
- CSS3简单的栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 初学者--bootstrap(四)栅格系统----在路上(8)
---------------------------------------栅格系统:是bootstrap提供的响应式布局方式------------------------------------ ...
- Bootstrap之栅格系统
bootstrap 移动优先 中文官网 http://www.bootcss.com/ 1.基本模板 <!DOCTYPE html> <html lang="en&quo ...
- Bootstrap响应式栅格系统的设计原理
1.历史背景 Bootstrap是Twitter的工程师Mark Otto和Jacob Thornton开发的一套供内部使用的UI框架,于2011年开源.2012年发布的第二版中新增了12列栅格系统和 ...
- Bootstrap栅格系统详解,响应式布局
Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...
随机推荐
- wget一个小技巧
今天在装一个东西的时候,在网上看到了这样的命令 wget http://xxxx.sh -o - | sh 的用法 不太明白-o -的用法于是乎man wget,看到了下面的一段话 -O fil ...
- WPF中嵌入WinForm中的webbrowser控件
原文:WPF中嵌入WinForm中的webbrowser控件 使用VS2008创建WPF应用程序,需使用webbrowser.从工具箱中添加WPF组件中的webbrowser发现其中有很多属性事件不能 ...
- .NET:从 Mono、.NET Core 说起
魅力 .NET:从 Mono..NET Core 说起 前段时间,被问了这样一个问题:.NET 应用程序是怎么运行的? 当时大概愣了好久,好像也没说出个所以然,得到的回复是:这是 .NET 程序员最基 ...
- IntelliJ IDEA —— Android开发的另一个选择
IntelliJ IDEA —— Android开发的另一个选择 很早就听过Eclipse的大名,但在我初学Java的时候,一位前辈推荐的IDE却是IntelliJ IDEA.因为之前用过JetBra ...
- 【Android平台安全方案】の #00-请不要在外部存储(SD卡)加密存储的敏感信息
本文翻译自https://www.securecoding.cert.org/confluence/display/java/DRD00-J.+Do+not+store+sensitive+infor ...
- Tomcat7.0更改默认的路径来访问自己的项目
如何使自己的项目没有输入:localhost:8080/项目名称/index.html 能够访问. 步骤,如下面的 : 找到tomcat --- config----server.xml 选中右键编 ...
- 【硬件】DELLserver硬件监控和DELL系统管理工具OMSA介绍
1.1.1. DELLserver硬件监控和DELL系统管理工具OMSA介绍 本文介绍了利用使用Nagios和OMSA显示器DELLserver硬件健康状况,Nagios监控的方式是NRPE模式,须要 ...
- js 文字预写匹配
效果图: demo如下: <!DOCTYPE html> <html> <head> <title>文字预写</title> </he ...
- Android slidingmenu详细解释 滑动的优化
Android slidingmenu 详细解释 性能优化 转载请注明: http://blog.csdn.net/aaawqqq 简单介绍 SlidingMenu 是github 上Androi ...
- C# 利用SMTP异步发送邮件
C#实现收发邮件功能需要用到两个命名空间 System.Net; 和 System.Net.Mail; SmtpClient client = new SmtpClient("smtp.g ...