基于bootstrap的base.css及规范制定

/*

• @说明: 本基础样式与bootstrap.css配合应用，其有的基本样式不在定义
• @根据项目情况，定义以下命名规则：
• 1.left缩写l,right缩写r.
• 2.因padding、margin、font-size、background等经常应用。必免页面中class名称过长，所以采取缩写
• padding=p; padding-left=pl; padding-right=pr; padding-top=pt;
• margin=m; margin-left=ml; margin-right=mr; margin-top=mt;
• border=bd; border-left=bdl; border-right=bdr; border-top=bdt;
• font-size=fs;
• word=wd;
• background=bg;
• 原有样式分两段的采取：样式名-数值；三段的采取：样式名-位置-数值；数值为数字时可以联用，可根据情况应用中划线-
• margin-left为20px: .ml20{margin-left:20px;}
• word定义白色字: .wd-fff{color:#fff;}
• border定义边线: .bdl-f5{border:1px solid #f5f5f5;} .bdl-2-f5{border:2px solid #f5f5f5;}
• .bdl-dashed2-f5{border:2px dashed #f5f5f5;}
• 让开发人员在页面中应用时就可以大致判断时样式代表什么意思
• 其它对后台人员相对来说比较偏的样式可以写全称不缩写，如：.cursor-pointer{cursor:pointer;}，.vertical-midlle{vertical-align:middle;}
• 一个类只有一两个样式需要定义的可以采取一行写法。
• 如果一个类有多行样式需要定义采取
• .类别{
• }
• 通用类名来进行js操作的类，开头带js-,这样以后版本迭代时，会注意到不要随便去掉样式。如：
• js-list，js-input等；
• 另外请熟知bootstrap中JS操作的类，比如表单的from-group等；

• /
  /公共样式*/

• {margin: 0;padding: 0;}
  em,i{font-style: normal;}
  dl{margin:0;}
  img {border: none;vertical-align: top;}
  input[type=file]::-webkit-file-upload-button{cursor:pointer;}/全部的input=file在chrome中显示为手型/
  table {border-collapse: collapse;}

a {color: #4a4a4a;}
a,a:focus {outline: none;}
/a:focus, :focus {noFocusLine: expression(this.onFocus=this.blur());}*/
a:link,a:hover,a:visited{text-decoration: none}

body{
font-size: 14px;
min-height: 400px;
font-family: PingFang SC, Microsoft YaHei, "微软雅黑", "宋体", Msyh, Verdana, Arial, Helvetica;
background: #f8f8f8;
color: #4a4a4a;
}
.font-family-yahei {font-family: Microsoft YaHei, "微软雅黑", "宋体", Msyh, Verdana, Arial, Helvetica;}

/手型/
.cursor-pointer{cursor:pointer;}
.cursor-default{cursor:default;}

/大于号/
.greater{font-family:serif;margin:0 10px;}

/block样式/
.block{display: block}
.inline-Block{display: inline-block}

/重直居中/
.vertical-midlle{vertical-align:middle;}

/高度/
.min-height-inherit{min-height:inherit;}

/基本宽度/
.box-center {margin:0 auto;display: block;}
.width-full{width:100%;}
.main-width {width: 1080px;}

/文字大小/
.fs12{font-size: 12px;}
.fs16{font-size: 16px;}
.fs18{font-size: 18px;}

/文字缩进/
.text-indent20{text-indent:20px;}

/文字去粗-font-weight缩写为fw/
.fw-normal{font-weight:normal;}

/文字中划线/
.wd-line-Through{text-decoration:line-through;}

/文字色彩/
.wd-fff{color:#fff;}
.wd-9b {color: #9b9b9b;}
.wd-79 {color:#797979;}
.wd-4a {color: #4a4a4a;}

/文字行高/
.line-height20{line-height:20px;}
.line-height30{line-height:30px;}

/背景色-取缩写bg/
.bg-fff{background:#fff;}

/margin--取缩m-/
.m0{margin:0;}

.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}

.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}

.ml10{margin-left:10px;}
.ml20{margin-left:20px;}

.mr20{margin-right:20px;}
.mr30{margin-right:30px;}

/padding--取缩写p/
.p0{padding:0;}

.p30{padding:30px;}
.p40{padding:40px;}

.pt5{padding-top:5px;}
.pt10{padding-top:5px;}

.pl10{padding-left:40px;}

.pr20{padding-right:20px;}

.pb10{padding-bottom:10px;}
.pb20{padding-bottom: 20px;}

/border--取缩写bd/
.bd0{border:0;}

.bd-b0{border-bottom:0;}

.bd-f5{border:1px solid #f5f5f5;}
.bdl-f5{border-left:1px solid #f5f5f5;}

/宽度/
.wh80{width:80px;}
.min-width550{min-width:550px;}