Bootstrap Quick Learning Notes (2) Second form series

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.