Bootstrap表单图标

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中文网找到“表单”，“表单”下面找到“校验状态”，这里面就会有例子。