Bootstrap表单图标
1.在ch06中新建一个demo05.html,将之前的demo01.html中的内容复制粘贴到demo05.html。删除多余的控件,只留下“用户名”这个控件就行了。
2.在文本框加入这个小图标(首先就需要在外层的div里面加一个has-feedback,因为这是需要它对小图标进行定位。然后我们需要在input标签后面增加一个<span>标签。我们可以在bootstrap中文网上找到“表单”中的“添加额外的图标”,复制其中的一个<span>标签就可以了。然后要记住这文本框要用form-control。
<div class="form-group has-feedback">
<label>用户名:</label>
<input type="text" class="form-control" name="name" placeholder="输入用户名" />
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>
3.运行效果:
这样的话文本框右边就会有一个图标,那到底有什么图标可以使用呢?
我们可以进入bootstrap中文网,找到“组件”点击进入,可以看到第一项就是“Glyphicons字体图标”。
你可以在里面选择你想要用的样式,比如说你想使用“眼睛”这个图标,你就把下面的文字复制一下,拷贝到<span>标签里面。然后保存一下。
<span class="glyphicon glyphicon-eye-open form-control-feedback" aria-hidden="true"></span>
再刷新一下浏览器,文本框就会出现“眼睛”这个图标。
4.总结
要记住两步,第一步就是在div标签里面加一个has-feedback,然后在我们的表单控件后面加一个<span>标签,<span>标签里面加图标样式,但是别忘了要在后面加form-control-feedback。
如果你记不住的话,可以进入bootstrap中文网找到“表单”,“表单”下面找到“校验状态”,这里面就会有例子。