<!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. Matching (2)

    HALCON 10.0  II-B 3.1 Gray-Value-Based Matching 基于灰度的匹配是一个非常经典的方法,它仅适用于对象的不模糊,不缺失,灰度值不变化.适用于对象旋转转.注意 ...

  2. 2018-2019-2 网络对抗技术 20165210 Exp4 恶意代码分析

    2018-2019-2 网络对抗技术 20165210 Exp4 恶意代码分析 一.实验目标 首先是监控你自己系统的运行状态,看有没有可疑的程序在运行. 其次是分析一个恶意软件,就分析Exp2或Exp ...

  3. New Concept English three （23）

    31w 45 People become quite illogical when they try to decide what can be eaten and what cannot be ea ...

  4. Linux系统在启动过程中grub引导文件丢失的解决方法

    在/boot/grub2目录下有一个grub.cfg文件:该文件主要是用来自动地引导系统启动内核程序和系统的初始化程序. 问题一:当系统在启动的情况下,我们不小心删除/boot/grub2/grub. ...

  5. Linux：tee命令详解

    tee tee命令用于将数据重定向到文件,另一方面还可以提供一份重定向数据的副本作为后续命令的stdin,简单的说就是把数据重定向到给定文件和屏幕上. 语法 tee(选项)(参数) 选项 -a:向文件 ...

  6. Unity 2d 的 SpriteMask为游戏表现带来多种可能性

    孙广东  2017.7.22 http://blog.csdn.NET/u010019717           SpriteMask 是Unity 2017.1 开始添加2d功能!,    Spri ...

  7. cocoapods导入第三方库后，xcode上import不提示，找不到第三方库的解决办法

    选择你的工程tagets, -> Build Settings -> Search Paths -> User Header Search Paths 双击User Header S ...

  8. I.MX6 Kernel BUG at include/linux/netdevice.h:520!

    /*************************************************************************** * I.MX6 Kernel BUG at i ...

  9. SQL查询执行步骤

    1.总结 执行顺序 3.select ...聚合函数 from 表名 1.where ... 2.group by ... 4.having ... 5.order by ... 6.limit .. ...

  10. [译]HIPAA要求的SSL/TLS等级

    原文链接:https://luxsci.com/blog/level-ssl-tls-required-hipaa.html 原文发表时间:2015.1.13 本博文仅仅是上述原文的翻译,仅供研究参考 ...