BootStrap下的网站的搜索的样式界面

  •   
  • 8733
  • HTML
  • 1
  • super_dodo
  • 2014/06/25

网站的页面中常常需要用到查询，就避免不了需要设计查询的界面.
在Bootstrap下面有很好的按钮界面和input界面以及查询的图标.可以节省很多的时间精力。
在此弄了两个常见的界面。喜欢的可以拿去用。
文件需要图片支持所以index.php的同级目录下还需要css目录和fonts目录(bootstrap3)
代码和界面示例如下。
QQ截图20140625185239

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Bootstrap的搜索的样式界面~~DoDoBook</title>
	<link rel="stylesheet" href="css/bootstrap.css">
	<style type="text/css">
		#search{float:left;height:40px;width:400px;}
		#searchBtn{float:right;height:40px;line-height:30px;font-size:16px;padding:0 15px;z-index:999;left:380px;position:absolute;}
		#search2{float:left;height:40px;width:400px;}
		#searchBtn2{height:40px;line-height:30px;font-size:16px;padding:0 15px;margin:0 10px;}
	</style>
</head>
<body>
	<h3 style="font-family:Microsoft Yahei;margin:20px 100px">Bootstrap的搜索的样式界面~~</h3>
	<form action="/search/" method="GET" style="position:relative;margin:50px 100px;">
		<input type="search" name="search" id="search" class="form-control xx10" placeholder="找商家~~">
		<button type="submit" id="searchBtn" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span>  搜索</button>
	</form>
	
	<div style="clear:both"></div>
	
	<form action="/search/" method="GET" style="position:relative;margin:100px;">
		<input type="search" name="search" id="search2" class="form-control" placeholder="找商家~~">
		<button type="submit" id="searchBtn2" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span>  搜索</button>
	</form>
	
</body>
</html>

你要做一个不动声色的大人了。不准情绪化，不准偷偷想念，不准回头看。去过自己另外的生活。你要听话，不是所有的鱼都会生活在同一片海里。—— 村上春树