<!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. 【ARM-Linux开发】Wi-Fi 应用工具wpa_supplicant

    wpa_supplicant是一个跨平台的无线安全管理软件,这里需要用它来对无线网络进行配置,wpa_supplicant相关工具已经移植好,包含在我们提供的文件系统中. 配置无线网络 wpa_sup ...

  2. Codis-proxy的配置和启动

    生成配置文件,即将现有的配置文件输出到指定目录位置: ./codis-proxy --default-config | tee conf/proxy.toml 修改配置文件信息: vi conf/pr ...

  3. spring cloud 快速搭建

    1.首先新建一个普通maven工程 项目名自定义都可以 2.然后在maven工程下新建一个基于spring boot 的module 为注册中心,勾选Eureka的配置,在启动类上面加注解@Enabl ...

  4. c# 中对于每次修改的程序 都必须重新手动生成 才能编译的问题

    问题描述:原来用VS2017,升级了VS2019,发现修改了Winform界面,F5运行竟然还是原来的界面 问题解决: 需要修改两个地方 工具>> 选项>> 项目和解决方案&g ...

  5. 【转】Linux下查看CPU、内存、磁盘信息

    1.查看CPU信息# 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数cat /proc/c ...

  6. C++:标准模板库map

    一:介绍 map是STL的关联式容器,以key-value的形式存储,以红黑树(平衡二叉查找树)作为底层数据结构,对数据有自动排序的功能. 命名空间为std,所属头文件<map> 注意:不 ...

  7. C 统计用户输入的总行数和字符长度

    C 统计用户输入的总行数和字符长度 #include <stdio.h> #include <Windows.h> int main(void) { ]; ; ; printf ...

  8. 更改CodeBlocks注释的颜色

  9. redis字符串类型的基本命令

    1.redis字符串类型键的设置 命令名称:SET 语法:set key value [EX seconds] [PX milliseconds] [NX|XX] 功能:给一个key添加字符串类型的值 ...

  10. 面试经典算法：优先队列，最大堆，堆排序，左偏树Golang实现

    堆排序 使用优先队列-最小/最大堆可实现. 优先队列 优先队列是一种能完成以下任务的队列:插入一个数值,取出最小的数值(获取数值,并且删除).优先队列可以用二叉树来实现,我们称这种为二叉堆. 最小堆 ...