Bootstrap3 表单-水平排列的表单
通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
—–下面有个“顶”字,你懂得O(∩_∩)O哈哈~
—–乐于分享,共同进步!
—–更多文章请看:http://blog.csdn.net/duruiqi_fx
Bootstrap3 表单-水平排列的表单的更多相关文章
- Bootstrap中水平排列的表单form-inline
<html> <head> <title>初识Bootstrap</title> <meta charset="utf-8"& ...
- Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)
一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...
- Bootstrap3.0学习第六轮(表单)
Bootstrap3.0学习第六轮(表单) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.h ...
- bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类 [转]
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 线性表->链式存储->线形链表(单链表)
文字描述: 为了表示前后两个数据元素的逻辑关系,对于每个数据元素,除了存储其本身的信息之外(数据域),还需存储一个指示其直接后继的信息(即直接后继的存储位置,指针域). 示意图: 算法分析: 在单链表 ...
- sqlalchemy模块介绍、单表操作、一对多表操作、多对多表操作、flask集成.
今日内容概要 sqlalchemy介绍和快速使用 单表操作增删查改 一对多 多对多 flask集成 内容详细 1.sqlalchemy介绍和快速使用 # SQLAlchemy是一个基于 Python实 ...
- js实现表单验证 常用JS表单验证
CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:;margin:;} #he ...
- html 表单 dom 注意跟表单的name值一致
html 表单 dom 注意跟表单的name值一致 <script type="text/javascript"> function checkForm() { var ...
- ajax和servlet交互,表单日历插件,表单验证,form.js
我的index.jsp <body> <a>点我获取数据</a> <table border=1px> <tr> <td>ID& ...
随机推荐
- __new__方法首先调用并返回一个实例化对象
>>> class CapStr(str): def __new__(cls,string): string = string.upper() return str.__new__( ...
- jacascript 滚动 scroll 与回到顶部
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 滚动 scroll scrollHeight 表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分: ...
- WPF中自定义GridLengthAnimation
需求 我们想在编辑一个列表中某一个条目时,将编辑的详情内容也放置当前面,比如右侧. 可以通过将一个Grid,分成两个Cloumn,动态调整两个Cloumn的Width,就可以实现这个需求. 我们知道, ...
- 列表(list)之三 -如何较为均匀的将任意字符串按指定组数分组,方差最少
当字符串的长度不是份数的整数倍时如何均匀地分割,例如:长度为11的字符串要分割成4份,有很多种分法,比如3, 3, 3, 2(前3个字符一份,中间3个一份,再中间3个一份,最后2个一份)这种是比较均匀 ...
- java之设计模式工厂三兄弟之抽象工厂模式
[学习难度:★★★★☆,使用频率:★★★★★] 工厂方法模式通过引入工厂等级结构,解决了简单工厂模式中工厂类职责太重的问题,但由于工厂方法模式中的每个工厂只生产一类产品,可能会导致系统中存在大量的工 ...
- 在容器中运行 Jenkins pipeline 任务
持续集成中的 pipeline 技术和 docker 都是当前正在发展的主流方向,当然把它们结合起来在 CI/CD 过程中发挥出更强大的威力也是大家共同的目标.本文将介绍如何在 Jenkins pip ...
- [LeetCode] Dota2 Senate 刀塔二参议院
In the world of Dota2, there are two parties: the Radiant and the Dire. The Dota2 senate consists of ...
- [BZOJ 4361]isn
Description 题库链接 给出一个长度为 \(n\) 的序列 \(A\) .如果序列 \(A\) 不是非降的,你必须从中删去一个数,这一操作,直到 \(A\) 非降为止.求有多少种不同的操作方 ...
- [AtCoder arc090F]Number of Digits
Description 题库链接 记 \(d\) 在十进制下的位数为 \(f(d)\) .给出询问 \(S\) ,求有多少对 \((l,r)\) 使得 \[\sum_{i=l}^r f(i)=S\] ...
- [CQOI2013]棋盘游戏
Description 一个n*n(n>=2)棋盘上有黑白棋子各一枚.游戏者A和B轮流移动棋子,A先走. A的移动规则:只能移动白棋子.可以往上下左右四个方向之一移动一格. B的移动规则:只能移 ...