bootstrap 表单样式

为了获得一个好看的form表单空间，我们需要如下的操作：

效果图如下：

我们首先通过form-horizontal类来指定我们的表单空间是水平排列的，即标签和输入框在一个水平线上，然后我们通过form-group来使得表单控件占满整个容器的宽度，然后通过col-sm-x来指定标签和空间各自所占的距离，之后我们添加入control-label和form-control来为标签和输入框添加好看的样式。总结如下表格：

水平表单控件相关bootstrap类
form-horizontal	指定表单的展示方式是水平展示标签与输入框
form-group	将 `label` 元素和控件包裹在 `.form-group` 中可以获得最好的排列。
form-control	所有设置了 `.form-control` 类的 `<input>`、`<textarea>` 和 `<select>` 元素都将被默认设置宽度属性为 `width: 100%;`
control-label	为label添加样式
col-sm-xx	通过该格栅系统来指定各个控件的宽度
input-lg input-sm	通过该类来指定空间的高度

bootstrap 表单样式相关推荐

1-17. Bootstrap 表单样式汇总
网站数据交互一般都是通过表单实现 Bootstrap中表单布局类型有哪些? 垂直表单内联表单水平表单向父 <form> 元素添加 role="form" 把标签和 ...
修改ua html5,html5中bootstrap表单样式文件html，兼容多种UA终端
原创作品(请勿商用):目前的UA表单不用判断表格的宽度,它是自适应的,它可以自适应PC.平板.手机:每一个模块可以折叠显示隐藏的效果,(如不需要可以删除).如有要自己手动设置宽度,那就设置在表单元素上 ...
Bootstrap 表单控件的状态
在使用过程中,每个控件可能都会有很多状态,通过表单控件的状态,可以给用户或访问者提供一些有用的反馈. Bootstrap提供了 4 种状态,分别是获得焦点状态.无效输入状态.禁用状态.验证状态,并为每 ...
Bootstrap 表单的动作按钮
Bootstrap定义了 .form-actions 类,专门用来控制表单动作按钮的样式.可以将一组动作按钮放在表单尾部,并放在 .form-actions 的容器中,则这些按钮会自动缩进,跟其它表单 ...
Bootstrap 表单的基本控件
Bootstrap支持所有的标准表单控件,包括 input 控件.textarea 控件.checkbox 和 radio 控件.select 控件等. 1.input 控件 Bootstrap 支持 ...
Bootstrap表单的默认布局
Bootstrap 自带了基本的表单样式,不需要添加任何辅助类,即可使用表单的默认布局.默认布局中,表单元素采用垂直布局,标签和输入框使用顶对齐方式.如: <form> <fie ...
Bootstrap表单
Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: 内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖 ...
还不错的Table样式和form表单样式
作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加上图: 带鼠标滑动效果的table样式看起来比较清爽样式 <he ...
Bootstrap 表单的帮助文本
Bootstrap 中,可以为表单控件提供一些帮助文本,来作为用户输入时的帮助信息.支持行内帮助文本和块级帮助文本. 在文本输入框的后面,添加 .help-inline 的元素,就可以为它添加行内帮助 ...
Bootstrap 表单控件的尺寸
在Bootstrap中,有三种设置控件尺寸的方法,一种是让控件成为块级元素,一种是使用相对尺寸,一种是使用网格尺寸. 1.让控件成为块级元素如果想让控件像块级元素一样占满容器,就可以为它添加 .in ...

bootstrap 表单样式

bootstrap 表单样式相关推荐

最新文章

热门文章