Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/natshah/bootstrap-print
To manage print media for Twitter Bootstrap v3.
https://github.com/natshah/bootstrap-print
bootstrap bootstrap-print bootstrap3 css less media printer printing
Last synced: 3 months ago
JSON representation
To manage print media for Twitter Bootstrap v3.
- Host: GitHub
- URL: https://github.com/natshah/bootstrap-print
- Owner: Natshah
- License: mit
- Created: 2014-11-06T11:46:42.000Z (about 10 years ago)
- Default Branch: 3.1.x
- Last Pushed: 2017-04-01T08:31:58.000Z (almost 8 years ago)
- Last Synced: 2024-10-11T06:41:09.498Z (3 months ago)
- Topics: bootstrap, bootstrap-print, bootstrap3, css, less, media, printer, printing
- Homepage: http://natshah.com
- Size: 40 KB
- Stars: 62
- Watchers: 9
- Forks: 25
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Bootstrap Print 3.1.5
====================
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:
```
```
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
```