bootstrap搜索栏
/*进行样式预习设置,body预留导航栏位置50px,mylogo样式是给把图表显示出来*/
<style>
body{margin-top: 50px;
}
.my-logo{
display: inline-block;
width: 63px;
height: 42px;
background: url("img/hdr-spr.png") 0px -512px no-repeat;
margin-top: 3px;
}
</style>
<!--响应式导航条-->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#mytoggle" class="navbar-toggle" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#" class="navbar-brand my-logo"></a>
</div>
<div class="collapse navbar-collapse" id="mytoggle">
<!--左侧-->
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">热点</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">菜单</a>
<ul class="dropdown-menu">
<li><a href="#">欢迎来到英特尔</a></li>
<li><a href="#">我们的产品</a></li>
<li><a href="#">我们的服务</a></li>
</ul>
</li>
</ul>
<!--右侧侧-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">简体中文</a></li>
<li><a href="#">登录</a></li>
</ul>
<form action="#" class="navbar-right navbar-form">
<div class="form-group has-feedback">
<!--has-feedback样式/反馈控制/ form-control-feedback 增加这两个样式后,span代表的放大镜就可以放在搜索栏里面-->
<label for="search" class="sr-only">搜索关键字</label>
<input type="search" placeholder="请输入" id="search" class="form-control">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
<span class="navbar-right navbar-text">|</span>
<a href="#" class="navbar-link navbar-text navbar-right">查询内容</a>
</div>
</div>
</div>
bootstrap搜索栏的更多相关文章
- Bootstrap表格添加搜索栏
在学习了表格的分页后,本文尝试在表格顶部加入搜索栏,用来筛选表格的数据,先看一下效果: 未进行搜索时,有394条记录: 在输入乘车码“1”和订单号“20150120”后,只有28条记录: 此处使用了两 ...
- 前端框架bootstrap 表单和导航菜单的 Demo(第二篇)
表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- 自动化运维—tomcat服务起停(mysql+shell+django+bootstrap+jquery)
项目简介: 项目介绍:自动化运维是未来的趋势,最近学了不少东西,正好通过这个小项目把这些学的东西串起来,练练手. 基础架构: 服务器端:web框架-Django 前端:html css jQuery ...
- Python学习笔记第二十七周(Bootstrap)
目录: 全局样式 一.栅格系统 二.表单 三.按钮 四.导航 五.按钮组 六.面板 七.表格 八.分页 九.排版 十.图片 十一.辅助类 十二.响应式工具 组件 内容: 前言: 首先通过https: ...
- 使用bootstrap-select控件 搜索栏键入关键字动态获取后台数据
bootstrap-select开源地址:https://github.com/silviomoreto/bootstrap-select bootstrap-select使用示例:http://si ...
- 基于Web的网络商城项目设计与实现【SSM+Bootstrap+Vue】
[Spring+SpringMVC+MyBatis+Bootstrap+Vue] 演示:线路1 线路2 1.系统功能介绍 网上商城系统 是一个功能完善的在线购物系统 - ,主要为在线销售和在线购物服 ...
- 旺财速啃H5框架之Bootstrap(五)
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap(四)
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
随机推荐
- oracle 死锁 锁
[zhuan]今天看群里在讨论数据库死锁的问题,也一起研究了下,查了些资料在这里总结下. 所谓死锁: 是指两个或两个以上的进程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用,它们都将 ...
- Odoo12 之主题创建或扩展
初次使用 Odoo 来制作网站,因Odoo自带代码块效果单一,无法满足当前网站展示效果,需要对当前代码块进行添加或扩展.而这个代码块是属于网站中的布局设计这一块,Odoo 将所有的布局以及逻辑行为,都 ...
- CentOS添加用户,管理员权限
原文链接:https://www.linuxidc.com/Linux/2012-03/55629.htm 1.添加普通用户 [root@server ~]# useradd admin ...
- Linux 的 netstat 命令
转载 https://www.cnblogs.com/ct20150811/p/9432043.html 一般用 netstat -lnp |grep "程序名"
- Ubuntu 18.04安装Conda、Jupyter Notebook、Anaconda
1.Conda是一个开源的软件包管理系统和环境管理系统,它可以作为单独的纯净工具安装在系统环境中,有的python库无法用conda获得时,conda允许在conda环境中利用Pip获取包文件.可以将 ...
- 2016年蓝桥杯B组C/C++决赛题目
2016年第七届蓝桥杯B组C/C++决赛题目 点击查看2016年第七届蓝桥杯B组C/C++决赛题解 1.一步之遥 从昏迷中醒来,小明发现自己被关在X星球的废矿车里. 矿车停在平直的废弃的轨道上. 他的 ...
- 第36课 经典问题(下)----关于string的疑问
实例1: 下面的代码输出什么,为什么? #include <iostream> #include <string> using namespace std; int main( ...
- keeplived+lvs(主从热备+负载均衡)
本次实验基于DR负载均衡模式(直接路由),设置一个VIP(Virtual IP)为192.168.1.225,用户只需要访问这个IP地址即可获得网页服务.其中,负载均衡主机为192.168.1.221 ...
- js 构造函数中的 return
本文链接:https://blog.csdn.net/qq_36209248/article/details/89190978 默认情况下,没有return的函数的返回值为undefined(即没有定 ...
- 解决问题:Unable to start ServletWebServerApplicationContext due to missing ServletWebServerFactory bean.
Unable to start ServletWebServerApplicationContext due to missing ServletWebServerFactory bean. 注释掉, ...