首页手记基于bootstrap的base.css及规范制定

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

标签：

Bootstrap

@说明: 本基础样式与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;}