natshah/bootstrap-print

Bootstrap v3 的打印版。使用 Bootstrap v3 管理打印媒体的网格。

维护者

详细信息

github.com/Natshah/bootstrap-print

主页

源代码

问题

安装: 353

依赖: 0

建议: 0

安全: 0

星标: 61

关注者: 9

分支: 25

3.1.2 2017-01-28 01:53 UTC

MIT 2957d5f2701af09a5c52b2b93c2e7e01ed486a32

This package is auto-updated.

Last update: 2024-09-17 10:44:37 UTC

README

Bootstrap v3 的打印版。

使用 Bootstrap v3 在打印媒体上管理网格。

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

我们基于小型设备（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