vardot/bootstrap-print

为Bootstrap v3提供打印功能。使用Bootstrap v3管理打印介质的网格。

维护者

详细信息

github.com/Vardot/bootstrap-print

主页

源代码

问题

安装: 104

依赖项: 0

建议者: 0

安全性: 0

星标: 3

关注者: 5

分支: 25

开放问题: 0

3.1.5 2017-03-29 17:51 UTC

MIT c66424717aaf89578d368f3d35610fbdf4c372d8

This package is auto-updated.

Last update: 2024-09-17 09:51:52 UTC

README

为Bootstrap v3提供打印功能。

使用Bootstrap v3管理打印介质的网格。

这将有助于控制打印页面上网格列的大小。支持从右到左（RTL）。

我们基于小型设备（sm）的风格来设计我们的大部分Bootstrap主题站点。

LESS

  @import '../bootstrap/less/variables';
  @import '../bootstrap/less/mixins/grid-framework';
  @import '../bootstrap/less/mixins/grid';
  @import '../bootstrap-print/less/bootstrap-print.less';
  @import '../bootstrap-print/less/bootstrap-print-sm.less';

CSS

../bootstrap-print/css/bootstrap-print.css
../bootstrap-print/css/bootstrap-print-sm.css

我们将有一系列自定义的打印列尺寸列表，以便我们可以在打印媒体中更改布局。

 .col-p-1,
 .col-p-2,
 .col-p-3,
 .col-p-4,
 .col-p-5,
 .col-p-6,
 .col-p-7,
 .col-p-8,
 .col-p-9,
 .col-p-10,
 .col-p-11,
 .col-p-12

例如

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="../bootstrap-print/css/bootstrap-print.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap-print/css/bootstrap-print-sm.css">
  <head>
  <body>
    <div class="container">
      <!-- In print media the sm Small devices will be used -->
      <div class="row">
        <div class="left col-sm-8"></div>
        <div class="right col-sm-4"></div>
      </div>

      <!-- In print media the p print will override the sm Small devices -->
      <div class="row">
        <div class="left col-sm-8 col-p-6"></div>
        <div class="right col-sm-4 col-p-6"></div>
      </div>
    </div>
  </body>
</html>

并提供了一系列辅助CSS类。

始终在元素后插入分页符。

.always-page-break-after
.always-pba

避免在元素后插入分页符（如果可能的话）。

.avoid-page-break-after
.avoid-pba

在元素后插入分页符，以便下一页格式化为左页。

.left-page-break-after
.left-pba

在元素后插入分页符，以便下一页格式化为右页。

.right-page-break-after
.right-pba

始终在元素前插入分页符。

.always-page-break-before
.always-pbb

避免在元素前插入分页符（如果可能的话）。

.avoid-page-break-before
.avoid-pbb

在元素前插入分页符，以便下一页格式化为左页。

.left-page-break-before
.left-pbb

在元素前插入分页符，以便下一页格式化为右页。

.right-page-break-before
.right-pbb

避免在元素内插入分页符（如果可能的话）。

.avoid-page-break-inside
.avoid-pbi

所有链接的href URL也将隐藏在打印媒体中。

使用Composer安装

composer require vardot/bootstrap-print

我们可以使用以下选项之一来在打印中应用相同的样式。

打印时使用大设备（lg）样式。

LESS

  @import '../bootstrap-print/less/bootstrap-print.less';
  @import '../bootstrap-print/less/bootstrap-print-lg.less';

CSS

../bootstrap-print/css/bootstrap-print.css
../bootstrap-print/css/bootstrap-print-lg.css

打印时使用中等设备（md）样式。

LESS

  @import '../bootstrap-print/less/bootstrap-print.less';
  @import '../bootstrap-print/less/bootstrap-print-md.less';

CSS

../bootstrap-print/css/bootstrap-print.css
../bootstrap-print/css/bootstrap-print-md.css

打印时使用小型设备（sm）样式。

LESS

  @import '../bootstrap-print/less/bootstrap-print.less';
  @import '../bootstrap-print/less/bootstrap-print-sm.less';

CSS

../bootstrap-print/css/bootstrap-print.css
../bootstrap-print/css/bootstrap-print-sm.css

打印时使用超小型设备（xs）样式。

LESS

  @import '../bootstrap-print/less/bootstrap-print.less';
  @import '../bootstrap-print/less/bootstrap-print-xs.less';

CSS

../bootstrap-print/css/bootstrap-print.css
../bootstrap-print/css/bootstrap-print-xs.css

对于从右到左

LESS

  @import '../bootstrap/less/variables';
  @import '../bootstrap/less/mixins/grid-framework-rtl';
  @import '../bootstrap/less/mixins/grid-rtl';
  @import '../bootstrap-print/less/bootstrap-print-rtl.less';
  @import '../bootstrap-print/less/bootstrap-print-rtl-sm.less';

CSS

../bootstrap-print/css/rtl/bootstrap-print-rtl.css
../bootstrap-print/css/rtl/bootstrap-print-rtl-sm.css