Yazdırılabilir bir Twitter-Bootstrap sayfası nasıl oluşturulur?

Twitter-Bootstrap kullanıyorum ve sayfayı tarayıcıda göründüğü gibi yazabilmem gerekiyor. Twitter-Bootstrap ile yapılan diğer sayfaları gayet iyi yazdırabilirim, ancak yalnızca Twitter-Bootstrap kullanan sayfamı yazdıramıyorum. Bir yerde bir etiketi eksik mi?

Basıldığında resmi TB sayfası:

Yazdırıldığında sayfam:

Sayfam aslında neye benziyor:

Yazdırmak için bir stil sayfası atadığınızdan emin olun.
Ayrı bir stil sayfası olabilir:

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

veya tüm cihazlar için paylaştığınız bir cihaz:

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

Ardından, yazıcılar için stillerinizi medya sorgularını kullanarak ayrı stil sayfalarına veya paylaşılan stile yazabilirsiniz:

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

Bootstrap 3.2 güncellemesi: (mevcut sürüm)

Mevcut kararlı Bootstrap sürümü 3.2.0'dır .
Sürüm 3.2 görünür baskı kullanımdan kaldırıldığından, şu şekilde kullanmalısınız:

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 güncellemesi:

Baskı sınıfları artık belgelerde: 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 sürümü:

HTML'nize bootstrap.css dosyasını ekledikten sonra,
yazdırmak istemediğiniz parçaları bulun ve hidden-printetiketlere sınıf ekleyin . Css dosyası şunları içerdiğinden:

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

Her değiştirin col-md-ilecol-xs-

örneğin: her col-md-6birini değiştirin col-xs-6.

Bu sorundan kurtulmak için benim için çalışan şey, ne değiştirmen gerektiğini görebiliyorsun.

@media printCss dosyasında bir kod bölümü var (Bootstrap 3.3.1 [UPDATE:] - 3.3.5), bu neredeyse tüm stilleri şeritler, böylece çalışırken bile oldukça yumuşak çıktılar elde edersiniz.

Şimdilik ben dışarı sıyırma için çare zorunda kalmıştım @media printbootstrap.css gelen bölümü - Gerçekten olduğum değil mutlu ama bu şimdilik yapmanız gerekecek yani benim kullanıcıların doğrudan ekran kapmak istiyorum. Birisi bootstrap dosyalarında değişiklik yapmadan nasıl bastırılacağını bilirse çok ilgilenirim.

İşte 192 numaralı satırdan başlayan 'rahatsız edici' kod bloğu:

@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;
  }
}

Bulduğum en iyi seçenek 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();
  }
});

Birisi burada Bootstrap v2.XX için bir çözüm arıyorsa . Kullandığım çözümü terk ediyorum. Bu, tüm tarayıcılarda tam olarak test edilmemiştir, ancak iyi bir başlangıç ​​olabilir.

1) emin medya özelliği yapmak bootstrap-responsive.cssolduğunu screen.

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

2) a oluşturun print.cssve medya özelliğininprint

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

3) içinde print.css, html ve vücutta web sitenizin "genişliğini" ekleyin

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

4.) gerekli medyanın sorgu sınıfları yeniden print.cssiçeriye çünkü bootstrap-responsive.cssve basarken bunu devre dışı bıraktık.

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

İşte tam sürümü 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 şey FYI -

1. Şimdilik birkaç geçiş sınıfı eklediler. En son kararlı sürümde mevcut olanları görün - Duyarlı yardımcı programlardaki yazdırma geçişleri.
2. Bootstrap 3.0'da gelen yeni ve geliştirilmiş çözüm - ayrı bir print.less dosyası ekliyorlar. Ayrı baskıya bakın.

Yazdırma görünümünün tablet veya masaüstü gibi görünmesini sağlamak için bootstrap'i .css olarak değil .less olarak içerir ve daha sonra bootstrap_variables dosyasının sonunda örneğin şu şekilde bootstrap duyarlı sınıfların üzerine yazabilirsiniz:

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

Bu değişkenleri dosyanın sonuna koyma konusunda endişelenmeyin. LESS değişkenlerin tembel yüklenmesini destekler, böylece uygulanırlar.

Sütunları A4 baskıda tutmak istiyorsanız (bu yaklaşık 540 pikseldir) bu iyi bir fikirdir

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

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

Bu şekilde kullanabilirsiniz:

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