Bootstrap初級用戶談談網頁在手機上的顯示效果優化

本文轉載自查看原文 2016-11-25 13:56 1505 css/ Bootstrap/ bootStrap

本人之前已經使用 Bootstrap有一段時間了，但是之前做出的網站都只是在電腦端使用，沒有注意過手機端的顯示效果。這兩天自己使用 Bootstrap做了一個簡單的Web個人日志系統，想在手機端也使用，桌面端的效果勉勉強強，但是當用手機打開頁面時，效果不忍直視。下面是其中一個界面的效果。

桌面瀏覽器查看效果：

手機瀏覽器查看效果：

問題一：字體非常的小，簡直認不出來

於是我百度以及查看 Bootstrap的文檔，終於找到了解決方案：

<meta name="viewport" content="width=device-width, initial-scale=1">

可以參見 Bootstrap中文文檔中的原話：

只要在 <header>中加上這句話，手機端看到的字體就會比較合理。看下面的效果圖。

現在看起來效果好多了，文字能夠非常清晰的顯示出來。

問題二來了：上面的`<ul>`導航占了太多的空間，影響了核心內容的顯示

我的導航是用以下代碼實現的：

<div>
  <ul class="list-group text-align-center">
    <li class="list-group-item"><h3>效率為王</h3></li>
    <li class="list-group-item"><a href="timeflow">流水</a></li>
    <li class="list-group-item"><a href="summary">總結</a></li>
    <li class="list-group-item"><a href="idea">靈感</a></li>
    <li class="list-group-item"><a href="thought">感想</a></li>
  </ul>
</div>

我想讓”流水””總結”等4個導航鏈接排列在一行中，但又不想自己大改 Bootstrap原來的 CSS (實際上自己也不是很熟練 CSS)。於是我就想繞開 CSS的細節技術，想到了在超小屏幕下不顯示這個導航，轉而實現一個簡單的超鏈接列表。

<div class="hidden-xs">
  <ul class="list-group text-align-center">
    <li class="list-group-item"><h3>效率為王</h3></li>
    <li class="list-group-item"><a href="timeflow">流水</a></li>
    <li class="list-group-item"><a href="summary">總結</a></li>
    <li class="list-group-item"><a href="idea">靈感</a></li>
    <li class="list-group-item"><a href="thought">感想</a></li>
  </ul>
</div>
<div class="hidden-sm hidden-md hidden-lg hidden-print">
  <h3>效率為王</h3>
  <a href="timeflow">流水</a>
  <a href="summary">總結</a>
  <a href="idea">靈感</a>
  <a href="thought">感想</a>
  <hr/>
</div>

上面的代碼是在原來的 <div>上應用了 .hidden-xs樣式，意思是超小屏幕下不顯示該 <div>。然后我又寫了一個簡單的 <div>，包含4個導航鏈接，而這個 <div>則應用了 .hidden-sm .hidden-md .hidden-lg .hidden-print樣式，表示只在超小屏幕下顯示。

關於 .hidden-?樣式，可以在 Bootstrap中文文檔中看到這樣一段畫：