这两天想要做响应式的页面，于是本着重复造轮子的想法，模仿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. 检查Chunksum与Chunk Data之间的缓冲区发送到DataNode节点

    我们会看到左边"iOS Apps"下面有四个选项:"Certificates"."Identifiers"."Devices&qu ...

  2. WebView cookie 管理

    在Android应用程序中经常会加载一个WebView页,如果需要客户端向WebView传递信息,比如Cookie,也是可以的. 需要应用程序先将Cookie注入进去,打开该网页时,WebView会将 ...

  3. makefile命令基本运用（一）

    一.makefile介绍: 一个工程中的源文件不计其数,其按类型.功能.模块分别放在若干个目录中,makefile定义了一系列的规则来指定,哪些文件需要先编译,哪些文件需要后编译,哪些文件需要重新编译 ...

  4. Popup - 弹出层

    //图片类快捷弹出层 <a href="" target="_blank"> <div class="panlifang1" ...

  5. Spring整合MyBatis

    前言:MyBatis 是支持普通 SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索.MyBatis 使用简单的XML或注解用 ...

  6. android.util.TypedValue.applyDimension

    先看一个例子: int size = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 3, context.getResourc ...

  7. angular文件引入带来的绑定问题

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script ...

  8. JDBC Boilerplate

    public class Student{ private Integer studId; private String name; private String email; private Dat ...

  9. 我的github代码库

    我的github代码库地址:https://github.com/gooree.Enjoy coding,enjoy sharing.

  10. project.VERSION_NAME定义

    android { compileSdkVersion Integer.parseInt(project.ANDROID_BUILD_SDK_VERSION) buildToolsVersion pr ...