bootstrap样式使用标准.doc

bootstrap样式使用标准.docbootstrap样式使用标准
语法
用两个空格来代替制表符(tab)-这是唯一能保证在所有环 境下获得一致展现的方法。
为选择器分组时，将单独的选择器单独放在一行。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。 声明块的右花括号应当单独成行。
每条声明语句的：后应该插入一个空格。
为了获得更准确的错误报告，每条声明都应该独占一行。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号 是可选的，但是，如果省略这个分号，你的代码可能更易出错。
对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格 (例如,box-shadow)o
不要在 rgb () > rgba() > hsl()、hsla()或 rect ()值的内部的 逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中 区分多个颜色值(只加逗号，不加空格)。
对于属性值或颜色参数，省略小于1的小数前面的0 (例如，.5 代替 0. 5； 5px 代替-0. 5px)o
十六进制值应该全部小写，例如，#fffo在扫描文档时，小写字 符易于分辨，因为他们的形式更易于区分。
尽量使用简写形式的十六进制值，例如，用#fff代替ftffffffo 为选择器中的属性添加双引号,例如，input [type二"text"]。只 有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双 引号。
避免为0值指定单位，例如，用margin: 0;代替margin: Opx; o
对于这里用到的术语有疑问吗？请参考Wikipedia上的syntax section of the Cascading Style Sheets article。
/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] { padding:15px;
margin:0px Opx 15px: background-color:rgba(0, 0, 0, 0. 5): box-shadow:Opx lpx 2px #CCC, inset 0 lpx 0 ftFFFFFF
}
/* Good CSS */
.selector,
.selector-secondary,
.selector [type=//textz/] { padding: 15px: margin-bottom: 15px: background-color: rgba(0, 0, 0, . 5); box-shadow: 0 lpx 2px #ccc, inset 0 lpx 0 #fff:
}
声明顺序
相关的属性声明应当归为一组，并按照下面的顺序排列：
Positioning
Box model
Typographic
Visual
由于定位(positioning)可以从正常的文档流中移除元素，并且还 能覆盖盒模型(box model)相关的样式，因此排在首位。盒模型排 在第二位，因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部(inside)或者是不影响前两组属性, 因此排在后面。
完整的属性列表及其排列顺序请参考Recesso
.declaration-order {
/* Positioning */
position: absolute:
top: 0:
right: 0:
bottom: 0:
left: 0;
z-index: 100:
/* Box-model */
display: block:
float: right:
width: lOOpx:
height: lOOpx:
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif: line-height: 1. 5:
color: #333:
text-align: center:
/* Visual */
background-color: #f5f5f5:
border: lpx solid #e5e5e5: border-radius: 3px:
/* Misc */
opacity: 1;
}
不要使用***@import
与<link>标签相比，***@import指令要慢很多，不光增加了额外的请
求次数，还会导致不可预料的问题。替代办法有以下几种：
使用多个<link>元素
通过Sass或Less类似的CSS预处理器将多个CSS文件编 译为一个文件
通过Rails. Jekyll或其他系统中提供过CSS文件合并功能
请参考Steve Souder