栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > Bootstrap教程

Bootstrap教程(8)--使用表单样式

Bootstrap教程(8)--使用表单样式

1. 概述

HTML自带的表单没有样式可言,非常难看。

Bootstrap提供了样式优雅大方的表单,拿来即用,非常nice。本篇就来讲解下Bootstrap框架下表单样式的设置方法。

2. HTML表单样式

我们先来看下HTML自带的表单是啥样的。

  			

效果如下,样式真是马马虎虎。

3. Bootstrap默认表单

如果使用Bootstrap设置表单,只需要将表单控件放入.form-group类的div中,并对表单控件添加.form-control类。

需要注意的是,Boostrap默认表单使垂直表单,即从上往下排列显示。

代码:

				

效果如下,样式还是非常大气的。

4. Bootstrap水平表单

默认的垂直表单看起来并不习惯,绝大多数表单还是习惯使用水平表单的形式,即文字和控件是水平排列的。

可以通过三个步骤,将表单转换为水平表单。

  1. 标签添加.form-horizontal类
  2. 添加网格类,使标签文字和控件水平排列。

代码如下:

		   
    

效果如下,非常符合正常表单的使用习惯了。

5. Bootstrap内联表单

有时候我们希望表单的元素全部排列在一行上,也就是所谓的内联表单。

标签设置.form-inline类即可将表单设置为内联表单,代码如下:

			
     

效果如下:

6. 小结

本篇介绍了Bootstrap表单常用的三种样式的实现方法,可以根据实际情况选用。

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号