欢迎收看大奥编写的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
注意:知识的积累是一个漫长的过程,请继续关注后续内容。
时间: 2024-10-12 13:49:51