1-17. Bootstrap 表单样式汇总

网站数据交互一般都是通过表单实现

Bootstrap中表单布局类型有哪些？

垂直表单
内联表单
水平表单

向父 <form> 元素添加 role="form"

把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。

向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control

垂直表单（基本表单样式）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link href="Bootstrap/css/bootstrap.css" rel="stylesheet" /><style type="text/css">table{width:100%;font-size: 18px;line-height: 45px;}td{min-width: 500px;}</style></head><body><div class="container"><form role="form"><div class="form-group"><label for="name">名称</label><input type="text" class="form-control" id="name" placeholder="请输入名称"></div><div class="form-group"><label for="inputfile">文件输入</label><input type="file" id="inputfile"><p class="help-block">这里是块级帮助文本的实例。</p></div><div class="checkbox"><label><input type="checkbox"> 请打勾</label></div><button type="submit" class="btn btn-default">提交</button></form></div><script src="Bootstrap/js/bootstrap.js"></script>  <script src="bootstrap/js/jquery-1.11.3.min.js"></script></body>
</html>

样式如下，

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline
默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度
使用 class .sr-only，您可以隐藏内联表单的标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link href="Bootstrap/css/bootstrap.css" rel="stylesheet" /><style type="text/css">table{width:100%;font-size: 18px;line-height: 45px;}td{min-width: 500px;}</style></head><body><div class="container"><form class="form-inline" role="form"><div class="form-group"><label for="name">名称</label><input type="text" class="form-control" id="name" placeholder="请输入名称"></div><div class="form-group"><label class="sr-only" for="inputfile">文件输入</label><input type="file" id="inputfile"></div><div class="checkbox"><label><input type="checkbox">请打勾</label></div><button type="submit" class="btn btn-default">提交</button></form></div><script src="Bootstrap/js/bootstrap.js"></script>   <script src="bootstrap/js/jquery-1.11.3.min.js"></script></body>
</html>

水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。

创建水平布局的表单步骤：

向父 <form> 元素添加 class .form-horizontal。
把标签和控件放在一个带有 class .form-group 的 <div> 中。
向标签添加 class .control-label

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link href="Bootstrap/css/bootstrap.css" rel="stylesheet" /><style type="text/css">table{width:100%;font-size: 18px;line-height: 45px;}td{min-width: 500px;}</style></head><body><div class="container"><form class="form-horizontal" role="form"><div class="form-group"><label for="firstname" class="col-sm-2 control-label">名字</label><div class="col-sm-10"><input type="text" class="form-control" id="firstname" placeholder="请输入名字"></div></div><div class="form-group"><label for="lastname" class="col-sm-2 control-label">姓</label><div class="col-sm-10"><input type="text" class="form-control" id="lastname" placeholder="请输入姓"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label><input type="checkbox">请记住我</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">登录</button></div></div></form></div><script src="Bootstrap/js/bootstrap.js"></script>    <script src="bootstrap/js/jquery-1.11.3.min.js"></script></body>
</html>

1-17. Bootstrap 表单样式汇总相关推荐

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

1-17. Bootstrap 表单样式汇总

1-17. Bootstrap 表单样式汇总相关推荐

最新文章

热门文章