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中文文档中看到这样一段画：

看应用代码之后的效果图。

嗯，这样的效果更加能够接受一些。

问题三又来了：两个箭头按钮和日期没有在一行上，而空间上明明够显示在一行

仔细检查我的代码并细致分析后，发现我使用的是.col-sm-4来为三个元素分配空间，当我把设置改为.col-xs-4时，一切都好了。

 

关于col-?-?可以在Bootstrap中文文档中找到相关说明：

总结

Bootstrap v3本来就是一个移动为先的框架，可是我在使用的时候却丢弃了它的精髓，当作了一个简单的排版工具和组件皮肤使用。

从使用Bootstrap的一开始就应该考虑手机端的显示效果，使用col-xs-? col-sm-?来为元素分配空间，最简单的情况就是只设置col-xs-?，因为更大的屏幕规则如果没有设置的画会继承小屏幕规格的设置。

还有，不要忘了加上<meta name="viewport" content="width=device-width, initial-scale=1">。

感觉还是学到了不少!