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