亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何創建可打印的Twitter-Bootstrap頁面

如何創建可打印的Twitter-Bootstrap頁面

弒天下 2019-12-09 15:11:36
我正在使用Twitter-Bootstrap,我需要能夠按照瀏覽器上的外觀打印頁面。我可以打印使用Twitter-Bootstrap制作的其他頁面,但是我似乎無法打印僅使用Twitter-Bootstrap的頁面。我在某處缺少標簽嗎?
查看完整描述

3 回答

?
心有法竹

TA貢獻1866條經驗 獲得超5個贊

確保為打印分配了樣式表。

它可以是一個單獨的樣式表:


<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 */

}


查看完整回答
反對 回復 2019-12-09
?
尚方寶劍之說

TA貢獻1788條經驗 獲得超4個贊

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

  }

}

查看完整回答
反對 回復 2019-12-09
  • 3 回答
  • 0 關注
  • 583 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號