<!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. 修改NGUI 3.11 的控件 inputfileld hide input 属性bug

    1.勾选hideinput属性后,输入中文,会出现,无法显示的问题. 2.勾选hideinput属性后,密码框会出现第一个字母被吃掉的问题 解决方案:控件都不要勾选hideinput属性,代码做如下修 ...

  2. 48.javascript基础学习

    javascript基础学习:   http://www.w3school.com.cn/jsref/index.asp jS的引入方式: 1.行间事件:为某一个具体的元素标签赋予js内容,oncli ...

  3. annotation @Retention@Target

    一.注解:深入理解JAVA注解 要深入学习注解,我们就必须能定义自己的注解,并使用注解,在定义自己的注解之前,我们就必须要了解Java为我们提供的元注解和相关定义注解的语法. 1.元注解(meta-a ...

  4. hdoj3336（kmp算法next数组的应用）

    题目链接:https://vjudge.net/problem/HDU-3336 题意:给定长为n(<=2e5)的字符串s,求s的每个前缀在s中出现的次数之和. 思路: 用dp[i]表示以s[i ...

  5. [转帖]ASP.NET Core 中间件（Middleware）详解

    ASP.NET Core 中间件(Middleware)详解   本文为官方文档译文,官方文档现已非机器翻译 https://docs.microsoft.com/zh-cn/aspnet/core/ ...

  6. Hystrix（下），使用公共降级类

    使用Hystrix熔断(下) 在一个分布式系统里,一个服务依赖多个服务,可能存在某个服务调用失败,         比如超时.异常等,如何能够保证在一个依赖出问题的情况下,不会导致整体服务失败,   ...

  7. 【C#】课堂知识点#1

    标准数字格式字符串 https://docs.microsoft.com/zh-cn/dotnet/standard/base-types/standard-numeric-format-string ...

  8. 一个农民工自学java找到工作的励志故事

    <!-----------------------------------------------------------------------------摘自网络-------------- ...

  9. Abandoning Roads CodeForces - 1149D (最小生成树)

    大意: 给定无向图, 边权只有两种, 对于每个点$x$, 输出所有最小生成树中, 点$1$到$x$的最短距离. 先将边权为$a$的边合并, 考虑添加边权为$b$的边. 每条路径只能经过每个连通块一次, ...

  10. BZOJ4516 SDOI2016生成魔咒（后缀自动机）

    本质不同子串数量等于所有点的len-parent树上父亲的len的和.可以直接维护. #include<iostream> #include<cstdio> #include& ...