Cómo crear una página imprimible de Twitter-Bootstrap

Estoy usando Twitter-Bootstrap y necesito poder imprimir la página como se ve en el navegador. Puedo imprimir otras páginas hechas con Twitter-Bootstrap muy bien, pero parece que no puedo imprimir mi página que usa puramente Twitter-Bootstrap. ¿Me estoy perdiendo una etiqueta en alguna parte?

Página oficial de TB cuando se imprime:

Mi página cuando se imprime:

Cómo se ve realmente mi página:

Asegúrese de tener una hoja de estilo asignada para imprimir.
Podría ser una hoja de estilo separada:

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

o uno que comparta para todos los dispositivos:

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

Luego, puede escribir sus estilos para impresoras en las hojas de estilo separadas o en la compartida utilizando consultas de medios:

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

Actualización de Bootstrap 3.2: (versión actual)

La versión actual estable de Bootstrap es 3.2.0 .
Con la versión 3.2 de impresión visible en desuso, por lo que debe usar así:

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

Actualización de Bootstrap 3:

Las clases de impresión ahora están en documentos: 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

Versión Bootstrap 2.3.1:

Después de agregar el archivo bootstrap.css a su HTML,
busque las partes que no desea imprimir y agregue la hidden-printclase a las etiquetas. Porque el archivo css incluye esto:

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

Reemplace cada col-md-concol-xs-

Por ejemplo: reemplazar cada col-md-6a col-xs-6.

Esto es lo que funcionó para mí para librarme de este problema, puedes ver lo que tienes que reemplazar.

Hay una sección de @media printcódigo en el archivo css (Bootstrap 3.3.1 [ACTUALIZACIÓN:] a 3.3.5), esto elimina prácticamente todo el estilo, por lo que obtienes impresiones bastante suaves incluso cuando está funcionando.

Por ahora he tenido que recurrir a despojar a la @media printsección de bootstrap.css - lo que realmente soy , no contento con pero mis usuarios quieren pantalla apropiaciones directas por lo que este tendrá que hacer por ahora. Si alguien sabe cómo suprimirlo sin cambios en los archivos de arranque, estaría muy interesado.

Aquí está el bloque de código 'ofensivo', comienza en la línea # 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 mejor opción que encontré fue 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();
  }
});

En caso de que alguien esté buscando una solución para Bootstrap v2.XX aquí. Estoy dejando la solución que estaba usando.Esto no está completamente probado en todos los navegadores, sin embargo, podría ser un buen comienzo.

1) asegúrese de que el atributo de medios de bootstrap-responsive.css es is screen.

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

2) crear un print.css ay asegúrese de que su atributo de mediosprint

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

3) dentro print.css, agregue el "ancho" de su sitio web en html & body

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

4.) reproducir las clases de consulta de medios necesarias en print.css porque estaban dentro bootstrap-responsive.cssy lo hemos deshabilitado al imprimir.

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

Aquí está la versión completa 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 cosas para tu información -

1. Por ahora, han agregado algunas clases de alternancia. Vea lo que está disponible en la última versión estable: la impresión se alterna en responsive-utilities.less
2. Solución nueva y mejorada en Bootstrap 3.0: están agregando un archivo print.less separado. Ver impresión separada.

Para hacer que la vista de impresión se vea como una tableta o escritorio, incluya bootstrap como .less, no como .css y luego puede sobrescribir las clases receptivas de bootstrap al final del archivo bootstrap_variables, por ejemplo:

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

No se preocupe por poner estas variables al final del archivo. LESS admite la carga diferida de variables para que se apliquen.

Si desea mantener columnas en impresión A4 (que es de alrededor de 540 px), esta es una buena idea

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

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

Puedes usarlo así:

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