参考http://v3.bootcss.com/css/文档和源码颜色对比，全面定义和总结有意义的颜色。所有UI要用到的颜色都应该先从定义好的颜色中读取，这样才能保证风格的同一性，方便以后开发主题库。（如果要自己写css模块，可以参考bootstrap中的颜色定义）语义颜色（四种颜色）有意义的颜色，当然可以不止这四种，比如：disabled,empty@brand-成功：#5cb85c；//成功颜色@brand-info:#5bc0de;//信息颜色@brand-warning:#f0ad4e;//警告颜色@brand-danger:#d9534f;//危险色灰度色主要包含文字、文字、背景色等@gray-base:#000;//基本灰度@gray-darker:lighten(@gray-base,13.5%);//#222@gray-dark:变亮(@gray-base,20%);//#333@gray:变亮(@gray-base,33.5%);//#555@gray-light:变亮(@gray-base,46.7%);//#777@gray-lighter:变亮(@gray-base,93.5%);//#eee文本、背景颜色、链接状态@body-bg:#fff;@text-color:@gray-dark;@link-color:@brand-primary;@link-hover-color:darken(@link-颜色,15%);@link-hover-decoration:下划线;字体大小必须在现有基础上计算。h1到h4的间隔为6px；h5到h6分别为14px和12px；14是基本字体。@font-family-sans-serif:"HelveticaNeue",Helvetica,Arial,sans-serif;@font-family-serif:Georgia,"TimesNewRoman",Times,serif;@font-family-monospace：Menlo、Monaco、Consolas、“CourierNew”、monospace；@font-family-base：@font-family-sans-serif；@font-size-base：14px；@font-size-大：ceil((@font-size-base*1.25));//~18px@font-size-small:ceil((@font-size-base*0.85));//~12px@font-size-h1:floor((@font-size-base*2.6));//~36px@font-size-h2:floor((@font-size-base*2.15));//~30px@font-size-h3:ceil((@font-size-base*1.7));//~24px@font-size-h4:ceil((@font-size-base*1.25));//~18px@font-size-h5:@font-size-base;@font-size-h6:ceil((@font-size-base*0.85));//~12px行高但不限于行高，如果知道字体大小和行高，它可以计算高度：@line-height-computed:floor((@font-size-base*@line-height-base));//20px一些常用的组件属性需要这个值，margin,padding,top,height,line-height...所以定义字体大小和行高的重要性不言而喻//'line-height'用于按钮等组件。@line-height-base:1.428571429;//20/14paddingandborder-radiusbootstrap尺寸命名格式“-xs-”有四种尺寸：xs、small、base、large。而上下左右分别是：-vertical-,-horizo??ntal-@padding-base-vertical:6px;@padding-base-horizo??ntal:12px;@padding-large-vertical:10px;@padding-large-horizo??ntal:16px;@padding-small-vertical:5px;@padding-small-horizo??ntal:10px;@padding-xs-vertical:1px;@padding-xs-horizo??ntal:5px;@line-height-large:1.33;@line-height-small:1.5;@border-radius-base:4px;@border-radius-large:6px;@border-radius-small:3px;Z-index有时候在设置z-index的时候，我们会搞砸，只要它不覆盖就好了，但是一旦出现问题，很难修改和排查。一般如果我们的UI有bug，我们会先从js排查，最后到css；就算找到了，也需要一层层找父级。所以一开始写的时候就可以避免，先定义，再使用。@zindex-navbar:1000;@zindex-dropdown:1000;@zindex-popover:1060;@zindex-tooltip:1070;@zindex-navbar-fixed:1030;@zindex-modal:1040;对于动作，需要定义伪类样式，如：active、hover、focus、disabled。有些组件可能是多个或一个伪类，最好在定义基本样式时预先确定。不一定只有伪类定义，也可以定义类似于伪类的类，比如：.active、.hover、.focus、.disabled。//buttons.btn{显示：内联块；保证金底部：0；//对于input.btnfont-weight:@btn-font-weight;文本对齐：居中；垂直对齐：中间；触摸动作：操纵；游标：指针；背景图像：无；//重置异常的Firefox-on-Android默认样式；参见https://github.com/necolas/normalize.css/issues/214border:1pxsolidtransparent;空白：nowrap；.button-size(@padding-base-vertical;@padding-base-horizo??ntal;@font-size-base;@line-height-base;@border-radius-base);.user-select（无）；&,&:active,&.active{&:focus,&.focus{.tab-focus();}}&:hover,&:focus,&.focus{color:@btn-default-color;文字修饰：无；}&:active,&.active{大纲:0;背景图像：无；.box-shadow(inset03px5pxrgba(0,0,0,.125));}&.disabled,&[disabled],fieldset[disabled]&{cursor:@cursor-disabled;指针-事件：无；//面向未来的点击禁用.opacity(.65);.box-shadow(无);}}网格系统bootstrap的核心是.col-xs-1~创建的网格系统。Col-xs-12,.col-sm-1~.col-sm-12,.col-md-1~.col-md-12,.col-lg-1~.col-lg-12样式。.make-grid-columns(){//首先循环出.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1.col(@index)when(@index=1){//初始@item:~".col-xs-@{index},.col-sm-@{index},.col-md-@{index},.col-lg-@{指数}”;.col((@index+1),@item);}//把.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,和后面的增量类拼接成//.col-xs-1、.col-sm-1、.col-md-1、.col-lg-1、.col-xs-2、.col-sm-2、.col-md-2、.col-lg-2,//.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col(@index,@list)when(@index=<@grid-columns){//一般;"=<"不是拼写错误@item:~".col-xs-@{index},.col-sm-@{index},.col-md-@{index},.col-lg-@{指数}”;.col((@index+1),~"@{list},@{item}");}//最后统一设置4*12=48个类的样式.col(@index,@list)when(@index>@grid-columns){//terminal@{list}{position:relative;//防止列为空时折叠min-height:1px;//内部间距通过paddingpadding-left:(@grid-gutter-width/2);填充右：（@grid-gutter-width/2）；}}.col(1);//kickstartit}为每个带col-xs-x,.col-sm-x,.col-md-x,.col-lg-x;添加浮动.float-grid-columns(@class){.col(@index)when(@index=1){//初始@item:~".col-@{class}-@{index}";.col((@index+1),@item);}.col(@index,@list)when(@index=<@grid-columns){//一般@item:~".col-@{class}-@{index}";.col((@index+1),~"@{list},@{item}");}.col(@index,@list)when(@index>@grid-columns){//终端@{list}{float:left;}}.col(1);//kickstartit}添加列表倾斜移动顺序，计算各个的宽度.calc-grid-column(@index,@class,@type)when(@type=width)and(@index>0){.col-@{class}-@{index}{宽度：百分比（（@index/@grid-columns））；}}.calc-grid-column(@index,@class,@type)when(@type=push)and(@index>0){.col-@{class}-push-@{index}{左：百分比（（@index/@grid-columns））；}}.calc-grid-column(@index,@class,@type)when(@type=push)and(@index=0){.col-@{class}-push-0{left:auto;}}.calc-grid-column(@index,@class,@type)当(@type=pull)和(@index>0){.col-@{class}-pull-@{index}{右：百分比（（@index/@grid-columns））;}}.calc-grid-column(@index,@class,@type)when(@type=pull)and(@index=0){.col-@{class}-pull-0{right:auto;}}.calc-grid-column(@index,@class,@type)when(@type=offset){.col-@{class}-offset-@{index}{margin-left:percentage((@index/@grid-columns));}}最后是调用@grid-columns:12;//LESS.loop-grid-columns(@index,@class,@type)when(@index>=0){.calc-grid-column(@index,@class,@type);//下一次迭代.loop-grid-columns((@index-1),@class,@type);}//为特定类创建网格.make-grid(@class){.float-grid-columns(@班级）;.loop-grid-columns(@grid-columns,@class,width);.loop-grid-columns(@grid-columns,@class,pull);.loop-grid-columns(@grid-columns,@class,push);.loop-grid-columns(@grid-columns,@class,offset);}.make-grid-columns();.make-grid(xs);@media(min-width:@screen-sm-min){.make-grid(sm);}@media(min-width:@screen-md-min){.make-grid(md);}@media(min-width:@screen-lg-min){.make-grid(lg);}mixinsborder-radius.border-top-radius(@radius){border-top-right-radius:@radius;border-top-left-radius:@radius;}.border-right-radius(@radius){border-bottom-right-radius:@radius;border-top-right-radius:@radius;}.border-bottom-radius(@radius){border-bottom-right-radius:@radius;border-bottom-left-radius:@radius;}.border-left-radius(@radius){border-bottom-left-radius:@radius;border-top-left-radius:@radius;}backgrounds.bg-variant(@color){背景颜色：@color;a&:hover{背景颜色：变暗（@color，10%）；}}center-block.center-block(){显示：块；左边距：自动；margin-right:auto;}clearfix.clearfix(){&:before,&:after{content:"";//1显示：表格；//2}&:after{清除：两者；}}hide-text.hide-text(){字体：~"0/0"a;颜色：t透明；文字阴影：无；背景颜色：透明；border:0;}img-responsive、.img-retina.img-responsive(@display:block){显示:@display;最大宽度：100%；//第1部分：设置相对于父高度的最大值：auto；//第2部分：根据宽度缩放高度，否则会拉伸}.img-retina(@file-1x;@file-2x;@width-1x;@height-1x){background-image:url("@{file-1x}");@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2),onlyscreenand(min--moz-device-pixel-ratio:2),onlyscreenand(-o-min-device-pixel-比率：2/1），只有屏幕和（最小设备像素比：2），只有屏幕和（最小分辨率：192dpi），只有屏幕和（最小分辨率：2dppx）{background-image:url("@{file-2x}");背景尺寸：@width-1x@height-1x；}}opacity.opacity(@opacity){不透明度：@opacity；//IE8过滤器@opacity-ie:(@opacity*100);过滤器：?“alpha（opacity=@{opacity-ie})";}text-overflow.text-overflow(){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}供应商前缀包含在vendor-prefixes.less动画中,BackfacevisibilityBoxshadowBoxsizingContentcolumnsHyphensPlaceholdertextTransformationsTransitionsUserSelect以上是对bootstrap源码的初步理解和感悟，是对自己感受到的重要性和技巧的总结；
