文档章节

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

FansUnion
 FansUnion
发布于 2015/05/03 01:31
字数 587
阅读 59
收藏 1

个人官网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 

© 著作权归作者所有

FansUnion
粉丝 60
博文 858
码字总数 825464
作品 0
丰台
高级程序员
私信 提问
Django - 如何集成使用sitetree插件

问题背景: 在使用Metronic作为前端模版的时候, 默认的左侧导航栏的效果如下图所示: Metronic 左侧导航栏 其示例Html文件对于这一个导航栏的实现长达1000多行,此处只截取部分展示: 这段代...

fall4u
2017/12/24
0
0
TerryZ/ComboSelect

本插件已更名为SelectPage 项目地址:https://git.oschina.net/TerryZ/selectpage 多功能下拉选择插件 功能特点 基于jQuery、Bootstrap2开发 输入自动查找 列表结果分页展示 使用键盘快速操作...

TerryZ
2017/06/01
0
0
12款程序员们最爱的Bootstrap模板

如果你还没有开始使用Bootstrap模板,那你可真是有够OUT,这是一个帮助你快速开发的工具,Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一...

gbin1
2014/09/18
179
0
多功能下拉分页选择插件 - ComboSelect

插件已改名为 SelectPage,本项目不再维护! https://www.oschina.net/p/selectpage 多功能下拉选择插件 功能特点 基于jQuery、Bootstrap2开发 输入自动查找 列表结果分页展示 使用键盘快速操...

TerryZ
2017/05/31
0
1
bootstrap修改默认字体,更换为微软雅黑或其他字体的方法

在开发中,使用bootstrap后,中文会一直是默认的宋体,做为一个设计师,是不可忍受的。。。还是微软雅黑的字体更好看些,而且过度到手机、平板电脑等设备上,字体也不会有太大跳跃。所以修改...

iphoenix
2015/12/16
340
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud中Hystrix 线程隔离导致ThreadLocal数据丢失

在Spring Cloud中我们用Hystrix来实现断路器,Zuul中默认是用信号量(Hystrix默认是线程)来进行隔离的,我们可以通过配置使用线程方式隔离。 在使用线程隔离的时候,有个问题是必须要解决的...

xiaomin0322
33分钟前
1
0
使用 Jenkins + Ansible 实现 Spring Boot 自动化部署101

本文首发于:Jenkins 中文社区 本文要点: 设计一条 Spring Boot 最基本的流水线:包括构建、制品上传、部署。 使用 Docker 容器运行构建逻辑。 自动化整个实验环境:包括 Jenkins 的配置,J...

Jenkins中文社区
38分钟前
1
0
springcloud配置中心和消息总线,学习,记录其中的问题

改造配置中心的客户端,接入消息总线 1.增加pom文件的引用 <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20......

夜中孤影
51分钟前
3
0
gzip压缩

tar -zcvf gz包路径 被压缩的路径 tar -zcvf /home/xxx/test.tar.gz hello gz包的路径可以是 完整的也可以相对 , 被压缩的路径 不要全路径 不然压缩包里也会有全路径...

shzwork
57分钟前
3
0
rancher-1

部署rancher 官方快速部署 https://www.cnrancher.com/quick-start/ 部署命令 mkdir /data/rancher -p# 建立存放rancher数据的目录sudo docker run -d --restart=unless-stopped -v /dat......

以谁为师
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部