Як створити сторінку для друку на Twitter-Bootstrap

Я використовую Twitter-Bootstrap, і мені потрібно мати можливість надрукувати сторінку так, як вона виглядає у браузері. Я можу друкувати інші сторінки, зроблені за допомогою Twitter-Bootstrap просто чудово, але я не можу, здається, надрукувати свою сторінку, яка використовує суто Twitter-Bootstrap. Я десь пропускаю тег?

Офіційна сторінка з туберкульозу при друкуванні:

Моя сторінка при друкуванні:

Як насправді виглядає моя сторінка:

Обов’язково мати друковану таблицю стилів.
Це може бути окрема таблиця стилів:

<link rel="stylesheet" type="text/css" media="print" href="print.css">

або один, яким ви ділитесь для всіх пристроїв:

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute

Потім ви можете записати свої стилі для принтерів в окремі таблиці стилів або в спільний, використовуючи медіа-запити:

@media print {
    /* Your styles here */
}

Оновлення Bootstrap 3.2: (поточний випуск)

Поточна стабільна версія Bootstrap становить 3.2.0 .
У версії 3.2 застарілий видимий друк, тому вам слід користуватися таким чином:

Class                        Browser    Print
 -------------------------------------------------
.visible-print-block         Hidden        Visible (as block)
.visible-print-inline        Hidden        Visible (as inline)
.visible-print-inline-block  Hidden        Visible (as inline-block)
.hidden-print                Visible       Hidden

Оновлення завантажувача 3:

Класи друку зараз у документах: http://getbootstrap.com/css/#responsive-utilities-print

Similar to the regular responsive classes,
       use these for toggling content for print.

Class            Browser    Print
 ----------------------------------------
.visible-print   Hidden     Visible
.hidden-print    Visible    Hidden

Версія для завантаження 2.3.1:

Після додавання файлу bootstrap.css у свій HTML,
знайдіть частини, які ви не хочете друкувати, та додайте hidden-printклас у теги. Оскільки файл css включає це:

@media print {
  .visible-print  { display: inherit !important; }
  .hidden-print   { display: none !important; }
}

Замініть кожного col-md-наcol-xs-

наприклад: замінити кожен col-md-6на col-xs-6.

Це те, що працювало для мене, щоб позбутися від цієї проблеми, ви можете побачити, що вам доведеться замінити.

У @media printфайлі css є розділ коду (Bootstrap 3.3.1 [ОНОВЛЕННЯ:] до 3.3.5), це знімає практично всі стилі, тому ви отримуєте досить чіткі роздруківки навіть під час роботи.

Поки що мені довелося вдатися до вилучення @media printрозділу з bootstrap.css - чого я дуже не радий, але мої користувачі хочуть прямо захоплювати екран, тому це доведеться робити поки що. Якщо хтось знає, як придушити це без змін у файлах завантажувального програмного забезпечення, я був би дуже зацікавлений.

Ось блок коду "ображає", починається з рядка № 192:

@media print {
  *,
  *:before,enter code here
  *:after {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;

    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  select {
    background: #fff !important;
  }
  .navbar {
    display: none;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}

Найкращий варіант, який я знайшов, був http://html2canvas.hertzen.com/
http://jsfiddle.net/nurbsurf/1235emen/

html2canvas(document.body, {  
  onrendered: function(canvas) {
    $("#page").hide();
    document.body.appendChild(canvas);
    window.print();
    $('canvas').remove();
    $("#page").show();
  }
});

Якщо хтось шукає рішення для Bootstrap v2.XX тут. Я залишаю рішення, яким я користувався. Це не повністю перевірено на всіх браузерах, проте це може бути гарним початком.

1) переконайтеся, що атрибут медіа bootstrap-responsive.cssє screen.

<link href="/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen" />

2) створити print.cssі переконатися в його атрибуті медіаprint

<link href="/css/print.css" rel="stylesheet" media="print" />

3) всередині print.css, додайте "ширину" вашого веб-сайту в html & body

html, 
body {
    width: 1200px !important;
}

4.) відтворити необхідні класи медіа-запитів, print.cssоскільки вони були всередині, bootstrap-responsive.cssі ми його відключили під час друку.

.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}

Ось повна версія print.css:

html, 
body {
    width: 1200px !important;
}

.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}

2 речі FYI -

1. Наразі вони додали кілька перемикаючих класів. Подивіться, що доступно в останньому стабільному випуску - друкуйте перемикачі у respovable-utilities.less
2. Нове та вдосконалене рішення, що надходить у Bootstrap 3.0 - вони додають окремий файл без друку. Дивіться окремий print.less

Щоб вигляд друку виглядав так, як планшет або робочий стіл включають завантажувальний файл як .less, а не як .css, а потім ви можете перезаписати класи, що реагують на завантажувальну програму, наприкінці файлу bootstrap_variables, наприклад, таким чином:

@container-sm:      1200px;
@container-md:      1200px;
@container-lg:      1200px;
@screen-sm:         0;

Не хвилюйтесь щодо розміщення цих змінних у кінці файлу. LESS підтримує ледаче завантаження змінних, щоб вони застосовувалися.

Якщо ви хочете зберегти стовпці на форматі формату А4 (це близько 540 пікселів), це хороша ідея

@media print {
    .make-grid(print-A4);
}

.make-print-A4-column(@columns) {
    @media print {
        float: left;
        width: percentage((@columns / @grid-columns));
    }
}

Ви можете використовувати його так:

<div class="col-sm-4 col-print-A4-4">