<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

    <title>title</title>

    <!-- Bootstrap核心样式 -->

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

    <style>

        .load{

            position: absolute;

            left: 50%;

            top: 28px;

            transform: translateX(-50%) translateY(-50%);

        }

        .load a{

            text-decoration: none;

            color: #999;

            margin: 0 15px;

        }

    </style>

</head>

<body>

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

    <div class="container">

        <!-- 导航头部 -->

        <div class="navbar-header ">

            <a href="#" class="navbar-brand">

            </a>

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

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

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

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

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

            </button>

        </div>

        <!-- 导航链接 -->

        <div class="collapse navbar-collapse">

            <!-- 默认的导航 -->

            <ul class="nav navbar-nav">

                <li class="hidden-xs"><a href="#">岗位课1</a></li>

                <li class="hidden-sm hidden-xs"><a href="#">岗位课2</a></li>

                <li class="hidden-sm hidden-xs"><a href="#">岗位课3</a></li>

                <li class="hidden-md hidden-sm hidden-xs"><a href="#">岗位课4</a></li>

                <li class="hidden-md hidden-sm hidden-xs"><a href="#">岗位课5</a></li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle='dropdown'>

                        岗位课6

                        <span class="caret"></span>

                    </a>

                    <ul class="dropdown-menu">

                        <li><a href="#">About us</a></li>

                        <li class="hidden-lg hidden-md hidden-sm"><a href="#">岗位课1</a></li>

                        <li class="hidden-lg hidden-md"><a href="#">岗位课2</a></li>

                        <li class="hidden-lg hidden-md"><a href="#">岗位课3</a></li>

                        <li class="hidden-lg"><a href="#">岗位课4</a></li>

                        <li class="hidden-lg"><a href="#">岗位课5</a></li>

                    </ul>

                </li>

            </ul>

            <form class="navbar-form navbar-left hidden-xs">

                <div class="form-group">

                    <input type="text" class="form-control" placeholder="Search">

                </div>

                <button class="btn btn-danger">搜索</button>

            </form>

        </div>

        <div class="load">

            <a href="#" class="hidden-lg hidden-md hidden-sm">登录</a>

            <a href="#" class="hidden-lg hidden-md hidden-sm">注册</a>

        </div>

    </div>

</nav>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

　　

页面Header自适应屏幕的更多相关文章

  1. 移动页面HTML5自适应手机屏幕宽度

    标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...

  2. 通过rem自适应屏幕尺寸

    通过rem自适应屏幕尺寸 常用的前端单位 px px就是pixel的缩写,设备分辨率,物理像素 pt pt就是point的缩写,逻辑分辨率,逻辑像素 em 参考物是父元素的font-size,具有继承 ...

  3. Div 自适应屏幕大小

    http://blog.csdn.net/wodetiankong516/article/details/7827256 Background      有时, 我们需要将div或者其他的Elemen ...

  4. Android 中Webview 自适应屏幕

    随笔 - 478  文章 - 3  评论 - 113 Android 中Webview 自适应屏幕   webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomCon ...

  5. [转载]Android中WebView自适应屏幕

    webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomControls(false); //隐藏webview缩放按钮 让Webview加载的页面居中显示有我知道的 ...

  6. 最简单的css实现页面宽度自适应

    <div class="rxs"> <div class="rxleft"> 第一段内容,可以是任何html标签 </div> ...

  7. css布局-内容自适应屏幕

    css页面布局,实现内容部分自适应屏幕,当内容高度小于浏览器窗口高度时,页脚在浏览器窗口底部:当内容高度高于浏览器窗口高度时,页脚自动被撑到页面底部. <style type="tex ...

  8. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

  9. 怎么可以让div自适应屏幕的高度？（已解决）

    主要解决问题的方法是用JS脚本. 先看布局, 一个div是首部,另一个div是主体,主体包含左侧菜单和右侧内容. 我想把主体div的高度自适应屏幕剩余区域,怎么做? 首先,获取可见区域的高度,docu ...

随机推荐

  1. 925. Long Pressed Name

    题目链接:https://leetcode.com/problems/long-pressed-name/description/ Example 1: Input: name = "ale ...

  2. iOS笔试题04

    1. Object-C有多继承吗?没有的话用什么代替?
 1> OC是单继承,没有多继承 2> 有时可以用分类category和协议protocol来代替多继承 2. Object-C有私 ...

  3. OS选择题练习

    一.死锁 1.设系统中有n个进程并发,共同竞争资源X,且每个进程都需要m个X资源,为使该系统不会发生死锁,资源X的数量至少为() A.n*m+1 B.n*m+n C.n*m+1-n   D.无法预计 ...

  4. Selenium问题集锦

    此文章用于记录使用Selenium遇见的问题~ 问题1:sendkeys直接报错如下: 解决方案:selenium 驱动和Chrome浏览器的版本必须对应,不然会报此错.驱动地址:点此跳转 下载前先看 ...

  5. Jmeter 跨线程组传递参数 之两种方法（转）

    终于搞定了Jmeter跨线程组之间传递参数,这样就不用每次发送请求B之前,都需要同时发送一下登录接口(因为同一个线程组下的请求是同时发送的),只需要发送一次登录请求,请求B直接用登录请求的参数即可,直 ...

  6. java的简单工厂模式

    目录 代码讲解 UML图解简单工厂 优点 缺点: 改进: 代码讲解 产品功能接口: /** * 定义接口,抽象出产品都具有的功能 */ interface Produce { void method( ...

  7. P3205 [HNOI2010]合唱队

    题目点这里 题面: 为了在即将到来的晚会上有更好的演出效果,作为AAA合唱队负责人的小A需要将合唱队的人根据他们的身高排出一个队形.假定合唱队一共N个人,第i个人的身高为Hi米(1000<=Hi ...

  8. zookeeper-伪分布式搭建

    1. 下载解压 2. 在conf目录下,新建3个文件(3台服务器):zoo1.cfg.zoo2.cfg.zoo3.cfg zoo1.cfg: tickTime=2000dataDir=/tmp/zoo ...

  9. vi 使用系统剪贴板（clipboard）

    ref : https://www.jianshu.com/p/771b95e34293 http://www.bubuko.com/infodetail-469867.html 在vi中,如果编译时 ...

  10. ActiveMQ Queue示例

    一.Queue 发送 public class JmsSend { public static void main(String[] args) throws JMSException { Conne ...