<!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. redis事务浅析

    事务可以简单理解为:把多件事当做一件事情处理,要么一起成功,要么一起失败.在Spring中可以配置一个事务管理器,然后在要进行事务处理的方法上添加@Transactional注解就可以了. 对于red ...

  2. [Python] print中的左右对齐问题

    一.数值类型(int.float) #  %d.%f是占位符>>> a = 3.1415926>>> print("%d"%a)    #%d只 ...

  3. 01-名字管理系统.py

    #-*- coding:utf-8 -*- #1.打印功能提示 print("-"*50) print("名字管理系统 V8.6") print("1 ...

  4. TCP的粘包

    产生原因: * tcp传输以字节流的方式发送消息,消息之间没有边界 * 发送比接受的速度快,因此不能保证每次都能及时被接收 影响 : 对每次发送的内容是一个独立的意思需要单独识别 如何处理: 1. 每 ...

  5. 文件的copy

    def mycopy(src_filename, dst_filename): try: fr = open(src_filename, "rb") try: try: fw = ...

  6. Floyd's Cycle Detection Algorithm

    Floyd's Cycle Detection Algorithm http://www.siafoo.net/algorithm/10 改进版: http://www.siafoo.net/algo ...

  7. 使用LinkedBlockingQueue来实现生产者消费者的例子

    工作中,经常有将文件中的数据导入数据库的表中,或者将数据库表中的记录保存到文件中.为了提高程序的处理速度,可以设置读线程和写线程,这些线程通过消息队列进行数据交互.本例就是使用了LinkedBlock ...

  8. 值类型struct在foreach中的陷阱

    最近踩了一个坑,为了优化代码,把class改为了struct,结果发现原来的初始化语句没有预期的运行,伪代码如下: public struct A { bool _isActive; public v ...

  9. BZOJ5194: [Usaco2018 Feb]Snow Boots（排序&set）（可线段树优化）

    5194: [Usaco2018 Feb]Snow Boots Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 102  Solved: 79[Subm ...

  10. stm32寄存器版学习笔记04 定时计数器中断

    STM32共有8个定时计数器,其中TIME1和TIME8是高级定时器,TIME2~TIME5是通用定时器,TIME6和TIME7是基本定时器.以TIME3为例总结定时计数器的基本用法. 1.TIM3的 ...