Bootstrap快速学习笔记（2）表单系列之二

欢迎收看大奥编写的Bootstrap快速学习笔记（2）表单系列之二

本学习笔记根据[慕课网]教程修改而来，用它学习Bootstrap，将会带来全新的体验哦：

• 表单控件大小
• 表单控件状态
• 按钮
• 图像

---

详细介绍

 

• 表单控件大小表单控件大小可以通过给表单控件添加class类来实现，如果想要比较大，则添加input-lg类，如果想要比较小， 则添加input-sm类，但这仅是对高度进行了处理，如果要对宽度进行处理，需要在每个input控件外围添加div容器并带有col-xs-4类，并 且要在这组控件的外围添加带有row类或者form-group类（如果form标签添加了form-horizontal类的话）的div容器
• 表单控件状态如果想对控件设置表单控件状态，比如获取焦点状态，需要给该控件添加form-control类；再比如禁用状态，只需 要在input控件的末尾添加disabled属性；还有验证属性，分为成功状态、警告状态和错误状态三种，可以分别通过class类has- success\has-warning\has-error来实现，并且这三种类要和form-group类在一起，如果想将各种状态的icon显示出 来，还要在has-success等类后面添加has-feedback类，并且要在input控件后边添加一个span元素：<span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>；提示状态，就是在input控件后边添加文字提示，通过span元素 来实现，<span class="help-block">你输入的信息是正确的</span>，其中help-block类是必须的，文字内容可根据实 际情况修改
• 按钮按钮可按照风格分为：btn btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link，以上class类分别对应不同的按钮样式和不同的用途，其中btn为每个类所必须的；按照大小可分为：btn-lg btn-sm btn-xs，分别对应大型按钮、小型按钮、超小型按钮；通过btn-block按钮让按钮充满整个父元素，即宽度设置为100%；按钮禁用的两种方法： 在按钮标签中添加disabled属性或者添加disabled类，其中添加disabled类不能禁用按钮的默认行为
• 图像图像按照样式风格可分为：img-responsive img-rounded img-circle img-thumbnail，分别对应响应式图片、圆角图片、圆形图片、缩略图片；并且Bootstrap提供了200多个icon小图标，通 过<span class="glyphicon glyphicon-search"></span>来实现，其中的类名决定了使用哪个icon，这里使用的是搜索图标icon，详细 可查询http://getbootstrap.com/components/#glyphicons

注意：知识的积累是一个漫长的过程，请继续关注后续内容。