Wallogit.com
2017 © Pedro Peláez
Bootstrap print for Bootstrap v3. Mange grids using Bootstrap v3 for printed media.
Bootstrap print for Bootstrap v3., (*1)
This will help controlling grid columns size on printed pages. with RTL (right to left)., (*2)
LESS, (*3)
@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, (*4)
../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., (*5)
.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:, (*6)
<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>
Always insert a page break after the element., (*7)
.always-page-break-after .always-pba
Avoid page break after the element (if possible)., (*8)
.avoid-page-break-after .avoid-pba
Insert page breaks after the element so that the next page is formatted as a left page., (*9)
.left-page-break-after .left-pba
Insert page breaks after the element so that the next page is formatted as a right page., (*10)
.right-page-break-after .right-pba
Always insert a page break before the element., (*11)
.always-page-break-before .always-pbb
Avoid page break before the element (if possible)., (*12)
.avoid-page-break-before .avoid-pbb
Insert page breaks before the element so that the next page is formatted as a left page., (*13)
.left-page-break-before .left-pbb
Insert page breaks before the element so that the next page is formatted as a right page., (*14)
.right-page-break-before .right-pbb
Avoid page break inside the element (if possible)., (*15)
.avoid-page-break-inside .avoid-pbi
All link's href URLs will be hidden in print media too., (*16)
Install with the composer, (*17)
composer require vardot/bootstrap-print
We could use one of the following options to use the same style in print., (*18)
LESS, (*19)
@import '../bootstrap-print/less/bootstrap-print.less'; @import '../bootstrap-print/less/bootstrap-print-lg.less';
CSS, (*20)
../bootstrap-print/css/bootstrap-print.css ../bootstrap-print/css/bootstrap-print-lg.css
LESS, (*21)
@import '../bootstrap-print/less/bootstrap-print.less'; @import '../bootstrap-print/less/bootstrap-print-md.less';
CSS, (*22)
../bootstrap-print/css/bootstrap-print.css ../bootstrap-print/css/bootstrap-print-md.css
LESS, (*23)
@import '../bootstrap-print/less/bootstrap-print.less'; @import '../bootstrap-print/less/bootstrap-print-sm.less';
CSS, (*24)
../bootstrap-print/css/bootstrap-print.css ../bootstrap-print/css/bootstrap-print-sm.css
LESS, (*25)
@import '../bootstrap-print/less/bootstrap-print.less'; @import '../bootstrap-print/less/bootstrap-print-xs.less';
CSS, (*26)
../bootstrap-print/css/bootstrap-print.css ../bootstrap-print/css/bootstrap-print-xs.css
-, (*27)
LESS, (*28)
@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, (*29)
../bootstrap-print/css/rtl/bootstrap-print-rtl.css ../bootstrap-print/css/rtl/bootstrap-print-rtl-sm.css
Bootstrap print for Bootstrap v3. Mange grids using Bootstrap v3 for printed media.
MIT
Bootstrap print for Bootstrap v3. Mange grids using Bootstrap v3 for printed media.
MIT