bootstrap搜索图标的使用
2014-05-06 15:30
302 查看
<!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>
相关文章推荐
- 在幼儿园管理系统中使用BootStrap的时候,如何快速找到合适的图标!
- 使用bootstrap制作搜索框
- 今天在学习bootstrap,在使用字体图标的时候,无法显示
- 使用bootstrap图标
- Bootstrap的160个小图标和使用
- Bootstrap 字体图标使用案例
- # 关于 \kartik\select2\Select2 在 Bootstrap 模态框内不能使用智能搜索的问题
- bootstrap之表单输入框以及图标的使用
- Bootstrap 如何使用字体图标
- bootstrap-datepicker时间插件和chosen.jquery下拉模糊搜索和bootbox.min弹出框以及jquery.tips提示框和js的全选与取消的使用
- grails中使用bootstrap的图标
- 使用bootstrap.css框架无法显示图标问题
- 在SVG中使用Bootstrap或FontAwesome图标字体
- 使用bootstrap-select完成可搜索的多选下拉列表
- 使用bootstrap实现下拉框搜索功能的实例讲解
- lamp_bootstrap_01_字体图标的使用
- 使用bootstrap图标做链接
- Bootstrap-Iconpicker 和pjax插件一起使用图标加载问题
- 使用bootstrap-select实现下拉菜单的模糊搜索,支持单选和多选功能
- 使用bootstrap实现下拉框搜索功能