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

Question

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

印刷時の公式 TB ページ:

印刷時のマイページ：

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

Answer 1

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

ブートストラップ 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; }
}

Answer 2

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

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

または、すべてのデバイスで共有するもの:

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

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

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

Answer 3

col-md-すべてを次のように置き換えますcol-xs-

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

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

Answer 4

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

Answer 5

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 と本文に Web サイトの「幅」を追加します。

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}

Answer 6

参考までに2つのこと-

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

Answer 7

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

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

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