<!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. 通过消费者和生产者的多线程程序，了解Java的wait()和notify()用法

    仓库类 public class Store { private int size = 0;//当前容量 private final int MAX = 10;//最大容量 //向仓库中增加货物 pu ...

  2. 转载-lvs官方文档-Linux服务器集群系统（二）

    Linux服务器集群系统(二) LVS集群的体系结构 章文嵩 (wensong@linux-vs.org) 2002 年 4 月 本文主要介绍了LVS集群的体系结构.先给出LVS集群的通用体系结构,并 ...

  3. LVS模式一：直接路由模式DR（Direct Routing）

    (一)LVS 一.LVS的了解 LVS(Linux Virtual Server)可以理解为一个虚拟服务器系统. Internet的飞速发展,网络带宽的增长,Web服务中越来越多地使用CGI.动态主页 ...

  4. pgpool安装配置整理

    安装PostgreSQL并配置三节点流复制环境,就不仔细说了,大致步骤如下: 1.下载源码 2.解压安装,如果在./configure --prefix=/usr/pgsql-10执行时提示要--wi ...

  5. jQuery 滑动选项卡jQuery tabslet

    Tabslet   Yet another jQuery plugin for tabs, lightweight, easy to use and with some extra features ...

  6. CUDA Samples: heat conduction(模拟热传导)

    以下CUDA sample是分别用C++和CUDA实现的模拟热传导生成的图像,并对其中使用到的CUDA函数进行了解说,code参考了<GPU高性能编程CUDA实战>一书的第七章,各个文件内 ...

  7. CUDA Samples: Ray Tracking

    以下CUDA sample是分别用C++和CUDA实现的生成光线跟踪图像,并对其中使用到的CUDA函数进行了解说,code参考了<GPU高性能编程CUDA实战>一书的第六章,CUDA各实现 ...

  8. keras系列︱keras是如何指定显卡且限制显存用量

    keras在使用GPU的时候有个特点,就是默认全部占满显存. 若单核GPU也无所谓,若是服务器GPU较多,性能较好,全部占满就太浪费了. 于是乎有以下三种情况: - 1.指定GPU - 2.使用固定显 ...

  9. Android中破解应用签名校验的后续问题处理方案(闪退和重启现象以及无效问题)

    一.前言 之前已经写了一个爆破签名校验的工具kstools,很多同学也在使用,但是也反馈了不少问题,之前一篇文章也介绍了,关于爆破之后第三方登录问题修复,这篇我们在综合说明一下一些后遗症问题,关于ks ...

  10. 【集成学习】lightgbm使用案例

    github地址 #!/usr/bin/env python2 # -*- coding: utf-8 -*- """ Created on Sat Mar 31 21: ...