Comment créer une page Twitter-Bootstrap imprimable

J'utilise Twitter-Bootstrap et je dois pouvoir imprimer la page telle qu'elle apparaît sur le navigateur. Je suis capable d'imprimer très bien d'autres pages créées avec Twitter-Bootstrap, mais je n'arrive pas à imprimer ma page qui utilise uniquement Twitter-Bootstrap. Est-ce que je manque une étiquette quelque part?

Page officielle sur la tuberculose une fois imprimée:

Ma page une fois imprimée:

À quoi ressemble ma page:

Assurez-vous d'avoir une feuille de style attribuée pour l'impression.
Il peut s'agir d'une feuille de style distincte:

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

ou celui que vous partagez pour tous les appareils:

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

Ensuite, vous pouvez écrire vos styles pour les imprimantes dans les feuilles de style séparées ou dans celle partagée à l'aide de requêtes multimédias:

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

Mise à jour de Bootstrap 3.2: (version actuelle)

La version actuelle stable de Bootstrap est 3.2.0 .
Avec la version 3.2 visible-print obsolète, vous devriez donc 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

Mise à jour de Bootstrap 3:

Les classes d'impression 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

Version de Bootstrap 2.3.1:

Après avoir ajouté le fichier bootstrap.css dans votre HTML,
recherchez les parties que vous ne souhaitez pas imprimer et ajoutez la hidden-printclasse dans les balises. Parce que le fichier css comprend ceci:

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

Remplacez chaque col-md-parcol-xs-

par exemple: remplacez tous col-md-6par col-xs-6.

C'est ce qui a fonctionné pour moi pour me débarrasser de ce problème, vous pouvez voir ce que vous devez remplacer.

Il y a une section de @media printcode dans le fichier css (Bootstrap 3.3.1 [UPDATE:] à 3.3.5), cela supprime pratiquement tout le style, donc vous obtenez des impressions assez fades même quand cela fonctionne.

Pour l'instant, j'ai dû recourir à la suppression de la @media printsection de bootstrap.css - ce dont je ne suis vraiment pas content, mais mes utilisateurs veulent des captures d'écran directes, donc cela devra faire pour le moment. Si quelqu'un sait comment le supprimer sans modifier les fichiers d'amorçage, je serais très intéressé.

Voici le bloc de code `` offensant '', commence à la ligne 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;
  }
}

La meilleure option que j'ai trouvée était 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();
  }
});

Dans le cas où quelqu'un cherche une solution pour Bootstrap v2.XX ici. Je laisse la solution que j'utilisais. Ce n'est pas entièrement testé sur tous les navigateurs, mais cela pourrait être un bon début.

1) assurez-vous que l'attribut media de bootstrap-responsive.cssest screen.

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

2) créez un print.csset assurez-vous que son attribut médiaprint

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

3) à l'intérieur print.css, ajoutez la "largeur" ​​de votre site web en html & body

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

4.) reproduisez les classes de requêtes multimédias nécessaires print.csscar elles étaient à l'intérieur bootstrap-responsive.csset nous l'avons désactivé lors de l'impression.

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

Voici la version complète de 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 choses pour info -

1. Pour l'instant, ils ont ajouté quelques classes à bascule. Découvrez ce qui est disponible dans la dernière version stable - bascule d'impression dans responsive-utilities.
2. Nouvelle solution améliorée à venir dans Bootstrap 3.0 - ils ajoutent un fichier print.less séparé. Voir print.less séparé

Pour que la vue d'impression ressemble à une tablette ou à un bureau, incluez bootstrap en .less, pas en .css, puis vous pouvez écraser les classes réactives bootstrap à la fin du fichier bootstrap_variables, par exemple comme ceci:

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

Ne vous inquiétez pas de mettre ces variables à la fin du fichier. LESS prend en charge le chargement différé des variables afin qu'elles soient appliquées.

Si vous souhaitez conserver les colonnes sur une impression A4 (environ 540 pixels), c'est une bonne idée

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

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

Vous pouvez l'utiliser comme ceci:

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