继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

小牛牛天天快乐
关注TA
已关注
手记 15
粉丝 6
获赞 568

/*

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

打开App,阅读手记
14人推荐
发表评论
随时随地看视频慕课网APP

热门评论

这个真是启发了我,可以避免重复书写css

查看全部评论