Como criar uma página imprimível do Twitter-Bootstrap

Estou usando o Twitter-Bootstrap e preciso imprimir a página da maneira que parece no navegador. Consigo imprimir muito bem outras páginas feitas com o Twitter-Bootstrap, mas não consigo imprimir minha página que usa apenas o Twitter-Bootstrap. Estou faltando uma etiqueta em algum lugar?

Página oficial da TB quando impressa:

Minha página quando impressa:

Qual é a aparência da minha página:

Certifique-se de ter uma folha de estilo atribuída para impressão.
Pode ser uma folha de estilo separada:

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

ou um que você compartilha para todos os dispositivos:

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

Em seguida, você pode escrever seus estilos para impressoras nas folhas de estilo separadas ou na compartilhada usando consultas de mídia:

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

Atualização do Bootstrap 3.2: (versão atual)

A versão estável atual do Bootstrap é 3.2.0 .
Com a versão 3.2 de impressão visível obsoleta, você deve usar o seguinte:

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

Atualização do Bootstrap 3:

As aulas de impressão estão agora em 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

Versão do Bootstrap 2.3.1:

Depois de adicionar o arquivo bootstrap.css ao seu HTML,
encontre as partes que você não deseja imprimir e adicione a hidden-printclasse às tags. Como o arquivo css inclui isso:

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

Substitua todos col-md-porcol-xs-

por exemplo: substituir cada col-md-6para col-xs-6.

Foi o que funcionou para me livrar desse problema. Você pode ver o que precisa substituir.

Há uma seção de @media printcódigo no arquivo css (Bootstrap 3.3.1 [UPDATE:] a 3.3.5), que retira praticamente todo o estilo, para que você obtenha impressões razoáveis, mesmo quando está funcionando.

Por enquanto, tive que recorrer à remoção da @media printseção bootstrap.css - da qual realmente não estou feliz, mas meus usuários querem capturas diretas de tela, então isso terá que ser feito por enquanto. Se alguém souber como suprimi-lo sem alterações nos arquivos de inicialização, eu ficaria muito interessado.

Aqui está o bloco de código 'ofensivo', que começa na linha 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;
  }
}

A melhor opção que encontrei foi 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();
  }
});

Caso alguém esteja procurando uma solução para o Bootstrap v2.XX aqui. Estou deixando a solução que estava usando. Isso não foi totalmente testado em todos os navegadores, mas pode ser um bom começo.

1) verifique se o atributo media de bootstrap-responsive.cssé screen.

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

2) crie um print.csse verifique se o atributo mediaprint

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

3) por dentro print.css, adicione a "largura" do seu site em html e corpo

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

4.) reproduzir as classes de consulta de mídia necessárias print.cssporque estavam dentro bootstrap-responsive.csse nós a desativamos ao 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}

Aqui está a versão completa do 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 coisas FYI -

1. Por enquanto, eles adicionaram algumas classes de alternância. Veja o que está disponível na versão estável mais recente - a impressão alterna em responsive-utilities.less
2. Solução nova e aprimorada disponível no Bootstrap 3.0 - eles estão adicionando um arquivo print.less separado. Consulte print.less separado

Para fazer com que a visualização de impressão pareça um tablet ou uma área de trabalho, inclua a inicialização como .less, não como .css e, em seguida, você pode sobrescrever as classes responsivas da inicialização no final do arquivo bootstrap_variables, por exemplo:

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

Não se preocupe em colocar essas variáveis ​​no final do arquivo. O LESS suporta carregamento lento de variáveis ​​para que elas sejam aplicadas.

Se você deseja manter as colunas impressas em A4 (com cerca de 540px), é uma boa ideia

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

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

Você pode usá-lo assim:

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