play with bootstrap and less

这次不打算放在框架里面吗。框架会用，离开框架我也同样玩才行；打算从less的角度

计划使用在页面引入less.js的方式来使用less。less站点1 | less站点2 | less站点3（中文）
自己写的less用jiansh9i模式可以，url后+“#!watch”。
less是用js写的针对css的小工具？为了方便开发。
我可以把用得着的都为自己写一遍。
学习一个库到底是看教程+文档+demo好？还是看源码好。或者是块。
把基本的三剑客学好，其他的直接平推！！！
bootstrap确实牛逼。站在巨人的肩膀上修改写东西好了。

从less角度研究bootstrap

bootstrap资料

less文件夹里有41个less文件，mixins文件夹里有30个文件夹。
js文件夹里有12个js文件与对应的测试页面。

没在环境下打开，报关于ajax的错。放在环境下打开，less.js说less文件有错。
然后我把bootstrap.less先新进去就没事了。应该和less的语法有关系吧。
应该只引入bootstrap.less就行了。因为它是各个模块的入口。
牵扯到分模块，往往各模块之间都是有联系的，搞清其中的联系才不会出错。或者所有文件都引进去。

bootstrap.less文件引入了好多的less模块，有：

• 核心的变量与混合 | 两个
• 重置与依赖 | 三个
• 核心css | 七个
• 组件 | 21个
• js相关组件 | 4个
• 使用工具 | 2个

具体是啥直接去看less文件。

mixins.less也引入了好多的less模块，有：

• 实用工具 | 13个
• 组件 | 9个
• 皮肤 | 3个
• 布局 | 5个

variables.less
应该是属性值计算好，放变量里。
- 5种灰色+5中类型色
- 背景色+全局文本色+全局文本连接色+连接悬浮色+连接悬浮装饰（最全局的样式）
-
normalize.css | 知乎资料1 | 博客资料2 | github资料3 | 应该找一个reset.css亲自对比一下子。

不同浏览器下有不同的默认样式，我如何亲自去证实呢？

需求：让自己的页面在不同浏览器上尽可能的表现一致。

事实1：不同浏览器给html标签设置的默认样式不一样。

需求：不同浏览器要有一个尽量相同的基本样式。不同浏览器样式相同，适合自己继续开发。比如。一开始都要没margin,哪个需要自己加。

需求的基本样式：

• 有margin的。开始全部为0；
• 有border的，开始全部为0；

reset.css一刀切，搞出基本样式a;
normalize.css是考虑到有些浏览器的默认样式挺好的，耗费精力搞个更适合开发的基础样式b;
一个是一刀切，一个不同浏览器的默认样式是向好的样式靠拢。

感觉normalize集合了不同浏览器好的默认样式的精华。各种浏览器向此样式靠拢，多的去掉，少的加上。
这个比较好的初始化样式，我有必要详细的了解吗？

有的针对某个或某几个浏览器修改样式。
有的也是一刀切。

normalize.css有一个测试页面。
以后使用这一个好了，我在覆盖一些适合自己的样式。

我需不需要搭个架子把样式比着自己写一遍呢？总结几个最佳实践。

print.less | 打印样式 参考资料1 | 参考资料2

glyphicons.less
有点自定义字体的味道，引入图标用的。

scaffolding.less
重置了一些标签的样式，加了几个常用的样式类。

type.less

排版的样式加杂项

code.less

有关代码的样式

grid.less与mixins/grid与mixins/grid-franework.less

容器和栅格布局的样式，用到了一些貌似复杂的less语法。

tables.less与mixin/table-row.less

相关不是太懂的html+css:captopn;baseline style;tfoot;vertical-align；>,+,:first-child；col[class*=”col-“]；-ms-overflow-style；

有些类名，如.success。加上之后和其他选择器的组合与定义好的样式相对应。
类名选择器的组合，其中一环使用插值。这一种混合有点意思。

要不要搞一个，变量，混合，样式对应图。

表格

样式表（7类）：

