Bootstrap3简单好用，轻松实现手机适配

               

个人官网http://FansUnion.cn，前端使用Bootstrap框架。大部分的样式，轻松就实现了。

    只是呢，关于导航条，被无数网友吐槽了。
  
    通过手机访问时，导航条把屏幕给完全占居了，正文内容没有施展抱负的机会，很是遗憾。

    在被网友和客户吐槽无数次之后，今天下午，公司同事又吐槽了一次。吐槽归吐槽，很多网友都提醒我改善下，至少有2个懂前端的GG，
GG-pslong和公司同事GG-tuyang都给出了建议。

   说实话，用Bootstrap做手机基本的适配，根本不难，官网上有demo。此外，上半年创业的时候，也做过。GG-pslong，给了个示范，他自己的个人网站：http://80iter.com/。

   就在刚刚，对着上面那个个人网站和Bootstrap的Demo，经过2次调试，终于搞好了。

   ------------
   调试过程中，存在着一个小问题。我这上网是通过路由器访问的，即使查询到本机外网ip，不能直接访问本地的程序，因而不能在手机上直接测试。每次都是，先在本地修改，部署到线上，手机访问查看效果，不达预期，再修改，再然后。

  -----------
   下面是HTML代码，  关键地方有加粗：

<nav class="navbar navbar-default navbar-fixed-top" id="headerNav" role="navigation">

  <div class="navbar-inner">

   <div class="container">

    <div class="navbar-header">

     <button type="button" class="navbar-toggle collapsed"

      data-toggle="collapse" data-target="#navdiv">

      <span class="sr-only">Toggle navigation</span> <span

       class="icon-bar"></span> <span class="icon-bar"></span> <span

       class="icon-bar"></span>

     </button>

    </div>

    <div id="navdiv" class="collapse navbar-collapse" >

     <ul  id="navList" class="nav navbar-nav">

      <li id="indexli"><a href="${base}/" title="首页,首屈一指的服务,始于此页">${siteColumnIndex}</a></li>

      <li id="serviceli"><a href="${base}/service"

       title="三流的产品,二流的技术,一流的服务">${siteColumnService}</a></li>

     </ul>

    </div>

   </div>

  </div>

  </nav>

  解释下：
     上面有个button，在通过电脑访问时，不会显示。通过手机访问时，会显示button，下方的导航条不会直接显示。点击button时，才显示下方的导航条。
 
     有好几个地方都加了“ collapse ” ，必须加。

   另外，要注意，  data-target="#navdiv"，这个地方的#navdiv就是下方导航条的id。一定要一一对应。

   不喜欢自己写CSS的后端程序员GG，可以花1天时间学习Bootstrap3.

  参考资料：http://v3.bootcss.com/components/#navbar            

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow