site样式规范

一、常用变量

颜色变量

@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; }// 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
.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样式

<a class="btn btn-primary">绿色按钮</a>//填充色绿色按钮
<a class="btn btn-main">蓝色按钮</a>//填充色蓝色
<a class="btn btn-border">灰色边框按钮</a>//无填充色灰色线框
<a class="btn btn-main btn-sm">小号蓝色按钮</a>//小号蓝色按钮
//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封装

<eqx-select class="select-sm select-contain border-width" model="customer.group" change="getDataBySceneId()">    
    <eqx-select-option value="null">全部群组</eqx-select-option>    
    <eqx-select-option value="mygroup" ng-repeat="mygroup in groups">{{mygroup.name}}</eqx-select-option>
</eqx-select>
//slect-lg 大尺寸   
//slect-sm 小尺寸 
//slect-base 中尺寸 
//select-great width=100%
//添加 border-width带边框

border-width

无边框

iscroll滚动

<div eqd-scroll style="max-height:150px;">   //设置高度
    <div>        
          //内容区域
    </div>
</div>

复选框

<div class="checkbox-square checked" > //checked选中状态
    <em class="eqf-yes2"></em>    
    <input type="checkbox">
</div>

checkbox

单选框

<div class="radio-square checked">    
    <em></em>
</div>

radio

开关按钮

<div class="switch switch-open" >    //switch-open开放状态 
    <div class="circle-con">               //switch-close 关闭状态
        <i class="circle"></i>              // switch-disable不可操作
    </div>
</div>

switch-open

switch-close

switch-disable

标签页

<ul class="nav nav-tabs"> 
   <li class="active">
       <a href="#">Home</a>
   </li> 
   <li>
        <a href="#">Profile</a>
   </li> 
   <li>
       <a href="#">Messages</a>
   </li>
</ul>
//.nav-tabs类依赖 .nav基类
// nav-stacked类，竖排显示

.nav-tabs

胶囊式标签页

<ul class="nav nav-pills no-border"> //不添加no-border类，带边框
    <li class="active">
        <a href="#">Home</a>
    </li> 
    <li>
         <a href="#">Profile</a>
    </li> 
    <li>
        <a href="#">Messages</a>
    </li>
</ul>
//使用.nav-pills类

.nav-pills

竖排胶囊标签页

<ul class="nav nav-pills nav-stacked"> ...</ul>
//添加nav-stacked类

.nav-stacked

下划线nav导航

<div class="info">
   <ul class="tab-line">
      <li><a class="active">测试啊</a></li>//在a标签添加.active，设置聚焦
      <li><a>测试啊</a></li>
  </ul>
</div>
//鼠标经过有放大动画
//.info其实可以和ul 写在一起（以后更改）

.tab-line

input表单

<input type="text" class="form-control" placeholder="Text input">//默认高度为36px
//input-sm 高度为30px
//input-lg 高度为46px

上下结构表单

<div class="form-group"> 
   <label for="exampleInputEmail1">Email address</label> 
   <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> 
</div>
//单独的表单控件会被自动赋予一些全局样式。
//所有设置了 .form-control类的 <input>、<textarea>和 <select>元素都将被默认设置宽度属性为 width: 100%;。 
//将label元素和前面提到的控件包裹在 .form-group中可以获得最好的排列。

form-group

内嵌结构表单

<form class="form-inline" role="form">
    <div class="form-group">
        <label class="sr-only" for="exampleInputEmail2">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
    </div>
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">@</div>
           <input class="form-control" type="email" placeholder="Enter email">
        </div>
   </div>
</form>

.form-line

左右结构表单

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
</form>
//通过为表单添加 .form-horizontal类，并联合使用 Bootstrap 预置的栅格类，可以将 label标签和控件组水平并排布局。
//这样做将改变 .form-group的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row了

.form-horizontal

基本表单

<table class="table"> ...</table>
//为任意 <table>标签添加 .table类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线

条状线表格

<table class="table table-striped"> ...</table>
//通过 .table-striped类可以给 <tbody>之内的每一行增加斑马条纹样式

.table.striped

带边框的表格

<table class="table table-bordered"> ...</table>
//添加.table

.table-bordered

悬停状态

<table class="table table-hover"> ...</table>
//通过.table-hover可以是鼠标经过做出反应

dialog弹出框

<div class="modal-header">    
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>    
    <h4 class="modal-title">名称</h4>
</div>
<div class="modal-body">...(内容区域)</div>
<div class="modal-footer">    
    <a class="modal-cancle">取消</a>    
    <a type="button" class="btn btn-primary">确认</a>
</div>

dialog

site样式规范

推荐阅读更多精彩内容