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

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

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

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

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

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

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

  -----------
   下面是HTML代码,  关键地方有加粗:



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

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

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

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

转载于:https://www.cnblogs.com/qitian1/p/6463051.html

你可能感兴趣的:(Bootstrap3简单好用,轻松实现手机适配)