• 基本
• 条纹
• 边框
• 鼠标悬停
• 紧缩表格
• 状态类
• 响应式表格

（似乎必须得自己敲一遍才行）

form.less与mixins/form.less

相关不太明白的css+html:fieldset;legend;output;cursor;

一些类组写的不错，像325行的。用作容器的类，里面的嵌套选择器也想到了，不错。

fieldset：表单内相关元素分组。资料1 | 资料2
legend：为fieldset元素定义。 资料1
min-width:最小宽度，属性值不复杂。资料1 | 资料2
label：为相关input提供标注资料1 | 资料2
margin三，二左右；
margin二，上下与左右；
表单控件是输入用的，研究好了，助力肯定很大。
select:创建单选和多选菜单。资料1

input:用户搜集用户信息 。 资料1

：focus老是和轮廓outline，就是搞基。
是一个选择器，选取获得焦点的元素。
感觉这些选择器是元素特殊状态时的样式。资料1 | 资料2

appearance:元素看上去像标准的用户界面元素。资料1

cursor:要显示的光标的信息 | 资料1

pointer-events:资料1

css3那一堆玩意。

placeholder的样式：资料1 | 资料2 | 资料3

\9的hack，资料1 | 资料2

“+” 相邻兄弟选择器
感觉这个挺好用的，比如导航。资料1

表单

样式表：

• 基本是input使用form-control类，和label一起被包在form-group类里面。

mixins/clearfix.less

.qf:before,.qf:after{
    display:table;
    content:" ";
}
.qf:after{
    clear:both;
}

清浮动就可以了。清浮动1 | 清浮动2

bootstrap的模块与混合处理有的只是适合用less写，感觉是这个样子。

button

样式表：

• 预定义样式7种
• 尺寸样式3种
• 变成块元素
• 禁用状态
• 激活状态

注意：

• button,input,a可以使用button类
• a标签当button用，有时需要添加额外属性
• 最佳实践是使用button元素
• (看来markdown需要将html标签转义啊)

扩展阅读：button资料1

研究less

less是css plus less语法
css的语法大致为： 选择器+大括号；大括号里是–属性名+冒号+属性值；属性名值之间用分号隔开。（此处应有图）
把此成为基本语法好了。使用less似乎就是新内容+改造基本语法。
选择器是a,大括号是b,属性名是c,属性值是d。

变量

是啥？
名值对。名是变量名，值是你需要的css属性；
咋用？
把变量名写为d就可以了。

二阶：
变量与属性值的运算经常在一起；
变量赋值之后不能改变，像es6里的常量；
一个变量名可以当另一个变量的值(用到时再说)；
变量前要加@是吧？

实践：
变量不加“@”出错。定义与引用时都要加；
属性值挂单位”px”的直接可以运算；

混合

是啥？
改造的基本语法。改造如下：

• a叫类名
• a与b之间加了个小括号，里面有参数名+冒号+参数值
• d是参数名了

咋用？
b里直接写类名，类名后面可以加个小括号，里面写参数值；
感觉就是函数的定义与调用啊！

二阶：
一些通用属性集，感觉有些公共模板的作用。如果只是这样不用less也可以啊？

普通类；传参数类；带默认参数类；只带空括号的类；

一组参数，若是其中没有需要特别操作的参数，可以直接用@arguments

实践：带上小括号，只在需要的地方编译成css;不加小括号会在定义的时候编译一次。

三阶：匹配模式与导引表达式
同一个类名，可以使用多次。每次可以定义不同的样式。每种样式可以设置一个规则，当符合我的规则时，我这一种的样式才会生效。
在使用的时候，根据符合规则的情况，会没有，或者一种，或者多种样式生效。

匹配与导引的规则：

• 变量匹配任意传入值
• 固定值匹配传入的固定值
• 根据参数的数量匹配
• （导引，when关键字+小括号+5种比较运算符+逗号+逻辑运算符）
• 看参数符合什么条件
• true的情况
• 无参数
• 对参数进行比较
• 值是什么类型
• 是纯数字还是挂单位的
• and,not,”,”组合多个条件

初步实践：
and在小括号之间，表示条件与；
not 在小括号前，表示条件非；
“，”在小括号见，表示条件或；

这种分情况的样式组类（我自己说的）用于媒体查询，响应式那方面的吗？

嵌套规则

感觉就是针对后代选择器的

是啥？
基本语法的b里直接加基本语法，可以嵌套好多次。我还在伪类那看到了“&”。

代码量确实少了，少些几个选择器。现在感觉不直观。用用再说吧。

二阶：
“&”符号对应串联选择器。
有两种写法：one，选择器换行+属性换行+缩进
two:选择器换行+缩进
实践：伪类的这个还必须用&。不用没反应。

函数&变量

是啥？
操作属性值，使用加减乘除或函数。
可以与变量结合，d为变量与数值的加加减乘除操作；d还可以是一些函数；在其他的有属性值的地方应该也可以用。

二阶：
兼容单位；能用括号；复合属性也可以；

extend

似乎是，我要用定义好的样式。与混合相比有什么区别？一个加选择器？一个多写一遍样式？
死样式用扩展？活样式用混合？
资料1

color函数

lighten|darken:越来越亮–>白色；darken越来越暗–>黑色；

saturate | desaturate:饱和度不懂啊。
（该研究计算机图形学了）

fadein | fadeout | fade :变更不透明；变更透明；透明的多少百分比；

spin；正值色相度数变大；负值色相度数变小；

mix:返回两个颜色的混合；

hue | saturate | lightness ： 提取颜色信息；

hsl():创建颜色。

Math

round():四舍五入；
ceil():天花板；
floor():地板砖；
percentage():把值转化为百分比；

命名空间 | 作用域 | 导入 | 注释 | 插值 | 免编译 | js表达式

学习css的好资料
涉及：颜色的十六进制表示法，模块引入，
监视模式怎么用？源码映射图怎么用？
函数式编程是？
串联选择器什么鬼？选择器资料1 | 选择器资料2
HSL 色彩空间是什么鬼？通道级别操作又是什么鬼？
色相，度数表示不懂。学源码映射图有利用调试。
less可以高亮，命令行要学会。
行高，20/14 why?
-webkit-tap-highlight-color资料1
-webkit-tap-highlight-color资料2

想法：
搞那么多变量有什么好处？很广大的话，使用变量使各处很一致。全局性的比较好改。若是都写成数字。css那种，要改动的地方就多了。是大改，改less。小改，改覆盖吗。
要是没有注释的话，可读性会差很多，变量名取得不好，可读性也差很多。佩服。

看css文件的话，一组样式，一组class名。似乎是这样。

bootstrap给元素设置了一些样式(less分了模块)，定义了一些常用的样式组。

看流行项目的源码可以收获很多，一步一步的来。

我还有好多不熟悉的css样式。

注释要做好；
变量名要起好；
要有大局观；

一步一步来，一步一步完善。

一开始的话肯定是引入的核心变量与函数。
其实就是用到的变量和常用的样式组合。
映射图到底怎么用啊？
那个webflow那个，两边固定，中间剩下的自适应。伸缩盒子可以。

相关css

box-sizing

这个问题之前我遇到过，开始出错了。后来发现不是太好实现。
一般习惯先设置width与height，当成一个块的基准。但是有时有border+padding时就不会这样子了。
这个属性可以满足那个简单的习惯。比如border是10px，padding是10px，总长200px。看哪一个写的快。
总之，使用了之后，border与padding从width和height里扣，不再额外加了。变方便了。我要用这个。

资料1 | 资料2 | 资料3

outline

轮廓
资料1 | 资料2 | out-line | 资料5 | 资料6 | 那个颜色的资料

clip与clip-path

资料1 | 资料2 | 资料3

属性选择器

似乎只写属性选择器也可以啊。
资料1

position

我对相对定位有些误解。
资料1 | 资料2 | 资料3

收获与提高

• 清浮动的方法
• 更简单的写盒子

模块：资料1 | 模块2 | 资料3