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:
printing
twitter-bootstrap
Jay Q.
quelle
quelle
Antworten:
Stellen Sie sicher, dass zum Drucken ein Stylesheet zugewiesen ist.
Es könnte sich um ein separates Stylesheet handeln:
oder eine, die Sie für alle Geräte freigeben:
Anschließend können Sie Ihre Stile für Drucker mithilfe von Medienabfragen in die separaten Stylesheets oder in die freigegebenen schreiben:
quelle
media="screen"
das von einem Drucker nicht angezeigt wird. Sie können dies entweder umschaltenmedia="all"
oder einfach entfernen,media
wie in der obigen Antwort angegeben.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:
Bootstrap 3-Update:
Druckklassen befinden sich jetzt in Dokumenten: http://getbootstrap.com/css/#responsive-utilities-print
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-print
Tags eine Klasse hinzu. Weil die CSS-Datei Folgendes enthält:quelle
body
) unsichtbar mache.hidden-print
, aber ein bestimmtes Element überschreiben möchte, das angezeigt werden soll?Ersetzen Sie alle
col-md-
durchcol-xs-
zB: ersetzen jeden
col-md-6
zucol-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.
quelle
div
ging unter die vorherige. Diese Antwort gab mir einen Hinweis, den ichcol-xs-*
vor jedem hinzufügte,col-md-*
und dies behebte das Problem. HAFTUNGSAUSSCHLUSS: Ich habe das Hinzufügen eines Containers nicht getestet, da<div class="row"></div>
dies möglicherweise auch das Problem gelöst hat (scheint offensichtlich zu sein).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 print
Abschnitt 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:
quelle
Die beste Option, die ich gefunden habe, war http://html2canvas.hertzen.com/
http://jsfiddle.net/nurbsurf/1235emen/
quelle
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.css
istscreen
.2) Erstellen Sie ein
print.css
und stellen Sie sicher, dass sein Medienattributprint
3) Fügen
print.css
Sie im Inneren die "Breite" Ihrer Website in HTML & Body hinzu4.) Reproduzieren Sie die erforderlichen Medienabfrageklassen in,
print.css
da sie sich im Inneren befandenbootstrap-responsive.css
und wir sie beim Drucken deaktiviert haben.Hier ist die Vollversion von
print.css
:quelle
2 Dinge FYI -
quelle
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:
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.
quelle
Wenn Sie Spalten auf A4-Druck (ca. 540 Pixel) behalten möchten, ist dies eine gute Idee
Sie können es so verwenden:
<div class="col-sm-4 col-print-A4-4">
quelle