印刷用CSSを使用する

CSSのメディアクエリを使う場合

@media print{
    /* 印刷時に適用させたいスタイルを定義する */
}

参考

• レスポンシブの基本、メディアクエリの書き方

別CSSをインポートして使う場合

@import url("print.css") print; /* インポートで指定して、印刷時のみ適用されるようにする */

参考

• CSSの@importを使って別のCSSファイルを読み込む方法を徹底解説!!

HTMLのlinkタグに指定する場合

<!-- media属性に指定して、印刷時のみ読み込まれるようにする -->
<link rel="stylesheet" type="text/css" media="print" href="sample.css">

参考

• HTMLのlinkタグとは？基本的な書き方とrel属性まとめ

bootstrapの場合

• bootstrap.cssには以下のスタイルが定義されている
  • ver: 3.2.0の場合

@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !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^="javascript:"]:after,
  a[href^="#"]: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;
  }
  @page  {
    margin: 2cm .5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  select {
    background: #fff !important;
  }
  .navbar {
    display: none;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}

• 例えば、navbarをHTML側のclass要素に指定してる場合、印刷時に**display: none;**が適用される

参考

• CSS · Bootstrap