So erstellen Sie eine druckbare Twitter-Bootstrap-Seite

Ich verwende Twitter-Bootstrap und muss in der Lage sein, die Seite so zu drucken, wie sie im Browser aussieht. Ich kann andere mit Twitter-Bootstrap erstellte Seiten problemlos drucken, aber ich kann meine Seite, die ausschließlich Twitter-Bootstrap verwendet, nicht drucken. Vermisse ich irgendwo einen Tag?

Offizielle TB-Seite beim Drucken:

Meine Seite beim Drucken:

Wie meine Seite tatsächlich aussieht:

Stellen Sie sicher, dass zum Drucken ein Stylesheet zugewiesen ist.
Es könnte sich um ein separates Stylesheet handeln:

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

oder eine, die Sie für alle Geräte freigeben:

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

Anschließend können Sie Ihre Stile für Drucker mithilfe von Medienabfragen in die separaten Stylesheets oder in die freigegebenen schreiben:

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

Bootstrap 3.2 Update: (aktuelle Version)

Die aktuelle stabile Bootstrap-Version ist 3.2.0 .
Mit Version 3.2 ist der sichtbare Druck veraltet, daher sollten Sie Folgendes verwenden:

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

Bootstrap 3-Update:

Druckklassen befinden sich jetzt in Dokumenten: 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

Bootstrap 2.3.1 Version:

Suchen Sie nach dem Hinzufügen der Datei bootstrap.css zu Ihrem HTML- Code die Teile, die Sie nicht drucken möchten, und fügen Sie den hidden-printTags eine Klasse hinzu. Weil die CSS-Datei Folgendes enthält:

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

Ersetzen Sie alle col-md-durchcol-xs-

zB: ersetzen jeden col-md-6zu col-xs-6.

Dies ist die Sache, die für mich funktioniert hat, um mich von diesem Problem zu befreien. Sie können sehen, was Sie ersetzen müssen.

Es gibt einen Abschnitt von @media print Codeabschnitt in der CSS-Datei (Bootstrap 3.3.1 [UPDATE:] bis 3.3.5), der praktisch das gesamte Styling entfernt, sodass Sie auch dann ziemlich langweilige Ausdrucke erhalten, wenn es funktioniert.

Im Moment musste ich darauf zurückgreifen, den @media printAbschnitt aus bootstrap.css zu entfernen - was ich wirklich nicht bin glücklich aber meine Benutzer möchten direkte Screenshots, sodass dies werden muss. Wenn jemand weiß, wie man es ohne Änderungen an den Bootstrap-Dateien unterdrückt, wäre ich sehr interessiert.

Hier ist der 'beleidigende' Codeblock, der in Zeile 192 beginnt:

@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;
  }
}

Die beste Option, die ich gefunden habe, war 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();
  }
});

Falls jemand hier nach einer Lösung für Bootstrap v2.XX sucht . Ich verlasse die Lösung, die ich verwendet habe. Dies ist nicht in allen Browsern vollständig getestet, könnte jedoch ein guter Anfang sein.

1) Stellen Sie sicher, dass das Medienattribut von bootstrap-responsive.cssist screen.

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

2) Erstellen Sie ein print.cssund stellen Sie sicher, dass sein Medienattributprint

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

3) Fügen print.cssSie im Inneren die "Breite" Ihrer Website in HTML & Body hinzu

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

4.) Reproduzieren Sie die erforderlichen Medienabfrageklassen in, print.cssda sie sich im Inneren befanden bootstrap-responsive.cssund wir sie beim Drucken deaktiviert haben.

.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}

Hier ist die Vollversion von 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 Dinge FYI -

1. Im Moment haben sie einige Umschaltklassen hinzugefügt. Sehen Sie, was in der neuesten stabilen Version verfügbar ist - Druckschalter in responsive-utilities.less
2. Neue und verbesserte Lösung in Bootstrap 3.0 - sie fügen eine separate print.less-Datei hinzu. Siehe separate drucklose

Damit die Druckansicht wie ein Tablet oder Desktop aussieht, schließen Sie Bootstrap als .less und nicht als .css ein. Anschließend können Sie die am Ende der Datei bootstrap_variables ansprechenden Bootstrap-Klassen wie folgt überschreiben:

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

Machen Sie sich keine Sorgen, dass diese Variablen am Ende der Datei stehen. WENIGER unterstützt das verzögerte Laden von Variablen, damit diese angewendet werden.

Wenn Sie Spalten auf A4-Druck (ca. 540 Pixel) behalten möchten, ist dies eine gute Idee

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

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

Sie können es so verwenden:

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