Bootstrap 3.x 打印问题 打印无法显示背景、字体变黑
2017-12-13 15:52
411 查看
这万恶的东西,打印也要你写样式啊!真是坑。
Bootstrap 以下代码设置了打印样式,改下就好了
@media print {
* {
color: #000 !important;
text-shadow: none !important;
background: transparent !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^="javascript:"]:after,
a[href^="#"]: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;
}
.table td,
.table th {
background-color: #fff !important;
}
.btn > .caret,
.dropup > .btn > .caret {
border-top-color: #000 !important;
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
}
Bootstrap 以下代码设置了打印样式,改下就好了
@media print {
* {
color: #000 !important;
text-shadow: none !important;
background: transparent !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^="javascript:"]:after,
a[href^="#"]: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;
}
.table td,
.table th {
background-color: #fff !important;
}
.btn > .caret,
.dropup > .btn > .caret {
border-top-color: #000 !important;
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
}
相关文章推荐
- Bootstrap navbar 背景颜色、背景图和字体颜色修改,颜色修改不显示的问题
- 在Yii中解决引入本地Bootstrap文件字体图标无法显示问题
- IE浏览器无法显示背景,字体显示很大问题的解决办法[转]
- Bootstrap—解决引入本地Bootstrap文件字体图标无法显示问题
- 本地Bootstrap文件字体图标引入却无法显示问题的解决方法
- Button的背景使用selector图片无法显示的问题
- Bootstrap字体图标不显示问题
- 解决Flex 4中,自定义字体时Alert或其它mx UI组件无法显示中文的问题
- Evince查看pdf,中文字体无法显示的问题。特别是下载的论文/期刊pdf文件
- 无法找到或创建字体'SansSerif'.某些字符可能无法正确显示或打印。
- 开启cdn后无法显示字体图标——CDN服务器跨域问题
- Bootstrap3 多个模态对话框无法显示的问题
- 关于CSS中内层使用float导致外层的背景无法显示的问题的解决
- 关于字体图标在firefox上本地访问无法显示的问题分析
- CSS 按钮背景图片显示不出,字体无法控制问题
- 关于CSS中内层使用float导致外层的背景无法显示的问题的解决方法
- Bootstrap字体图标不显示问题
- 前端——bootstrap无法显示图标问题
- 使用Bootstrap后,关于IE与Chrome显示字体的问题
- eclipse的console无法正确显示ANSI的颜色字体的问题