natshah/bootstrap-print
Composer 安装命令：
composer require natshah/bootstrap-print
包简介
Bootstrap print for Bootstrap v3. Mange grids using Bootstrap v3 for printed media.
README 文档
README
Bootstrap print for Bootstrap v3.
Mange grids using Bootstrap v3 for printed media.
This will help controlling grid columns size on printed pages. with RTL (right to left).
We do style most of our bootstrap theme sites based on the Small devices (sm).
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
We will have the list of custom set of print column sizes, so that we could change the layout in the printed media as well.
.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
For Example:
<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>
And you have a list of helper CSS classes.
Always insert a page break after the element.
.always-page-break-after
.always-pba
Avoid page break after the element (if possible).
.avoid-page-break-after
.avoid-pba
Insert page breaks after the element so that the next page is formatted as a left page.
.left-page-break-after
.left-pba
Insert page breaks after the element so that the next page is formatted as a right page.
.right-page-break-after
.right-pba
Always insert a page break before the element.
.always-page-break-before
.always-pbb
Avoid page break before the element (if possible).
.avoid-page-break-before
.avoid-pbb
Insert page breaks before the element so that the next page is formatted as a left page.
.left-page-break-before
.left-pbb
Insert page breaks before the element so that the next page is formatted as a right page.
.right-page-break-before
.right-pbb
Avoid page break inside the element (if possible).
.avoid-page-break-inside
.avoid-pbi
All link's href URLs will be hidden in print media too.
Install with the composer
composer require vardot/bootstrap-print
We could use one of the following options to use the same style in print.
Large devices (lg) style in print.
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
Medium devices (md) style in print.
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
Small devices (sm) style in print.
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
Extra small devices (xs) style in print.
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
For right to left:
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
统计信息
- 总下载量： 358
- 月度下载量： 0
- 日度下载量： 0
- 收藏数： 62
- 点击次数： 1
- 依赖项目数： 0
- 推荐数： 0
其他信息
- 授权协议： MIT
- 更新时间： 2017-01-28