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

我正在使用 Twitter-Bootstrap，我需要能够打印页面的方式，它在浏览器上看起来。我可以打印用 Twitter-Bootstrap 制作的其他页面，但我似乎不能打印纯粹使用 Twitter-Bootstrap 的页面。我是不是丢了个标签？

印刷时结核病官方网页: Twitter Bootstrap Page

打印时我的页面: enter image description here

我的主页实际上是什么样子: enter image description here

301395 次浏览
小开
最佳答案

确保为打印分配了样式表。
它可以是一个单独的样式表:

<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 */
}
小开

仅供参考的两件事

  1. 现在，他们已经添加了一些切换类
  2. 新的和改进的解决方案来自 Bootstrap 3.0-他们正在添加一个单独的 print.less 文件
小开

Bootstrap 3.2更新: (当前版本)

目前稳定的引导程序版本是 3.2.0。
版本3.2可见-打印已弃用，因此您应该这样使用:

Class                        Browser    Print
-------------------------------------------------
.visible-print-block         Hidden        Visible (as block)
.visible-print-inline        Hidden        Visible (as inline)
.visible-print-inline-block  Hidden        Visible (as inline-block)
.hidden-print                Visible       Hidden

Bootstrap 3更新:

打印类现在在文档中: http://getbootstrap.com/css/#responsive-utilities-print

Similar to the regular responsive classes,
use these for toggling content for print.


Class            Browser    Print
----------------------------------------
.visible-print   Hidden     Visible
.hidden-print    Visible    Hidden

Bootstrap 2.3.1版本:

在将 bootstrap.css 文件添加到 HTML 之后,
找到您不想打印的部分，并将 hidden-print类添加到标记中。 因为 css 文件包含以下内容:

@media print {
.visible-print  { display: inherit !important; }
.hidden-print   { display: none !important; }
}
小开

我找到的最佳选择是 http://html2canvas.hertzen.com/
Http://jsfiddle.net/nurbsurf/1235emen/

html2canvas(document.body, {
onrendered: function(canvas) {
$("#page").hide();
document.body.appendChild(canvas);
window.print();
$('canvas').remove();
$("#page").show();
}
});
小开

用 col-xs-代替每个 col-md-

将每个 col-md-6替换为 col-xs-6。

就是这个东西帮我解决了这个问题你可以看到你要替换的东西。

小开

在 css 文件中有一段 @media print代码(Bootstrap 3.3.1[ UPDATE: ]到3.3.5) ，这实际上剥离了所有的样式，所以即使在工作的时候也会得到相当平淡的打印输出。

现在我不得不从 bootstrap.css 中剥离出 @media print部分——我对此非常满意，但是我的用户需要直接的屏幕抓取，所以现在只能这样做了。如果有人知道如何在不更改引导程序文件的情况下禁用它，我将非常感兴趣。

下面是从第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;
}
}
小开

如果有人正在寻找解决方案的 Bootstrap v2.X.X在这里。我离开的解决方案，我正在使用

1)确保 bootstrap-responsive.css的媒体属性为 screen。

<link href="/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen" />

2)创建一个 print.css并确保其媒体属性 print

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

3)在 print.css中，在 html 和 body 中添加你的网站的“宽度”

html,
body {
width: 1200px !important;
}

4)在 print.css中重现必要的媒体查询类，因为它们在 bootstrap-responsive.css中，我们在打印时禁用了它。

.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}

以下是 print.css的完整版本:

html,
body {
width: 1200px !important;
}


.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}
小开

为了使打印视图看起来像平板电脑或桌面包括引导程序。更少，而不是更少。然后您可以在 bootstrap _ variable 文件的末尾覆盖 bootstrap 响应类，例如:

@container-sm:      1200px;
@container-md:      1200px;
@container-lg:      1200px;
@screen-sm:         0;

不要担心将这些变量放在文件的末尾。LESS 支持延迟加载变量，因此它们将被应用。

小开

如果你想保持列在 A4打印(大约540px)这是一个好主意

@media print {
.make-grid(print-A4);
}


.make-print-A4-column(@columns) {
@media print {
float: left;
width: percentage((@columns / @grid-columns));
}
}

你可以这样使用它:

<div class="col-sm-4 col-print-A4-4">


提交答案