Question

我在JSFiddle中做了一个简单的例子，我将打印出Bootstrap进度条在页面上的页面，但是如果按下了打印按钮，则进度条不在那里。有谁知道为什么？

<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
     <span class="sr-only">60% Complete</span>
   </div>
</div>

[编辑] 我试过这样但没有成功New try

My example

Answer 1

这是因为浏览器没有打印背景（使用默认设置），但它会打印边框，我们可以使用它！我刚刚在CSS中添加了@media print（我的LESS-CSS代码）：

@media print {
.progress {
    position: relative;
    &:before {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        border-bottom: @line-height-computed solid @gray-lighter;
    }
    &-bar {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        border-bottom: @line-height-computed solid @brand-primary;
        &-success {
            border-bottom-color: @brand-success;
        }
        &-info {
            border-bottom-color: @brand-info;
        }
        &-warning {
            border-bottom-color: @brand-warning;
        }
        &-danger {
            border-bottom-color: @brand-danger;
        }
    }
}
}

编译CSS（带我的变量）：

@media print {
.progress {
    position: relative;
}
.progress:before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    border-bottom: 2rem solid #eeeeee;
}
.progress-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    border-bottom: 2rem solid #337ab7;
}
.progress-bar-success {
    border-bottom-color: #67c600;
}
.progress-bar-info {
    border-bottom-color: #5bc0de;
}
.progress-bar-warning {
    border-bottom-color: #f0a839;
}
.progress-bar-danger {
    border-bottom-color: #ee2f31;
}
}

像Bootstrap 3中的魅力一样。

Answer 2

你必须在CSS中设置@media print。我想答案在这里给出： Bootstrap 3 - printing colors on progress bars?

Answer 3

将 print css 与屏幕css 分开。

这是通过@media print和@media screen

完成的

在您的情况下，您可以添加此@media print CSS规则，如下所示：

@media print {
   /* All your print styles go here */
   .progress{
     background-color: #f5f5f5 !important;
     border-radius: 4px !important;
     -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
   }
   .progress-bar{
     background-color: #428bca !important;
     box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15) !important;
   }
}

@media print： 适用于分页素材和在打印预览模式下在屏幕上查看的文档。

请参阅Updated Fiddle

Answer 4

对大多数人来说这是显而易见的，但让我们为阅读的人增加你应该：
1：使用上面的@xixe代码创建样式表并将其另存为print.css。
2：将其插入HTML页面
<link rel="stylesheet" type="text/css" media="print" href="print.css">
3：现在打印。

进一步：对于有助于打印bootstrap 3内容的完整CSS，您可以在此页面上获得一个好的CSS https://daneveland.com/content/printing-bootstrap

Bootstrap - 打印预览中不显示进度条

4 个答案: