如何创build可打印的Twitter-Bootstrap页面
我正在使用Twitter-Bootstrap，并且需要能够以浏览器的方式打印页面。 我可以使用Twitter-Bootstrap打印其他页面，但是我似乎无法打印纯粹使用Twitter-Bootstrap的页面。 我在哪里错过了一个标签？
官方TB页面打印时： 
我的网页打印时： 
我的网页实际上是这样的： 
确保有一个样式表分配给打印。
它可能是一个单独的样式表：
<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 */ }
Bootstrap 3.2更新:(当前版本）
目前稳定的Bootstrap版本是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后，
find您不想打印的部分，并将hidden-print类添加到标签中。 因为css文件包含这个：
@media print { .visible-print { display: inherit !important; } .hidden-print { display: none !important; } }
将每个col-md-replace为col-md-
例如：将每个col-md-6replace为col-xs-6 。
这是我的工作，让我摆脱这个问题，你可以看到你必须取代。
在css文件（Bootstrap 3.3.1 [UPDATE：]到3.3.5）中有一段@media print代码，这几乎剥离了所有的样式，所以即使它正在工作，也可以得到相当平淡的打印输出。
现在我不得不采取从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; } }
我发现最好的select是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(); } });
如果有人在这里寻找Bootstrap v2.XX的解决scheme。 我正在离开我正在使用的解决scheme。 这在所有浏览器上都没有完全testing，但是这可能是一个好的开始。
1）确保bootstrap-responsive.css的媒体属性是screen 。
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen" />
2）创build一个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}
2件东西 –
- 目前，他们已经添加了几个切换类。 查看最新稳定版本中的可用内容 – 打印在响应式utilities.less中切换
- Bootstrap 3.0中新增和改进的解决scheme – 他们正在添加一个单独的print.less文件。 另见print.less
要使打印视图看起来像平板电脑或桌面包括bootstrap为.less，而不是.css，然后你可以覆盖bootstrap响应类在bootstrap_variables文件的结尾，例如这样：
@container-sm: 1200px; @container-md: 1200px; @container-lg: 1200px; @screen-sm: 0;
不要担心把这个variables放在文件的末尾。 LESS支持延迟加载variables，以便应用它们。
萨拉姆。
如果要打印包含数据的指定元素，请将样式添加到该元素：
<div id="print"> <link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css" media="all" /> <link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all" /> .... <!-- data for print --> </div>
如果你想保留在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">
