这两天想要做响应式的页面，于是本着重复造轮子的想法，模仿Bootstrap官网，精简了一个响应式导航的Demo。

效果

代码

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

    <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="http://static.bootcss.com/www/assets/css/site.min.css?v5" rel="stylesheet">

    <style type="text/css">

        .navbar-nav {

            float: right;

        }

    </style>

</head>

<body>

<div class="navbar navbar-inverse navbar-fixed-top">

      <div class="container">

        <div class="navbar-header">

          <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

          </button>

          <a class="navbar-brand hidden-sm" href="http://www.bootcss.com">Bootstrap中文网</a>

        </div>

        <div class="navbar-collapse collapse" role="navigation" aria-expanded="false" style="height: 1px;">

          <ul class="nav navbar-nav">

            <li class="hidden-sm hidden-md"><a href="http://v2.bootcss.com/" target="_blank">Bootstrap2中文文档</a></li>

            <li><a href="http://v3.bootcss.com/" target="_blank">Bootstrap3中文文档</a></li>

            <li><a href="http://v4.bootcss.com/" target="_blank">Bootstrap 4.0 预览</a></li>

          </ul>

        </div>

      </div>

    </div>

    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>

</html>

Java程序员的日常 —— 响应式导航Demo的更多相关文章

  1. Java程序员的日常——经验贴（纯干货）

    工作当中遇到的事情比较杂,因此涉及的知识点也很多.这里暂且记录一下,今天遇到的知识点,纯干货~ 关于文件的解压和压缩 如果你的系统不支持tar -z命令 如果是古老的Unix系统,可能并不认识tar ...

  2. Java程序员的日常—— 《编程思想》关于类的使用常识

    Java虽然利用JVM,让程序员可以放心大胆的使用,可是仍然会出现内存泄露等问题.世上没有绝对的银弹,因此也不能完全把所有的任务都交给JVM,了解Java中的初始化与垃圾回收还是必不可少的知识. 关于 ...

  3. Java程序员的日常—— Properties文件的读写

    在日常的Java程序开发中,Properties文件的读写是很常用的.经常有开发系统通过properties文件来当做配置文件,方便用户对系统参数进行调整. 那么本片就来简单的介绍下,如何使用Prop ...

  4. Java程序员的日常—— 垃圾回收中引用类型的作用

    在Java里面,是不需要太过于关乎垃圾回收,但是这并不意味着开发者可以不了解垃圾回收的机制,况且在java中内存泄露也是家常便饭的事情.因此了解垃圾回收的相关知识就显得很重要了. 引用,在垃圾回收中是 ...

  5. Java程序员的日常 —— 多进程开发

    最近再弄进程管理相关的工作,因此必要的就涉及到各种系统下关于进程的管理. 这里简单的介绍下: 如何在Java中执行命令 在windows下肯定是dos命令了,而在linux则为shell命令.执行的方 ...

  6. Java程序员的日常——存储过程知识普及

    存储过程是保存可以接受或返回用户提供参数的SQL语句集合.在日常的使用中,经常会遇到复杂的业务逻辑和对数据库的操作,使用存储过程可以进行封装.可以在数据库中定义子程序,然后把子程序存储在数据库服务器, ...

  7. Java程序员的日常 —— 《编程思想》持有对象

    集合框架可以说是Java里面必备的知识点了,日常的使用中也会遇到各种情况需要使用到集合.下面就简单介绍下各种集合的使用场景: List List可以看做是数组,实现的方式有两种: ArrayList ...

  8. Java程序员的日常 —— 工作一天的收获

    看题目可能是扯皮,其实还是有很多专业知识的.从最开始没有注意到设计原则,到后面的jquery实战技巧,都是今天一天碰到的问题. 每天整理一点点,每天收获一点点. 关于软件设计 在设计系统结构的时候,一 ...

  9. Java程序员的日常—— Arrays工具类的使用

    这个类在日常的开发中,还是非常常用的.今天就总结一下Arrays工具类的常用方法.最常用的就是asList,sort,toStream,equals,copyOf了.另外可以深入学习下Arrays的排 ...

随机推荐

  1. 关于.NET大数据量大并发量的数据连接池管理

    转自:http://www.cnblogs.com/virusswb/archive/2010/01/08/1642055.html 我以前对.NET连接池的认识是错误的,原来以为在web.confi ...

  2. Ubuntu MYSQL和Windows MYSQL （非C盘安装）

    1.Ubuntu 默认安装 Mysql 5.6版本以上: 1.查看系统是否安装mysql 数据库: sudo netstat -tap | grep mysql 如果安装了,就查看一下版本命令: my ...

  3. IntegerCache类

    先看代码实例现象: 问题:为什么都是比较数值,第一个为true,第二个确为false呢? 查找源码(java.lang.Integer),看到如下代码: /** * Cache to support ...

  4. iOS基础之网络请求相关

    1.AFNetwork二次封装方法一: #import <Foundation/Foundation.h> @interface BeeNetworkManager : NSObject ...

  5. openoffice

    cmdcd/cd C:\Program Files (x86)\OpenOffice 4\program soffice -headless -accept="socket,host=127 ...

  6. iOS原生地图开发指南续——大头针与自定义标注

    iOS原生地图开发指南续——大头针与自定义标注 出自:http://www.sxt.cn/info-6042-u-7372.html 在上一篇博客中http://my.oschina.net/u/23 ...

  7. 原生JavaScript实现滚动条

    没事找事,明明overflow:scroll|auto就可以,只是难看点(实际上css也能设置).只当练习写拖拽.监听事件.位置检测了. 原理是对滑动条块进行监听,按下鼠标按键后,监听鼠标移动,然后根 ...

  8. [spark案例学习] 单词计数

    数据准备 数据下载:<莎士比亚全集> 我们先来看看原始数据:首先将数据加载到RDD,然后显示数据框的前15行. shakespeareDF = sqlContext.read.text(f ...

  9. [UCSD白板题] Binary Search

    Problem Introduction In this problem, you will implemented the binary search algorithm that allows s ...

  10. MSSQL数据库中Text类型字段在PHP中被截断之解 (转)

    在PHP中使用了MSSQL数据库,恰巧数据库中又使用了Text类型字段,于是问题产生了.每次从数据库中查询得到的数据总是被莫名的截断,一开始是以为我使用的PHP框架中对字符串的长度有所限制,后来发现这 ...