我正在使用Twitter-Bootstrap，我需要能夠按照瀏覽器上的外觀打印頁面。我可以打印使用Twitter-Bootstrap制作的其他頁面，但是我似乎無法打印僅使用Twitter-Bootstrap的頁面。我在某處缺少標簽嗎？
3 回答
心有法竹
TA貢獻1866條經驗 獲得超5個贊
確保為打印分配了樣式表。
它可以是一個單獨的樣式表：
<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 */
}
尚方寶劍之說
TA貢獻1788條經驗 獲得超4個贊
@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;
}
}
- 3 回答
- 0 關注
- 583 瀏覽
添加回答
舉報
0/150
提交
取消