Cách tạo trang Twitter-Bootstrap có thể in

Tôi đang sử dụng Twitter-Bootstrap và tôi cần có thể in trang theo cách hiển thị trên trình duyệt. Tôi có thể in các trang khác được tạo bằng Twitter-Bootstrap rất tốt nhưng dường như tôi không thể in trang của mình sử dụng hoàn toàn Twitter-Bootstrap. Tôi có thiếu một thẻ ở đâu đó không?

Trang TB chính thức khi được in:

Trang của tôi khi được in:

Trang của tôi thực sự trông như thế nào:

Hãy chắc chắn để có một bản định kiểu được chỉ định để in.
Nó có thể là một bản định kiểu riêng biệt:

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

hoặc một bạn chia sẻ cho tất cả các thiết bị:

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

Sau đó, bạn có thể viết kiểu cho máy in trong các bảng định kiểu riêng biệt hoặc trong kiểu được chia sẻ bằng truy vấn phương tiện:

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

Cập nhật Bootstrap 3.2: (bản phát hành hiện tại)

Phiên bản Bootstrap ổn định hiện tại là 3.2.0 .
Với phiên bản 3.2 hiển thị in không dùng nữa, vì vậy bạn nên sử dụng như thế này:

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

Cập nhật Bootstrap 3:

Các lớp in hiện có trong tài liệu: 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

Phiên bản Bootstrap 2.3.1:

Sau khi thêm tệp bootstrap.css vào HTML của bạn,
Tìm các phần bạn không muốn in và thêm hidden-printlớp vào thẻ. Bởi vì tập tin css bao gồm điều này:

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

Thay thế mọi col-md-bằngcol-xs-

ví dụ: thay thế mọi col-md-6đến col-xs-6.

Đây là điều làm việc cho tôi để giúp tôi thoát khỏi vấn đề này, bạn có thể thấy những gì bạn phải thay thế.

Có một phần @media printmã trong tệp css (Bootstrap 3.3.1 [CẬP NHẬT:] đến 3.3.5), dải này hầu như toàn bộ kiểu dáng, do đó bạn có được bản in khá nhạt nhẽo ngay cả khi nó đang hoạt động.

Hiện tại tôi đã phải dùng đến việc loại bỏ @media printphần từ bootstrap.css - điều mà tôi thực sự không hài lòng nhưng người dùng của tôi muốn lấy màn hình trực tiếp nên bây giờ tôi phải làm điều này. Nếu bất cứ ai biết cách triệt tiêu nó mà không thay đổi các tệp bootstrap, tôi sẽ rất thích thú.

Đây là khối mã 'vi phạm', bắt đầu từ dòng # 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;
  }
}

Tùy chọn tốt nhất tôi tìm thấy là http://html2canvas.hertzen.com/
http://jsfiddle.net/nurburf/1235emen/

html2canvas(document.body, {  
  onrendered: function(canvas) {
    $("#page").hide();
    document.body.appendChild(canvas);
    window.print();
    $('canvas').remove();
    $("#page").show();
  }
});

Trong trường hợp ai đó đang tìm kiếm một giải pháp cho Bootstrap v2.XX tại đây. Tôi đang rời khỏi giải pháp tôi đang sử dụng. Điều này không được kiểm tra đầy đủ trên tất cả các trình duyệt tuy nhiên nó có thể là một khởi đầu tốt.

1) đảm bảo thuộc tính media bootstrap-responsive.csslà screen.

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

2) tạo một print.cssvà đảm bảo thuộc tính đa phương tiện của nóprint

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

3) bên trong print.css, thêm "chiều rộng" của trang web của bạn trong html & body

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

4.) sao chép các lớp truy vấn phương tiện cần thiết print.cssvì chúng ở bên trong bootstrap-responsive.cssvà chúng tôi đã vô hiệu hóa nó khi in.

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

Đây là phiên bản đầy đủ của 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 điều FYI -

1. Hiện tại, họ đã thêm một vài lớp chuyển đổi. Xem những gì có sẵn trong bản phát hành ổn định mới nhất - in toggles in responsive-ích.less
2. Giải pháp mới và cải tiến sắp có trong Bootstrap 3.0 - họ đang thêm một tệp print.less riêng biệt. Xem print.less riêng

Để làm cho chế độ xem in trông giống như máy tính bảng hoặc máy tính để bàn, bao gồm bootstrap là .less, không phải là .css và sau đó bạn có thể ghi đè lên các lớp phản hồi bootstrap vào cuối tệp bootstrap_variables như thế này:

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

Đừng lo lắng về việc đặt biến này vào cuối tệp. LESS hỗ trợ lười tải các biến vì vậy chúng sẽ được áp dụng.

Nếu bạn muốn giữ các cột trên bản in A4 (khoảng 540px) thì đây là một ý tưởng hay

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

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

Bạn có thể sử dụng nó như thế này:

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