Bootstrap 3.2.0 源码试读 2014/08/10

第一部分 normalize.css

167至171行

fieldset {
  padding: .35em .625em .75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}
legend {
  padding: 0;
  border: 0;
}

表单分组标题的内添充为上 .23em，下 .75em， 左右 .625em。外边距为上下0，左右2px，边框为#c0c0c0、实心的1px宽。

分组标题的内添充为0，边框为0。

176至178行

textarea {
  overflow: auto;
}

多行文本框在须要滚动条的时候再显示

179至181行

optgroup {
  font-weight: bold;
}

选项组的字体样式为加粗。

182至189行

table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}

表格table标签的相距单元的边框之间的距离为0，而且合并。单元格、标题行的单元格的内添充为0.

能够设置2个值，第1个为左右，第2个为上下。若是想继承自父容器则设为inherit

border-collapse是说如何处理相临单元格之间的边框样式。这里设置的是合并。

有3个值可选。

一、separate，这个是默认值，就是单元格独立显示自已的边框。

二、collapse，单元格之间合并显示边框

三、inherit，继承。

还有1个属性 empty-cells，若是2行2列的表格，你只用了3个单元格，第4个格没内容，那你不但愿第4个没用的格子也显示边框，就是经过这个控制的

一、show

二、hide

三、inherit，继承。

第二部 @media print

这部分是用来设置打印的通用样式的（190至262行）。

使用的是媒体查询语法，举例以下：

@media only screen and (min-width: 480px) and (max-width: 767px) {

/* 样式规则 ...  */

}

解析：

一、only是说若是浏览器不支持媒体查询的语法就不要加载下面的样式了。

还能够设成not ，取反的意思。

二、screen这块是设备的类型

screen，屏幕；print，打印；all，全部；还有tv等等。

三、and ...( ...) 这块是就是条件的设定了。经常使用的有下面的这些，与浏览器的支持程序有关

min-width，最小可见区域

max-width，最大可见区域

min-device-width，最小设备宽度

max-device-width，最大设备宽度

orientation，屏幕方向，landscape（竖屏），portrait（横屏）

下面看一下这块的设置

191至197行

  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }

实在是很讨厌*。

全局设定，字体颜色黑，清除字体及盒标签的阴影，背景透明。

！important，设置为最高优先级，覆盖同类型的样式设置。

198至211行

  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

一、连接的默认及访问过的样式为加上下划线。

二、连接的href属性内容后面加上属性href的值，举例子：

<a href="www.baidu.com">百度</a>，实际的显示内容为 百度(www.baidu.com)

三、连接的title属性的内容后面加上属性title的值。

四、若是连接的href的值是以javascript和#开头的，那清除掉插入的任何值，以避免调用js及跳转锚点出错。

五、缩写abbr的title属性的内容后面加上属性title的值。

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

待续 。。。