<!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. 第十七章 OAuth2集成——《跟我学Shiro》

    目录贴:跟我学Shiro目录贴 目前很多开放平台如新浪微博开放平台都在使用提供开放API接口供开发者使用,随之带来了第三方应用要到开放平台进行授权的问题,OAuth就是干这个的,OAuth2是OAut ...

  2. iOS推送证书上传（转)

    iOS 推送证书制作(JAVA/PHP) 在使用Java或者PHP制作iOS推送服务器的时候,需要自己从开发者网站上导出的aps_developer_identity证书和Apple Developm ...

  3. maven生命周期及每个阶段自动关联的插件

    生命周期Lifecycle http://maven.apache.org/ref/3.6.1/maven-core/lifecycles.html#default_Lifecycle clean 包 ...

  4. Laravel增加CORS中间件完成跨域请求

    原文地址: 跨域的请求 出于安全性的原因,浏览器会限制 Script 中的跨域请求.由于 XMLHttpRequest 遵循同源策略,所有使用 XMLHttpRequest 构造 HTTP 请求的应用 ...

  5. vue告警信息：{ parser: "babylon" } is deprecated.

    告警信息: 13% building modules 28/40 modules 12 active ...dex=0!\src\App.vue{ parser: "babylon" ...

  6. 记：联调安卓设备的神药-无需usb数据线即可直连

    前言 最近需要调试公司的安卓服务,正常情况下,我们调试都是减安卓设备通过usb连接在我们座位旁,再不济就是我们扛笔记本到硬件旁边,这样调试屡试不爽,但是有一天你突然发现你带的数据线因为各种原因总是终端 ...

  7. 结合 Nginx 谈谈 Http 状态码

    [Http状态码简介] [百度百科]HTTP状态码(英语:HTTP Status Code)是用以表示网页服务器超文本传输协议响应状态的3位数字代码.它由 RFC 2616 规范定义的,并得到 RFC ...

  8. SQL Server直接执行.sql文件

    SQL Server直接执行.sql文件    客户的数据库数据被篡改,利用Log Explorer工具根据日志生成的回滚脚本有200多M,不可能一下子扔到查询分析器里去执行,于是想是否SQL Ser ...

  9. Win10 彻底关闭 Windows Defender

    1.使用快捷键 WIN+R 调出运行工具,然后再输入组策略命令 gpedit.msc 再点击确定. 2.进入组策略在计算机配置下面的管理模板,Windows 组件就可以看到 Windows Defen ...

  10. docker 的常用命令汇总