Bootstrap Quick Learning Notes (2) Second form series

Welcome to Bootstrap Quick Learning notes (2) Form series two

This study note is based on the [MU Lesson network] tutorial, which is used to learn bootstrap, which will bring a new experience:

• Form Control Size
• Form control state
• Button
• Image

Detailed Introduction

• Form Control Size表单控件大小可以通过给表单控件添加class类来实现，如果想要比较大，则添加input-lg类，如果想要比较小， 则添加input-sm类，但这仅是对高度进行了处理，如果要对宽度进行处理，需要在每个input控件外围添加div容器并带有col-xs-4类，并 且要在这组控件的外围添加带有row类或者form-group类（如果form标签添加了form-horizontal类的话）的div容器
• Form control state如果想对控件设置表单控件状态，比如获取焦点状态，需要给该控件添加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类是必须的，文字内容可根据实 际情况修改
• Button按钮可按照风格分为：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类不能禁用按钮的默认行为
• Image图像按照样式风格可分为：img-responsive img-rounded img-circle img-thumbnail，分别对应响应式图片、圆角图片、圆形图片、缩略图片；并且Bootstrap提供了200多个icon小图标，通 过<span class="glyphicon glyphicon-search"></span>来实现，其中的类名决定了使用哪个icon，这里使用的是搜索图标icon，详细 可查询http://getbootstrap.com/components/#glyphicons

Note: The accumulation of knowledge is a lengthy process, please continue to follow the content .

Bootstrap Quick Learning Notes (2) Second form series