<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
        <style>
        div>form>ul>.list>a:hover{
        background: #337ab7;
        }
        </style>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>

<div class="container">
<form class="navbar-form navbar-left">
<ul class="nav nav-tabs">
<li class="dropdown list">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
首页
</a>
<ul class="dropdown-menu">

<li class="active">
<a href="#">菜单一</a>
</li>
<li>
<a href="#">菜单二</a>
</li>

</ul>
</li>

<li class="dropdown list">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
官网
</a>
<ul class="dropdown-menu">

<li class="active">
<a href="#">菜单三</a>
</li>
<li>
<a href="#">菜单四</a>
</li>

</ul>
</li>

<li class="dropdown list">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
关于
</a>
<ul class="dropdown-menu">

<li class="active">
<a href="#">菜单五</a>
</li>
<li>
<a href="#">菜单六</a>
</li>

</ul>
</li>
</ul>
</form>

<form class="navbar-form navbar-right">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</div>
<input type="text" class="form-control" placeholder="搜索" />
</div>

</div>
<button type="button" class="btn btn-danger">搜索</button>
</form>

</div>
</body>
</html>

bootstrap4.2 导航搜索框的更多相关文章

  1. [iOS微博项目 - 1.2] - 导航栏搜索框

    A.导航栏搜索框 1.需求 在“发现”页面,在顶部导航栏NavigationBar上添加一个搜索框 左端带有“放大镜”图标 github: https://github.com/hellovoidwo ...

  2. iOS 删除黑色边框线导航栏&amp;删除搜索框的阴影边界线和中黑色文本输入框 - 解

    删除黑色边框线导航栏 in viewDidload: [self.navigationController.navigationBar setBackgroundImage:[[UIImage all ...

  3. IOS第二天-新浪微博 - 添加搜索框,弹出下拉菜单 ,代理的使用 ,HWTabBar.h(自定义TabBar)

    ********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...

  4. iOS8之后搜索框的常规实例

    1.在一个二级导航控制器中添加一个UITableviewController作为子控制器 2.UITableviewController.tableView 作为展示结果 3.利用iOS之后的UISe ...

  5. Android开发 ---代码创建选项菜单、隐藏菜单项、菜单的生命周期,菜单按钮图标设置、搜索框、xml中设置子菜单

    1.activity_main.xml 描述: 定义了一个按钮 <?xml version="1.0" encoding="utf-8"?> < ...

  6. Appium解决搜索框问题

    appium解决搜索框: 1. 点击搜索,手工测试会弹出键盘,需要点击键盘上的搜索按钮. 2.但自动化的时候,键盘不能弹出.所以我们可以用回车等keycode代替搜索按钮. Press Keycode ...

  7. ios开发之--搜索框的使用(PYSearchViewController的使用)

    最近需要开发搜索框,比较了以前的各个版本的搜索框,UISearchDisplayController和UISearchController的使用,以后再做记录,随着ios11的更新,一些控件发生了,改 ...

  8. 搜索框反射型xss问题解决(网站开发)

    什么是反射型XSS      XSS又叫CSS (Cross Site Script) ,跨站脚本攻击.它指的是恶意攻击者往Web页面里插入恶意html代码,当用户浏览该页之时,嵌入其中Web里面的h ...

  9. 开发手机APP过程,不同使用场景APP搜索框的样式及区别

    搜索框是 app 内最常见的控件之一,可以帮助用户快速又精准找到期望的内容与功能.不同的使用场景下,根据页面中搜索的重要程度,搜索框也有着不同的样式. 下面就常州开发APP公司和大家聊聊常见的四种样式 ...

随机推荐

  1. LaTeX数学公式大全

    原写于我的洛谷博客(传送门),现搬到这个博客上. 建议去洛谷博客上看,因为两边的编辑器在有些功能上不能通用,所以之后若有删改或新增内容只在洛谷博客上弄,这边就懒得改了. 原本是针对洛谷的编辑器,不过懒 ...

  2. 放大Button热区的方法哟

    //添加图片不能用backgroundimage [btn setImage:image5 forState:]; //然后 btn.imageEdgeInsets = UIEdgeInsetsMak ...

  3. 码代码的小女孩(来自noip贴吧)

    天冷极了,下着雪,又快黑了.这是NOIP的前夜.在这又冷又黑的晚上,一个衣衫破烂的小女孩在机房敲着代码.她从班里逃出来的时候还拿着一本算导,但是有什么用呢?那是一本很破旧的书--那么大,一向是她妈妈垫 ...

  4. 句子相似度_tf/idf

    import mathfrom math import isnanimport pandas as pd#结巴分词,切开之后,有分隔符def jieba_function(sent): import ...

  5. Vuejs2.0之异步跨域请求

    Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了axios.接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的能力 ...

  6. 单片机一种简便的printf调试方案。

    此处引用csdn博客.链接如下. http://blog.csdn.net/cp1300/article/details/7773239 http://blog.csdn.net/aobai219/a ...

  7. Web中的四大作用域对象

    request:请求对象 类型:HttpServletRequest session:表示一次会话,可以处理一个用户多个页面之间的请求 application:标识web应用上下文,类型:Servle ...

  8. 2018.10.30 NOIP模拟 字胡串(单调栈+容斥)

    传送门 对于每个点,用单调栈求出它左右第一个比他大的位置. 然后对每个点O(logai)O(log_{a_i})O(logai​​)求出第一个拥有跟它不同二进制位的位置. 然后容斥一下就行了. 代码

  9. mac os 卸载android studio 从新安装遇到的一些问题

    http://blog.csdn.net/elonspace/article/details/51800949 google中国论坛 http://www.android-studio.org lin ...

  10. Vue自定义指令报错:Failed to resolve directive: xxx

    Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...