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

作者: نسر الصحراء
发布时间: 2024-12-20 08:19:01 (18天前)
转自：

9 条回复

0#
回复此人
满目山河 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果你想在A4打印（大约540px）上保留列，这是一个好主意 </p> <pre> <code> @media print { .make-grid(print-A4); } .make-print-A4-column(@columns) { @media print { float: left; width: percentage((@columns / @grid-columns)); } } </code> </pre> <P> 你可以像这样使用它： </p> <P> <code> <div class="col-sm-4 col-print-A4-4"> </code> </p> </DIV>

编辑
1#
回复此人
明天会更好 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 2件事FYI - </p> <OL> <LI> 目前，他们已经添加了一些切换类。查看最新稳定版本中的可用内容 - <a href="https://github.com/twitter/bootstrap/blob/0fe9148b91eff50b83100b6795fb49cf894caed1/less/responsive-utilities.less" rel="nofollow" title="print toggle in responsive-utilities.less"> 打印在responsive-utilities.less中切换 </A> </LI> <LI> Bootstrap 3.0中新增和改进的解决方案 - 他们正在添加一个单独的print.less文件。看到 <a href="https://github.com/twitter/bootstrap/blob/0dea8b0c7473c1db4aea7accfd0a68cbf09b9576/less/print.less" rel="nofollow" title="separate print.less"> 单独的print.less </A> </LI> </醇> </DIV>

编辑
2#
回复此人
你瞎啊！撞我心了 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 要使打印视图看起来像平板电脑或桌面包括bootstrap asless，而不是.css，然后你可以在bootstrap_variables文件的末尾覆盖bootstrap响应类，例如： </p> <pre> <code> @container-sm: 1200px; @container-md: 1200px; @container-lg: 1200px; @screen-sm: 0; </code> </pre> <P> 不要担心将这些变量放在文件的末尾。 LESS支持延迟加载变量，因此它们将被应用。 </p> </DIV>

编辑
3#
回复此人
Coolkid | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 务必为打印指定样式表。 <BR/> 它可以是一个单独的样式表： </p> <pre> <code> <link rel="stylesheet" type="text/css" media="print" href="print.css"> </code> </pre> <P> 或者您为所有设备共享的内容： </p> <pre> <code> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute </code> </pre> <P> 然后，您可以使用媒体查询在单独的样式表或共享样式表中为打印机编写样式： </p> <pre> <code> @media print { /* Your styles here */ } </code> </pre> </DIV>

编辑
4#
回复此人
张三岁 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 有一部分 <code> @media print </code> 在css文件中的代码（Bootstrap 3.3.1 [更新：]到3.3.5），这几乎剥离了所有的样式，所以即使它正在工作，你也会得到相当平淡的打印输出。 </p> <P> 现在我不得不求助于剥离 <code> @media print </code> 来自bootstrap.css的部分 - 我真的的<strong> 不 </强> 我很高兴，但我的用户希望直接获取屏幕，所以现在必须这样做。如果有人知道如何抑制它而不更改引导程序文件我会非常感兴趣。 </p> <P> 这是'违规'代码块，从第192行开始： </p> <pre> <code> @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; } } </code> </pre> </DIV>

编辑
5#
回复此人
afs-loliaholic | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我找到的最佳选择是 <a href="http://html2canvas.hertzen.com/" rel="noreferrer"> http://html2canvas.hertzen.com/ </A> <BR/> <a href="http://jsfiddle.net/nurbsurf/1235emen/" rel="noreferrer"> http://jsfiddle.net/nurbsurf/1235emen/ </A> </p> <pre> <code> html2canvas(document.body, { onrendered: function(canvas) { $("#page").hide(); document.body.appendChild(canvas); window.print(); $('canvas').remove(); $("#page").show(); } }); </code> </pre> </DIV>

编辑
6#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果有人正在寻找解决方案的<strong> Bootstrap v2.X.X </强> 这里。我要离开我正在使用的解决方案。 <EM> 这并没有在所有浏览器上进行全面测试，但它可能是一个良好的开端。 </EM> </p> <P> 1）确保媒体属性 <code> bootstrap-responsive.css </code> 是 <code> screen </code> 。 </p> <pre> <code> <link href="/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen" /> </code> </pre> <P> 2）创建一个 <code> print.css </code> 并确保其媒体属性 <code> print </code> </p> <pre> <code> <link href="/css/print.css" rel="stylesheet" media="print" /> </code> </pre> <P> 3）里面 <code> print.css </code> ，在html＆amp;中添加您网站的“宽度”身体 </p> <pre> <code> html, body { width: 1200px !important; } </code> </pre> <P> 4.）重现必要的媒体查询类 <code> print.css </code> 因为他们在里面 <code> bootstrap-responsive.css </code> 我们在打印时禁用了它。 </p> <pre> <code> .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} </code> </pre> <P> 这是完整版 <code> print.css </code> ： </p> <pre> <code> 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} </code> </pre> </DIV>

编辑
7#
回复此人
镜乃Kagamino | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 替换每一个 <code> col-md- </code> 同 <code> col-xs- </code> </p> <P> 例如：替换每一个 <code> col-md-6 </code> 至 <code> col-xs-6 </code> 。 </p> <P> 这对我有用，让我摆脱这个问题你可以看到你必须要更换的东西。 </p> </DIV>

编辑

登录后才能参与评论