Comment créer une page Twitter-Bootstrap imprimable

Question

Je suis en utilisant Twitter Bootstrap et j'ai besoin d'être en mesure d'imprimer la page de la façon dont elle regarde sur le navigateur. Je suis capable d'imprimer d'autres pages faites avec Twitter Bootstrap très bien, mais je n'arrive pas à imprimer ma page qui utilise purement Twitter Bootstrap. Ai-je raté une balise quelque part?

Officiel de la TUBERCULOSE page lors de l'impression:

Ma page lors de l'impression:

Ce qui ma page ressemble réellement:

Answer 1

Bootstrap 3.2 mise à jour: (version actuelle)

Stable actuelle de Bootstrap, version 3.2.0.
Avec la version 3.2 visible-impression obsolète, de sorte que vous devez utiliser comme ceci:

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 mise à jour:

Imprimer les classes sont maintenant dans les documents: 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:

Après l'ajout de bootstrap.fichier css dans votre code HTML,
Trouver les pièces que vous ne souhaitez pas imprimer et ajouter hidden-print de la classe dans les balises. Parce que le fichier css comprend ceci:

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

Answer 2

Soyez sûr d’avoir une feuille de style assigné pour l’impression.
Ça pourrait être une feuille de style distincte :

ou bien on vous partager pour tous les périphériques :

Ensuite, vous pouvez écrire vos styles pour les imprimantes dans les feuilles de style séparées ou dans celui partagé à l’aide de questions des médias :

Answer 3

Meilleure option que j’ai trouvé a été http://html2canvas.hertzen.com/
http://jsfiddle.net/nurbsurf/1235emen/

Answer 4

2 choses FYI -

1. Pour l'instant, ils ont ajouté quelques bascule classes. Voir ce qui est disponible dans la dernière version stable - impression bascule en responsive-utilitaires.moins
2. Nouvelle et améliorée de la solution de venir dans le Bootstrap 3.0 - ils sont l'ajout d'une impression séparée.moins fichier. Voir impression séparée.moins