Bootstrap 3.2.0 源码试读 2014/08/11

第二部 @media print

212至217行

  pre,
  blockquote {    /* 块引用 */
    border: 1px solid #999;

    page-break-inside: avoid;
  }

215行是个空格，是什么个意思？闲着蛋疼往前翻了翻，3.0.X版本没这个问题。根本没这行。

设置边框宽度为1px，实心，颜色#999，并且避免在内容里挺入分页符。

page-break-inside据说只有opera支持，可用的值有3个

auto，默认值。有需要的时候就插入分页符。

avoid，避免在元素内部插入分页符。

inherit，继承。

218至220行

  thead {
    display: table-header-group;
  }

设置表头thead的显示方式为表格标题组的样式。

221至224行

  tr,
  img {
    page-break-inside: avoid;
  }

设置表格行，图片内不插入分页符。

225至227行

  img {
    max-width: 100% !important;
  }

图片的最大宽度为100%，最高优先级。

228至237行

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }

设置行标签、标题2、3的内容如果出生了分页的情况，则在页面底部orphans最少保留3行，在头部windows最少保留3行。但标题2、3内是尽量避免挺入分页符滴。

238至240行

  select {
    background: #fff !important;
  }

列表的背景是白色，最高优先级。

241至243行

  .navbar {
    display: none;
  }

设置使用.navbar样式的元素不显示。

这里用到了类选择器，也就是.开头的这种。

244至247行

  .table td,
  .table th {
    background-color: #fff !important;
  }

设置.table样式的（表格头、表格体的）单元格的背景颜色为白色，优先于其它的设定。

这里用到了上下文选择器，像这里的，应用了“.table样式里面的td元素”。

248至251行

  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }

这里用到了新的选择器，子选择器。

应用.btn样式标签里面，应用了.caret样式的标签的 上表框的颜色为黑色。

第二行更复杂一点，3层。 应用了.dropup里，应用了 .btn的子标签里，应用了 .caret的子标签。

252至254行

  .label {
    border: 1px solid #000;
  }

应用.label样式的标签的边框为 宽度1px 实心 黑色。

255至257行

  .table {
    border-collapse: collapse !important;
  }

应用.table样式的标签的相邻单元格的边框合并显示。

258至261行

  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }

应用了.table-bordered样式的标签的单元格为，边框宽度1px 实心 颜色 #ddd

待续。

Bootstrap 3.2.0 源码试读 2014/08/11