<!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. ansible来了

    番一.OP酱的自白      自从入了贵圈,每天需要强大的内心来维护混乱的线上,每天都是用浆糊一样的shell /python在糊墙补窟窿啊,感觉每天都是在和if else打交道啊,每次花牛鼻子劲写的 ...

  2. iOS支付宝SDK回调那坑

    支付宝钱包支付接口开发包2.0标准版(iOS 2.2.1) ,回调不出来,demo给出的方法是: - (BOOL)application:(UIApplication *)application op ...

  3. iOS使用Instruments的工具

    使用Instruments的工具 iOSXcodeInstrumentsInstruments是一个官方提供的强大的性能调试工具集. 1.Blank(空模板):创建一个空的模板,可以从Library库 ...

  4. 海康威视 嵌入到web页面相关问题

    因项目上面需求,接触到了海康威视的设备,要把他嵌入到web页面中,所以就开始了爬坑之路 刚开始不知道如何把设备的页面嵌入到项目的web页面中,直到我遇见了他——“WEB3.0控件开发包V1.0.9_C ...

  5. 更新pip源,提高python下载安装包速度的方式(window及linux)

    python需要经常安装各种模块,而pip是很强大的模块安装工具,自带的pip下载源在国外,导致每次下载速度太慢,所以我们最好是将自己使用的pip源更换更换成国内的下载源可提高开发效率 linux环境 ...

  6. c# 加密工具类

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Sec ...

  7. PHP sessions that have already been started

    In my PHP code, if a session has already started, and I try to start a new one, I get the following ...

  8. JAVA交换两个变量的值-（不使用第三变量）

    以下方法的根本原理就是: 借助第三个变量 c = a; a = b; b = c; 运算符-不借助第三变量: a = a+b; b = a-b; a = a-b; 为运算符-不借助第三个变量: (此种 ...

  9. SpreadJS 在 Angular2 中支持绑定哪些属性？

    SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,提供了完备的公式引擎.排序.过滤.输入控件.数据可视化.Excel 导入/导出等功能,适用于 .N ...

  10. boost split字符串

    boost split string , which is very convenience #include <string> #include <iostream> #in ...