一、常用变量
颜色变量
@brand-primary: #59c7f9; //主色调
@brand-hover: #08a1ef; //主色调hover后的颜色
@green: #48d5b2;// 二级绿色
@green-darken: #18cfa1;//二级绿色hover后的颜色
@gray-dark: #526069;
@text-color: @gray-dark; //网站文本颜色
@bg-hover: #f0f3f4; //主背景色
@gray-base: #a3afb7; //不可操作、或者灰色按钮颜色
@border-color: #ccd5db; //边框颜色
@success: #48d5b2; //成功颜色
@fail: #FF5448; //失败颜色
@warn: #f2a653; //警告颜色
@blue: @brand-primary;
@red: #ea1f64;
@green: #48d5b2;
@green-darken: #18cfa1;
@purple: #7171ef;
@orange: #ffc36d;
@orange-darken: #f2a653;
@apricot: @warn;
字号
@font-size-base: 14px;
@font-size-large: 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
字体
@font-family-sans-serif: '微软雅黑','YaHei','黑体','Hei',Tahoma,Helvetica,arial,sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
内边距、外边距
@margin-vertical: 20px;
@margin-horizontal: 20px;
@padding-vertical: 20px;
@padding-horizontal: 20px;
@padding-base-vertical: 7px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
行间距
@line-height-base: 1.428571429; // 20/14
@list-height: 36px;//
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
圆角
@border-radius-base: 3px;
@border-radius-large: 6px;
@media screen 屏幕宽度
@screen-xs: 480px;//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min: @screen-xs;//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone: @screen-xs-min;// Small screen / tablet//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet: @screen-sm-min;// Medium screen / desktop//** Deprecated `@screen-md` as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop: @screen-md-min;// Large screen / wide desktop//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop: @screen-lg-min;// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
二、class属性
h1-h6字号
h1, .h1 { font-size: @font-size-h1; }//36px
h2, .h2 { font-size: @font-size-h2; }//30px
h3, .h3 { font-size: @font-size-h3; }//24px
h4, .h4 { font-size: @font-size-h4; }//18px
h5, .h5 { font-size: @font-size-h5; }//14px
h6, .h6 { font-size: @font-size-h6; }// 12px
内间距、外间距
.m20{ margin:20px;}
.p20{ padding:20px;}
.ml20{ margin-left:20px;}
.mr20{ margin-right:20px;}
.mt20{ margin-top:20px;}
.mb20{ margin-bottom:20px;}
.pl20{ padding-left:20px;}
.pt20{ padding-top:20px;}
.pb20{ padding-bottom:20px;}
.pr20{ padding-right:20px;}
文本超长溢出使用省略号
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
行内元素
.line-height36{ line-height: 36px;}//使用比较多
成功失败文本颜色
.success{ color:@success;}
.fail{ color:@fail;}
.warn{ color:@fail;}
文本对齐方式
.text-left { text-align: left; }//左对齐
.text-right { text-align: right; }//右对齐
.text-center { text-align: center; }//中心对齐
.text-justify { text-align: justify; }//两端对齐（一般不起作用）
.text-nowrap { white-space: nowrap; }// 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
.text-lowercase { text-transform: lowercase; }//小写(仅用于字母)
.text-uppercase { text-transform: uppercase; }//大写(仅用于字母)
.text-capitalize { text-transform: capitalize; }//首字母大写(仅用于字母)
浮动
.fl{ float: left;}
.fr{ float: right;}
区块添加阴影
.tab-box-shadow{ box-shadow: 0 1px 1px rgba(0,0,0,0.1);}//默认1px阴影
.box-shadow{ box-shadow: 2px 2px 20px rgba(0,0,0,0.1);}//hover时区块阴影
.tab-box-shadow
.box-shadow
按钮填充色
.blue{
background-color: @brand-primary;
color:#fff;
&:hover {
background-color: @brand-hover;
}
}
.blue
.red{
background-color: @red;
&:hover {
background-color: @red-hover;
}
}
.red
.out-red{
background-color: @fail;
&:hover{
background-color: #ff5448;
}
}
.out-red
.gray{
background-color: #ccd5db;
&:hover {
background-color: @gray-base;
}
}
.gray
.green{
background-color: @green;
&:hover {
background-color: #18cfa1;
}
}
.green
三、html结构
button样式
绿色按钮//填充色绿色按钮
蓝色按钮//填充色蓝色
灰色边框按钮//无填充色灰色线框
小号蓝色按钮//小号蓝色按钮
//Button有的高度20px、30px、36px、40px、46px、60px
//height:30px class=”btn-sm”
//height:36px class=默认不写
// height:46px class=”btn-lg”
// height:20px class=”btn-20”
// height:40px class=”btn-40”
// height:60px class=”btn-60”
select封装
全部群组
{{mygroup.name}}
//slect-lg 大尺寸
//slect-sm 小尺寸
//slect-base 中尺寸
//select-great width=100%
//添加 border-width带边框
border-width
无边框
iscroll滚动
//设置高度
//内容区域
复选框
//checked选中状态
checkbox
单选框
radio
开关按钮
//switch-open开放状态
//switch-close 关闭状态
// switch-disable不可操作
switch-open
switch-close
switch-disable
标签页
//.nav-tabs类依赖 .nav基类
// nav-stacked类，竖排显示
.nav-tabs
胶囊式标签页
//使用.nav-pills类
.nav-pills
竖排胶囊标签页
//添加nav-stacked类
.nav-stacked
下划线nav导航
//鼠标经过有放大动画
//.info其实可以和ul 写在一起（以后更改）
.tab-line
input表单
//默认高度为36px
//input-sm 高度为30px
//input-lg 高度为46px
上下结构表单
//单独的表单控件会被自动赋予一些全局样式。
//所有设置了 .form-control类的 、