<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>导航测试</title>

<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">

<style type="text/css">

.navbar-inverse .navbar-header .active{

     background-color: #31708f;

}

.navbar-inverse .navbar-brand {

    color: #fff;

    cursor: pointer;

    padding: 15px 25px;

    font-size: 14px;

}

.navbar-inverse {

    background-color: #337ab7;

    border-color: #337ab7;

}

.navbar-inverse .navbar-nav>li>a {

    color: #fff;

}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{

    color: #fff;

    background-color: #31708f;

}

.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover{

    color: #fff;

    background-color: #337ab7;

}

input#sw{

    font-style: italic;

    color: #aaa;

}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{

    border-color: #337ab7;

}

@media (max-width: 767px){

    .navbar-inverse .navbar-nav .open .dropdown-menu .divider{

        background-color: rgba(0,0,0,.075);

    }

}

</style>

</head>

<body>

<div class="container">

    <nav class="navbar navbar-inverse">

        <div class="navbar-header">

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

            <span class="sr-only">Toggle navigation</span>

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

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

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

          </button>

          <a class="navbar-brand active" onclick="alert('all')">全部</a>

        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

          <ul class="nav navbar-nav">

            <li class="dropdown">

              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">按场景选择 <span class="caret"></span></a>

              <ul class="dropdown-menu">

                <li><a href="#">全部</a></li>

                <li role="separator" class="divider"></li>

                <li><a href="#">规划</a></li>

                <li><a href="#">实施</a></li>

                <li><a href="#">维护</a></li>

              </ul>

            </li>

            <li class="active"><a href="#">我的收藏</a></li>

            <li><a href="#">最近浏览</a></li>

          </ul>

          <form class="navbar-form navbar-right">

              <div class="input-group">

              <input id="sw" type="text" class="form-control" value="请输入关键字(名称/描述)">

              <span class="input-group-btn">

                <button class="btn btn-default" type="button">搜索</button>

              </span>

            </div>

            <!--

            <div class="form-group">

              <input id="sw" type="text" class="form-control" value="请输入关键字(名称/描述)">

            </div>

            <input type="button" class="btn btn-default" value="搜索"/>

            -->

          </form>

        </div>

    </nav>

</div>

</body>

<script src="jquery/jquery.min.js"></script>

<script src="bootstrap/bootstrap.min.js"></script>

<script type="text/javascript">

</script>

</html>

支持响应式：

导航条且手机版.html——仿照官网例子的更多相关文章

  1. OpenLayers 官网例子的中文详解

    https://segmentfault.com/a/1190000009679800?utm_source=tag-newest 当你希望实现某种功能的时候,即使你对 openlayers 几乎一窍 ...

  2. 针对Openlayer3官网例子的简介

    网址:http://openlayers.org/en/latest/examples/ 如果大家想了解ol3能做什么,或者说已提供的API有什么,又闲一个个翻例子跟API累的话,就看看这个吧. 1. ...

  3. Vue组件化应用构建 官网例子 Unknown custom element: <todo-item>

     [博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708] htt ...

  4. 【转】一个lucene的官网例子

    创建索引: import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import jav ...

  5. STREAMING HIVE流过滤 官网例子 注意中间用的py脚本

    Simple Example Use Cases MovieLens User Ratings First, create a table with tab-delimited text file f ...

  6. 官网例子，mt-field password获取不到

    新尝试了Mint-UI,在使用表单组件Field时, 直接从demo中拷贝了如下代码: <mt-field label="username" placeholder=&quo ...

  7. 几个比較好的IT站和开发库官网

    几个比較好的IT站和开发库官网 1.IT技术.项目类站点 (1)首推CodeProject,一个国外的IT站点,官网地址为:http://www.codeproject.com,这个站点为程序开发人员 ...

  8. 几个比较好的IT站和开发库官网

    1.IT技术.项目类网站 (1)首推CodeProject,一个国外的IT网站,官网地址为:http://www.codeproject.com,这个网站为程序开发者提供了很好的代码示例以及讲解,不过 ...

  9. 2018年7月份，python上传自己的包库到pypi官网的方法

    最近pypi官网进行了更新,老的上传网址作废了.记录下上传到pypi的方法 0.去pypi官网注册账号,没账号是不可能上传的,想想也是那不乱套了吗,注册后会收到一个邮件需要点击然后重新登录 1.目录就 ...

随机推荐

  1. 四、dbms_alert(用于生成并传递数据库预警信息)

    1.概述 作用:用于生成并传递数据库预警信息.使用包DBMS_ALERT,则必须以SYS登陆,为该用户授予执行权限.sql>conn sys/oracle as sysdbasql>gra ...

  2. Markdown_02_作图

    [TOC] 前言 一.序列图(Sequence) 序列图由 js-sequence提供支持,可以将代码块转成序列图 示例如下: ```sequence Title: Here is a title A ...

  3. 随手写的一个检测php连接mysql的小脚本

    最近偶然接触到一点点的php开发,要用到mysql数据库,由于mysql和php版本的关系,php5里面连接函数有mysql_connect(),mysqli_connect()两种,php7中又使用 ...

  4. Sqlserver 存储过程 返回-6

    存储过程中没有返回 手动返回-6的代码,但是一直接收到-6返回值. 经最后研究发现,是粗心导致的,Insert插入数据时在非空字段插入了Null值导致出现异常,所以返回了-6. 所以说在事务中,可能会 ...

  5. 基于Ubuntu16.04的GeForce GTX 1080驱动安装，遇到的问题及对应的解决方法

    1．在主机上插上GPU之后,查看设备: $ nvidia-smi Tue Dec :: +------------------------------------------------------- ...

  6. 【剑指offer】09-2跳台阶，C++实现

    原创博文,转载请注明出处! # 本文是牛客网<剑指offer>刷题笔记 1.题目 # 一只青蛙一次可以跳1级台阶,也可以跳2级.求该青蛙跳n级的台阶总共有多少种跳法. 2.思路 # 跳0级 ...

  7. [译]缓解BEAST对TLS攻击的方式

    原文链接:https://community.qualys.com/blogs/securitylabs/2011/10/17/mitigating-the-beast-attack-on-tls 原 ...

  8. Java：浅克隆(shallow clone)与深克隆(deep clone)

    Summary 浅克隆与深克隆对于JavaSE来说,是个难度系数比较低的概念,但不应该轻视它. 假设一个场景:对于某个list,代码里并没有任何对其的直接操作,但里面的元素的属性却被改变了,这可能就涉 ...

  9. BZOJ5435: 取石子（博弈）（占位）

    5435: 取石子 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 35  Solved: 10[Submit][Status][Discuss] De ...

  10. Codeforces 17E Palisection 【Manacher】

    Codeforces 17E Palisection E. Palisection In an English class Nick had nothing to do at all, and rem ...