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

Bootstrap3简单好用,轻松实现手机适配的更多相关文章

  1. 手淘的flexible.js解决手机适配问题

    如何使用flexible.js做手机适配 做移动端网页肯定需要做适配,以前都用的fixscreen.js,对比一下,觉得flexible.js更好吧,毕竟是大厂出的东西. 第一步要给页面加在viewp ...

  2. css的手机适配

    在html篇里提到设置视口宽度和设备宽度,固定的meta配置就是写死的,==死记硬背== 应该清楚的是手机端的适配应该克服的难题就是宽度根据手机屏幕的大小变化,而高度却没有办法跟随比例变化,也就是宽高 ...

  3. (新手向)基于Bootstrap的简单轮播图的手机实现

    个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...

  4. Android手机适配——UI图片适配

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/50727753 在Android项目当中,drawable文件夹都是用来放置图片资源 ...

  5. 第一次发博,发个简单的Java程序发送手机短信验证

    最近在准备一个项目,想的登录时候用手机验证,就通过上网查阅了一下手机验证的实现方法,原来超级简单,下面将一步一步介绍. 1.去中国网建注册一个账号密码,首次注册送五条免费短信和3条免费彩信.具体的网址 ...

  6. css 手机适配

    手淘H5移动端适配方案flexible源码分析   移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看 ...

  7. 使用简单zzupdate命令轻松升级Ubuntu到较新版本

    zzupdate是一个开源的命令行实用程序,通过将几个更新命令组合到一个命令中,使得将Ubuntu桌面版和服务器版升级到更新版本的任务变得容易一些. 将Ubuntu系统升级到更新的版本并不是一项艰巨的 ...

  8. 简单又强大的联发科手机PhilZ Touch Recovery安装器,详细教程 - 本文出自高州吧

    原文地址:http://bbs.gaozhouba.com/thread-19355-1-1.html * * * * * * * * * * * * * * * * * * * * * * * * ...

  9. 简单的方法来改善手机3G上网速度(2G转3G)

           这里提到的方法是将手机信号不好的地方(也就是2G信号)强制转换为3G信号上网以至于提高上网速度,大家常常看到在某个地方(比方坐地铁)手机明明是3G卡,却显示的是2G信号,这就是手机老在2 ...

随机推荐

  1. C++ 指针与引用 知识点 小结

    [摘要] 指针能够指向变量.数组.字符串.函数.甚至结构体.即指针能够指向不同数据对象.指针问题 包含 常量指针.数组指针.函数指针.this指针.指针传值.指向指针的指针 等. 主要知识点包含:1. ...

  2. Docker---(4)Docker 部署spring web项目

    原文:Docker---(4)Docker 部署spring web项目 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.n ...

  3. C#集合类:动态数组、队列、栈、哈希表、字典

    1.动态数组:ArrayList 主要方法:Add.AddRange.RemoveAt.Remove 2.队列:Queue 主要方法:Enqueue入队列.Dequeue出队列.Peek返回Queue ...

  4. 【Codeforces Round #447 (Div. 2) C】Marco and GCD Sequence

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 把gcd(a[1..n])放在输入的n个数之间. [代码] /* 1.Shoud it use long long ? 2.Have ...

  5. 【 Codeforces Round #430 (Div. 2) A 】 Kirill And The Game

    [链接]点击打开链接 [题意] 水题 [题解] 枚举b从x..y看看k*i是不是在l..r之间就好. [错的次数] 0 [反思] 在这了写反思 [代码] #include <cstdio> ...

  6. 从数据表中随机抽取n条数据有哪几种方法(join实现可以先查数据然后再拼接)

    从数据表中随机抽取n条数据有哪几种方法(join实现可以先查数据然后再拼接) 一.总结 一句话总结:最好的是这个:"SELECT * FROM table WHERE id >= (( ...

  7. Lucene 查询方式

    QueryParser类 QueryParser类对输入字符串的解析 格    式 含    义 “David” 在默认的字段中检索“David”关键字 “content:David” 在“conte ...

  8. VMware Windows安装详细过程(详细图解)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.概论 简介:虚拟机(Virtual Machine)指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算 ...

  9. [D3] Create DOM Elements with D3 v4

    Change is good, but creating from scratch is even better. This lesson shows you how to create DOM el ...

  10. php 获取隔日日期

    php获取日期时间 <?php date_default_timezone_set('PRC'); //默认时区 echo "今天:",date("Y-m-d&qu ...