首页 > 代码库 > Bootstrap 3.2.0 源码试读 2014/08/11

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


待续。