1.到bootstrap官网下载Bootstrap:点击打开链接(当前最新版本为bootstrap-3.37)
2.我们需要用到的bootstrap提供的css,js,fonts等都能在下载好的bootstrap/dist文件夹里面找到
fonts文件夹里的内容:
3.把dist文件夹下的余下3个文件夹复制到你的项目的根目录下
4.使用图标组件:test.html
首先引入外部bootstrap样式
<link rel="stylesheet" media="screen" href="css/bootstrap.css">
写一个搜索框:注意观察i标签的样式class
<form method="get" action="#">
<div class="row">
<div class="col-lg-3">
<div class="input-group">
<input class="form-control"></input>
<span class="input-group-btn">
<button class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</div>
</div>
</form>
展示一下效果:
注:如果出现图标无法显示的状况
例如这样:
需要查看自己的bootstrap.css文件是否错放在与fonts文件夹同级的文件中了,如下图这样放置文件会导致图标无法正常显示