如何创建可打印的Twitter-Bootstrap页面

Question

我正在使用Twitter-Bootstrap，我需要能够按照浏览器上的外观打印页面。我可以打印使用Twitter-Bootstrap制作的其他页面，但是我似乎无法打印仅使用Twitter-Bootstrap的页面。我在某处缺少标签吗？

Answer 1

确保为打印分配了样式表。

它可以是一个单独的样式表：

<link rel="stylesheet" type="text/css" media="print" href="print.css">

或您为所有设备共享的一个：

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute

然后，您可以使用媒体查询在单独的样式表中或在共享的样式表中为打印机编写样式：

@media print {

    /* Your styles here */

}

Answer 2

@media printcss文件中有一段代码（Bootstrap 3.3.1 [UPDATE：]至3.3.5），这几乎消除了所有样式，因此即使工作正常，您也可以获得相当平淡的打印输出。

现在，我不得不求助于剥出@media print从bootstrap.css部分-这我真的不开心，但我的用户希望直接屏幕抓斗所以这必须现在做的事。如果有人知道如何在不更改引导文件的情况下取消它，我将非常感兴趣。

这是“令人反感”的代码块，从第192行开始：

@media print {

  *,

  *:before,enter code here

  *:after {

    color: #000 !important;

    text-shadow: none !important;

    background: transparent !important;

    -webkit-box-shadow: none !important;

            box-shadow: none !important;

  }

  a,

  a:visited {

    text-decoration: underline;

  }

  a[href]:after {

    content: " (" attr(href) ")";

  }

  abbr[title]:after {

    content: " (" attr(title) ")";

  }

  a[href^="#"]:after,

  a[href^="javascript:"]:after {

    content: "";

  }

  pre,

  blockquote {

    border: 1px solid #999;

    page-break-inside: avoid;

  }

  thead {

    display: table-header-group;

  }

  tr,

  img {

    page-break-inside: avoid;

  }

  img {

    max-width: 100% !important;

  }

  p,

  h2,

  h3 {

    orphans: 3;

    widows: 3;

  }

  h2,

  h3 {

    page-break-after: avoid;

  }

  select {

    background: #fff !important;

  }

  .navbar {

    display: none;

  }

  .btn > .caret,

  .dropup > .btn > .caret {

    border-top-color: #000 !important;

  }

  .label {

    border: 1px solid #000;

  }

  .table {

    border-collapse: collapse !important;

  }

  .table td,

  .table th {

    background-color: #fff !important;

  }

  .table-bordered th,

  .table-bordered td {

    border: 1px solid #ddd !important;

  }

}