这两天想要做响应式的页面，于是本着重复造轮子的想法，模仿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. 深入理解HTTP协议

  2. Java面试题整理

    1 Switch能否用string做参数? a.在 Java 7  之前, switch 只能支持byte,short,char,int 或者其对应的封装类以及 Enum 类型.在JAVA 7中,St ...

  3. Spring 笔记

    依赖注入(Dependency Injection DI) 通过依赖注入,对象的依赖关系将由系统中负责协调对象的第三方组件在创建对象的时候进行设定.(p6 spring之旅) 在创建类的时候需要依赖的 ...

  4. juery与表单中name="nodeName"引起的冲突

    引入jquery时,表单中如果有name="nodeName"的表单项,会有一些奇怪的冲突. 表单HTML代码如下: <form id="formAddEquipN ...

  5. Centos 6.X基本维护操作

    设置163源,全新最小化安装时,更改源需先yum install wget mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-B ...

  6. ASP.NET Core 1.0 入门——了解一个空项目

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  7. Mini projects #5 ---- Memory

    课程全名:An Introduction to Interactive Programming in Python,来自 Rice University 授课教授:Joe Warren, Scott ...

  8. 【DP】组合数字

    Password Attacker 题意就是给 M 个关键字,组合成 N 字符长度的结果,每一个关键字都必须在 N 位的字符中出现,有多少种可能结果. 范围 1 ≤ M ≤ N ≤ 100. 举例假设 ...

  9. xUtils 中的BitmapUtils 全面注释

    /** * 加载图片工具类 * @author afu * */ public class BitmapUtils implements TaskHandler { /** * 判断任务是否暂停 */ ...

  10. CardView

    CardView继承至FrameLayout类,可以在一个卡片布局中一致性的显示内容,卡片可以包含圆角和阴影.CardView是一个Layout,可以布局其他View. CardView常用属性: c ...