<!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. ubuntu16.04 TLS安装java

    apt-get install software-properties-commonadd-apt-repository ppa:webupd8team/javaapt-get updateapt-g ...

  2. 【ARTS】01_30_左耳听风-201900603~201900609

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  3. MySQL“Another MySQL daemon already running with the same unix socket”的处理

    方法一: rm var/lib/mysql/mysql.sock service mysqld start 方法二: mv /var/lib/mysql/mysql.sock /var/lib/mys ...

  4. 【数据库开发】MySQL修改root密码

    方法1: 用SET PASSWORD命令 mysql -u root mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('newpass ...

  5. linux系统下，在用户空间应用程序中模拟发送系统键盘事件

    Linux 有自己的 input 子系统,可以统一管理鼠标和键盘事件. 如果想模拟键盘事件,但是系统没有键盘设备该如何是好? 基于输入子系统实现的 input 可以方便的在用户空间模拟鼠标和键盘事件. ...

  6. 程序计数器（关于java虚拟机内存的那些事）

    <深入理解java虚拟机> 读书感悟 作者:淮左白衣 --------------写于2018年4月9日17:44:48 关于java虚拟机内存的那些事之程序计数器 关于java虚拟机内存 ...

  7. wordpress5.0+中 Notice: Undefined index: HTTP_REFERER 问题解决

    都说现在搭网站很简单了,但真遇到问题了还真不一定能解决. 这次搭建的网站是用的wordpress版本5.0.4,以为操作和以前的低版本一样,结果做出来还是遇到问题了. 网站搭好后,首页总在顶端出现一行 ...

  8. SAS学习笔记20 CAT函数

  9. mongo与spring集合

    1.加入lib包,在Maven中 <dependency> <groupId>org.springframework.data</groupId> <arti ...

  10. win8系统安装.net Framework3.5

    Win8 离线安装 .Net Framework 3.5(工具+方法)(支持Win8.1) 微软在最新的 Win8 / Win8.1 系统中没有集成 .NET 3.5,如果安装的话,必须是在线安装,甚 ...