bootstrap搜索图标的使用

发布时间：2020-12-17 21:11:29 所属栏目：安全来源：网络整理

导读：!DOCTYPE htmlhtml head titleBootstrap 图标/title meta charset="utf-8" meta name="viewport" content="width=device-width,initial-scale=1.0" !-- Bootstrap -- link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen" link href="b

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 图标</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- Bootstrap -->
    <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>
预览效果：

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!