印刷可能なTwitter-Bootstrapページを作成する方法

私はTwitter-Bootstrapを使用しており、ブラウザでの表示と同じようにページを印刷できるようにする必要があります。Twitter-Bootstrapで作成された他のページは問題なく印刷できますが、純粋にTwitter-Bootstrapを使用しているページを印刷できないようです。どこかにタグがありませんか？

印刷時の公式TBページ：

印刷時の私のページ：

私のページが実際にどのように見えるか：

印刷用にスタイルシートが割り当てられていることを確認してください。
別のスタイルシートにすることもできます。

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

または、すべてのデバイスで共有する1つ：

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

次に、メディアクエリを使用して、プリンターのスタイルを個別のスタイルシートまたは共有スタイルシートに書き込むことができます。

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

Bootstrap 3.2アップデート：（現在のリリース）

現在の安定したBootstrapバージョンは3.2.0です。
バージョン3.2のvisible-printは非推奨なので、次のように使用する必要があります。

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の更新：

印刷クラスがドキュメントに追加されました：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

ブートストラップ2.3.1バージョン：

HTMLにbootstrap.cssファイルを追加した後
、印刷したくない部分を見つけ、hidden-printタグにクラスを追加します。CSSファイルにはこれが含まれているため：

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

すべてcol-md-をcol-xs-

例：すべてcol-md-6をに置き換えますcol-xs-6。

これは私がこの問題を取り除くために私に働いたものであり、あなたはあなたが取り替えなければならないものを見ることができます。

のセクションがあります @media printcssファイル（Bootstrap 3.3.1 [UPDATE：]から3.3.5）にコードの、これにより実質的にすべてのスタイリングが取り除かれるので、機能しているときでもかなり淡白な印刷結果が得られます。

今のところ@media print、bootstrap.cssからセクションを削除することに頼らなければなりませんでした。これは本当に不満ですが、ユーザーは直接画面を取得したいので、今のところ必要があります。誰かがブートストラップファイルを変更せずにそれを抑制する方法を知っているなら、私は非常に興味があります。

これが「問題のある」コードブロックで、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;
  }
}

私が見つけた最良のオプションは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();
  }
});

誰かがBootstrap v2.XXのソリューションをここで探している場合。使用していたソリューションを離れます。これはすべてのブラウザで完全にテストされているわけではありませんが、良いスタートになるかもしれません。

1）確認のメディア属性が作るbootstrap-responsive.cssですscreen。

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

2）を作成し、print.cssそのメディア属性を確認しますprint

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

3）内部にprint.css、HTMLと本文にウェブサイトの「幅」を追加します

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

4.）必要なメディアクエリクラスを複製します。print.cssこれらは内部にbootstrap-responsive.cssあり、印刷時には無効にしています。

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

ここにフルバージョンがあり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つのことFYI-

1. 今のところ、いくつかのトグルクラスが追加されています。最新の安定版リリースで利用可能な機能を確認する-responsive-utilities.lessの印刷トグル
2. Bootstrap 3.0で新しく改善されたソリューション-別のprint.lessファイルを追加しています。個別のprint.lessを参照してください

印刷ビューをタブレットまたはデスクトップのように見せるには、ブートストラップを.cssではなく.lessとして含めます。次に、たとえば次のように、bootstrap_variablesファイルの最後にあるブートストラップ応答クラスを上書きできます。

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

この変数をファイルの最後に置くことを心配しないでください。LESSは変数の遅延読み込みをサポートしているため、変数が適用されます。

A4プリント（約540px）に列を保持したい場合、これは良いアイデアです。

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

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

次のように使用できます。

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