Bootstrap3简单好用,轻松实现手机适配
2015-05-03 00:00
10 查看
个人官网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
只是呢,关于导航条,被无数网友吐槽了。
通过手机访问时,导航条把屏幕给完全占居了,正文内容没有施展抱负的机会,很是遗憾。
在被网友和客户吐槽无数次之后,今天下午,公司同事又吐槽了一次。吐槽归吐槽,很多网友都提醒我改善下,至少有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
相关文章推荐
- Bootstrap3简单好用,轻松实现手机适配
- Bootstrap3简单好用,轻松实现手机适配
- Bootstrap3简单好用,轻松实现手机适配
- (新手向)基于Bootstrap的简单轮播图的手机实现
- miniSipServer简单而不简单,轻松落地,实现电脑对固话、手机通讯
- 简单三步轻松实现ORACLE字段自增
- 基于Node.js+express+MySQL+Bootstrap实现的简单登录注册
- Bootstrap 轻松实现选项卡
- node和bootstrap-table实现最简单的服务端分页
- 实现简单的类bootstrap栅格系统
- require.js+bootstrap实现简单的页面登录和页面跳转
- Android把手机作为FTP服务器,在PC端管理手机文件的简单实现
- Android把手机作为FTP服务器,在PC端管理手机文件的简单实现
- 【源码分享】mui实现简单的手机音乐播放器
- C#简单实现发送手机短信
- C#简单实现发送手机短信
- bootstrap实现的自适应页面简单应用示例
- Android手机摇一摇功能的简单实现
- Bootstrap + AngularJS 实现简单的数据过滤----字符查找
- 使用cuzysdk 手机淘客轻松实现9.9元包邮模块