navbar升级 从Bootstrap 2到Bootstrap 3

1. .navbar-inner已从Bootstrap 3中去除。

2. <ul class="nav"> 应变为 <ul class="nav navbar-nav">。

参考资料

CSS display:table属性用法解析 http://developer.51cto.com/art/201009/226678.htm

Twitter Bootstrap 3 - Navbar not horizontal http://stackoverflow.com/questions/18191177/twitter-bootstrap-3-navbar-not-horizontal

Bootstrap navbar http://getbootstrap.com/components/#navbar


viewport

手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

 <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放

参考资料

HTML meta viewport属性说明 http://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.html

移动前端开发之viewport的深入理解 http://www.cnblogs.com/2050/p/3877280.html

理解viewport与device-width http://www.xiaocaoge.com/understanding-viewport-and-device-width.html?utm_source=tuicool

Twitter Bootstrap: Responsive CSS does not work on mobile devices(解决Bootstrap移动端无法响应问题) http://julienrenaux.fr/2013/03/01/twitter-bootstrap-responsive-does-not-work-on-mobile-devices/

HTML5+Bootstrap 学习笔记 2的更多相关文章

  1. HTML5+Bootstrap 学习笔记 4

    HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的 ...

  2. HTML5+Bootstrap 学习笔记 3

    HTML5 aria-* and role aria是指Accessible Rich Internet Application.role的作用是描述一个非标准的tag的实际作用,而aria-*的作用 ...

  3. HTML5+Bootstrap 学习笔记 1

    HTML <header> 标签 <header> 标签定义文档的页眉(介绍信息),是 HTML 5 中的新标签. 参考资料: HTML <header> 标签 h ...

  4. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  5. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  6. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  7. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  8. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  9. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

随机推荐

  1. Linux 下让终端走代理的方法

    转载: https://blog.fazero.me/2015/09/15/%E8%AE%A9%E7%BB%88%E7%AB%AF%E8%B5%B0%E4%BB%A3%E7%90%86%E7%9A%8 ...

  2. 03_Docker入门(上)之容器创建、容器使用、容器删除

    运维架构服务docker:docker入门 一.确保docker就绪 查看docker程序是否存在,功能是否正常 Docker可执行程序的info命令,该命令会返回所有容器和镜像的数量.Docker使 ...

  3. jdk 下载地址 服务器

    https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

  4. Oracle 数据库数据结构(包括存储过程,函数,表,触发器等)版本控制器

    原理: 写系统触发器,在修改数据库结构的时候,把DDL写入表中 create sequence A_Ver_Control_seq minvalue nomaxvalue start incremen ...

  5. iOS 隐私政策

    我们深知个人信息对您的重要性,您的信任对我们非常重要.本应用尊重并保护所有使用服务用户的个人隐私权.您在使用我们的产品与/或服务时,我们可能会收集和使用您的相关信息.我们将按法律法规要求,采取相应安全 ...

  6. MySQL更新丢失

    MySQL多主结构(比如: MGR Multi Master模式),如果多主都可以写的话,很有可能出现更新丢失的情况. 定义:  T1时间,T2时间,T3时间 定义:  事务A, 事务B Node1节 ...

  7. Ubuntu 16 Java Develop环境快速搭建

    安装JDK 1. 更新apt-get: $ sudo apt-get update 2. 安装jdk: $ sudo apt-get install openjdk-8-jdk 部分eclipse现只 ...

  8. JS变量、作用域、内存

    写到这个题目<JS变量.作用域,内存>,我就不由自主想起了黄金三嫖客.可能是名字有点像,嗯,一定是这样子的! JS接触下来,应该是要比Java简单不少的,所以,要学好啊.立个flag半年后 ...

  9. PHP设置Redis key在当天有效|SCP对拷如何连接指定端口(非22端口)的远程主机

    $redis->set($key,$value); $expireTime = mktime(23, 59, 59, date("m"), date("d" ...

  10. ios中input输入无效

    项目中一个登陆界面的input在安卓下可以输入,iOS下无法输入,经查询为 设置了-webkit-user-select:none;将其改为-webkit-user-select:auto;修正. 参 ...