Bootstrap 3.2.0 源码试读 2014/08/09

第一部分 normalize.css

104至110行

code,    /* 编辑代码 */
kbd,    /* 键盘输入的文本 */
pre,
samp {    /* 范例,sample的简写 */
  font-family: monospace, monospace;    /* 这个地方应该是写错了，第二字体应该是serif */
  font-size: 1em;
}

设置字体的大小为1em，字体为monospace。

111至119行

button,
input,
optgroup,    /* 选项组，配合select使用。有个label属性用来显示组描述 */
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}

设置外边距是0，字体与颜色都继续自父容器。

120至122行

button {
  overflow: visible;
}

按钮上显示的文本即便溢出也照常显示。

123至126行

button,
select {
  text-transform: none;
}

按钮与列表的文本的大小写为标准方式。

text-transform 属性控制文本的大小写，可选的值有5个。

一、none与inherit

二、capitalize，每一个单词的第一个字母大写

三、uppercase，全是大写

四、lowercase，全是小写

127至133行

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

设置按钮的显示样式就是按钮（听着有点绕），鼠标放上去的时候显示的是个表示能够点击的样式。

appearance的值有6个，用来控制标签显示的样式。

一、normal，浏览器的默认值

二、icon，像个图标

三、window，像个窗口

四、button，像个按钮

五、menu，像个菜单

六、filed，像个输入框

cursor的值有挺多，若是你采用浏览器的默认值就设为auto。

经常使用的有下面几个

一、pointer，放连接上显示的那种，有多是手形，有多是箭头

二、crosshair，十字

三、wait，等待，沙漏的样子

四、help，问号

五、move，十字箭头

六、text，像能够输入文本的样子

134至137行

button[disabled],
html input[disabled] {
  cursor: default;
}

按钮及输入框的禁用状态，鼠标的样式是箭头。

138至142行

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

就是告诉浏览器，当按钮、输入框得到焦点的时候，不要显示个虚框，搞的文字很差好在中间呆着。

143至145行

input {
  line-height: normal;
}

input的行高为默认值，也就是字体的1到1.2倍。

146至152行

input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

单选框、复选框的宽度不包含边框，同时内添充为0.

153至156行

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

数据输入框的上下调整按钮的高度为自动调整。

157至166行

input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

搜索框的宽度不包括内添充也不包括边框，默认的样式为一个文本框。

不显示搜索框的取消按钮及搜索修饰的显示样式为不显示。

待续 ...