Day 10 : Bootstrap 列印

Bootstrap在工作當中算是很常使用

維基百科上的介紹 : Bootstrap是一組用於網站和網路應用程式開發的開源前端框架，包括HTML、CSS及JavaScript的框架，提供字體排印、表單、按鈕、導航及其他各種元件及Javascript擴充套件，旨在使動態網頁和Web應用的開發更加容易。

從3.0版本開始，Bootstrap將行動裝置優先作為設計方針。

再來是客戶的列印需求:

1. 在頁面按下鍵盤 ctrl + p 列印
2. 在頁面做個按鈕按下去彈出按下ctrl + p 的列印畫面

知道css有這麼一個東西 , 可以設定列印時的樣式

@media print {
}

*列印會用手機寬度的css

首先按下ctrl + p ，畫面使用了手機寬度的css...
原本想說既然這樣那就把桌機版的css複製貼到@media print 裡面，於是...頁面重新整理之後按下ctrl + p 一點動靜也沒有...

打開google 搜尋print css , 大部分的說明都在 @media print 或是 media = "screen" 這類的，還是不解為何它非得用手機的css。
思來想去，看了一陣子，恩...一定是bootstrap的關係，在google 搜尋了 bootstrap print mobile 終於在stackoverflow有了有效的解法 附上連結

//按自己的情況設定
@media print {
  @page {
    size: 330mm 427mm; 
    margin: 14mm;
  }
  .container {
    width: 1170px;
  }
}

*a標籤的連結網址都會被顯示出來

<a href="https://www.google.com">google</a>

新增一個html 放上面這個a標籤連結試試 , 會有下面兩種結果

沒有bootstrap css的ctrl+p列印 引入bootstrap css的ctrl+p列印

解決方法是在@media print另外為a[href] content 給個 " "

@media print {
  a[href]:after {
    content: "";
  }
}

大概就是這麼一回事