bootstrap搜索图标的使用

来源：互联网发布：淘宝手机评价管理登录编辑：程序博客网时间：2024/05/17 22:26

[html] view plaincopy

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 图标</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<h3>一个搜索表单</h3>
<form class="well form-search" action="">
<input class="input-medium search-query" type="text" name="" id="">
<button class="btn" type="submit"><i class="icon-search"></i>submit</button>
</form>
</div>
</div>
</div>
<hr/><br/>
</body>
</html>
预览效果：
<img src="http://img.blog.csdn.net/20140506152748296?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTE3NTQxMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
bootstrap图标的使用方法：
<i class="icon_class_name"></i>
其中 "icon_class_name" 是在 bootstrap.css 中定义的图标 class 的名称（例如：icon-music、icon-star、icon-user 等）。
如果您想要使用白色图标，然后添加一个额外的 icon-white class，如下所示：
<i class="icon_class_name icon-white"></i> </i>

0 0