- 浏览: 3420670 次
- 性别:
- 来自: 珠海
文章分类
- 全部博客 (1633)
- Java (250)
- Android&HTML5 (111)
- Struts (10)
- Spring (236)
- Hibernate&MyBatis (115)
- SSH (49)
- jQuery插件收集 (55)
- Javascript (145)
- PHP (77)
- REST&WebService (18)
- BIRT (27)
- .NET (7)
- Database (105)
- 设计模式 (16)
- 自动化和测试 (19)
- Maven&Ant (43)
- 工作流 (36)
- 开源应用 (156)
- 其他 (16)
- 前台&美工 (119)
- 工作积累 (0)
- OS&Docker (83)
- Python&爬虫 (28)
- 工具软件 (157)
- 问题收集 (61)
- OFbiz (6)
- noSQL (12)
最新评论
-
HEZR曾嶸:
你好博主,这个不是很理解,能解释一下嘛//左边+1,上边+1, ...
java 两字符串相似度计算算法 -
天使建站:
写得不错,可以看这里,和这里的这篇文章一起看,有 ...
jquery 遍历对象、数组、集合 -
xue88ming:
很有用,谢谢
@PathVariable映射出现错误: Name for argument type -
jnjeC:
厉害,困扰了我很久
MyBatis排序时使用order by 动态参数时需要注意,用$而不是# -
TopLongMan:
非常好,很实用啊。。
PostgreSQL递归查询实现树状结构查询
详细教程 http://www.runoob.com/bootstrap/bootstrap-forms.html
Bootstrap 内联表单 http://w3c.3306.biz/bootstrap_forms/show-25-56-1.html
内联表单
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
需要手动设置宽度
在 Bootstrap 中,输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单,我们将这些元素的宽度设置为 width: auto;,因此,多个控件可以排列在同一行。根据你的布局需求,可能需要一些额外的定制化组件。
一定要添加 label 标签
如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为 label 设置 .sr-only 类将其隐藏。
如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签添加 class .form-inline。
Bootstrap表单布局样式 http://www.cnblogs.com/ivan0626/p/4174350.html
Bootstrap 内联表单 http://w3c.3306.biz/bootstrap_forms/show-25-56-1.html
内联表单
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
需要手动设置宽度
在 Bootstrap 中,输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单,我们将这些元素的宽度设置为 width: auto;,因此,多个控件可以排列在同一行。根据你的布局需求,可能需要一些额外的定制化组件。
一定要添加 label 标签
如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为 label 设置 .sr-only 类将其隐藏。
如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签添加 class .form-inline。
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon">@</div> <input class="form-control" type="email" placeholder="Enter email"> </div> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button> </form>
Bootstrap表单布局样式 http://www.cnblogs.com/ivan0626/p/4174350.html
<form class="form-horizontal" role="form"> <fieldset> <legend>配置数据源</legend> <div class="form-group"> <label class="col-sm-2 control-label" for="ds_host">主机名</label> <div class="col-sm-4"> <input class="form-control" id="ds_host" type="text" placeholder="192.168.1.161"/> </div> <label class="col-sm-2 control-label" for="ds_name">数据库名</label> <div class="col-sm-4"> <input class="form-control" id="ds_name" type="text" placeholder="msh"/> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="ds_username">用户名</label> <div class="col-sm-4"> <input class="form-control" id="ds_username" type="text" placeholder="root"/> </div> <label class="col-sm-2 control-label" for="ds_password">密码</label> <div class="col-sm-4"> <input class="form-control" id="ds_password" type="password" placeholder="123456"/> </div> </div> </fieldset> <fieldset> <legend>选择相关表</legend> <div class="form-group"> <label for="disabledSelect" class="col-sm-2 control-label">表名</label> <div class="col-sm-10"> <select id="disabledSelect" class="form-control"> <option>禁止选择</option> <option>禁止选择</option> </select> </div> </div> </fieldset> <fieldset> <legend>字段名</legend> <div class="form-group"> <label for="disabledSelect" class="col-sm-2 control-label">表名</label> <div class="col-sm-10"> <select id="disabledSelect" class="form-control"> <option>禁止选择</option> <option>禁止选择</option> </select> </div> </div> </fieldset> </form>
发表评论
-
echart使用记录
2016-06-22 09:24 1810ECharts详细说明 http://elang0705.it ... -
jQuery Backstretch动态设置背景图片插件
2016-05-29 02:41 1563原文: http://www.2cto.com/kf/2014 ... -
自动 CSS 回归测试工具 BackstopJS
2016-05-03 09:48 1218http://www.oschina.net/p/backst ... -
用CSS开启硬件加速来提高网站性能
2016-04-19 09:06 1211http://www.cnblogs.com/PeunZhan ... -
css3旋转的大风车动画特效
2016-04-18 16:26 1281http://www.oschina.net/code/sni ... -
CSS实现垂直居中的常用方法
2016-04-15 13:32 1012http://my.oschina.net/agileai/b ... -
固定大小的div 自适应显示图片
2016-04-13 10:29 1451http://www.oschina.net/code/sni ... -
pageSwitch-支持121种过渡效果的JavaScript页面切换插件
2016-04-10 01:25 1606介绍: http://www.htmleaf.com/jQue ... -
CSS3效果或插件收集
2016-04-09 14:17 1637资源网站: 懒人之家 http://www.lanrenzh ... -
Dropzone JS 使用指南(文件拖拽上传)
2016-04-08 13:25 4424JavaScript 文件拖拽上传插件 dropzone.js ... -
纯CSS3多层云彩变换动画特效
2016-04-06 14:13 1015原文: http://hovertree.com/h/bjaf ... -
如何将页脚固定在页面底部
2016-04-05 10:36 1023http://www.w3cplus.com/css/css- ... -
纯CSS实现箭头,圆点, 三角形
2016-03-30 13:44 2047http://my.oschina.net/u/2362038 ... -
[HTML5]Notification桌面提醒功能
2016-03-23 21:20 996[HTML5]Notification桌面提醒功能 http: ... -
css3总结笔记
2016-03-18 11:50 540http://my.oschina.net/u/2460148 ... -
html上传图片之前在网页预览实现
2016-03-16 10:40 1038HTML5之FileReader的使用 http://blog ... -
20 个 CSS 高级技巧汇总
2016-03-16 10:11 1025http://my.oschina.net/u/2460148 ... -
CSS实现垂直居中的常用方法
2016-03-15 17:12 1047详细过程见原文http://www.cnblogs.com/y ... -
Jquery获取窗口高度
2016-03-15 12:48 961http://my.oschina.net/moks/blog ... -
三种三栏网页宽度自适应布局方法
2016-03-15 09:42 972http://my.oschina.net/zhangxuma ...
相关推荐
Bootstrap表单类型分为三种格式:垂直或基本表单、内联表单、水平表单。 垂直或基本表单(display:block;) 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤...
Bootstrap提供了多种表单样式,包括水平排列的表单和内联表单,以满足不同设计需求。这些表单可以通过添加特定的类来设置可选的图标,以增强用户体验,提供视觉反馈。本文将详细介绍如何在Bootstrap中为水平排列的...
Bootstrap框架提供了三种主要的表单布局方式:垂直表单(默认)、内联表单和水平表单,以适应不同的设计需求。 1. **垂直表单**(默认) 垂直表单是最常见的布局,其中标签位于输入框之上,形成一种垂直的阅读顺序...
在本文中,我们将详细介绍 Bootstrap 表单的示例代码,包括基本表单、内联表单、加入input-group-addon等多种样式。 基本表单 在Bootstrap中,基本表单是最基本的表单样式。下面是一个基本表单的示例代码: ```...
- **内联表单**:若希望表单元素排列在同一行,可以在`<form>`标签上添加`.form-inline`类。需要注意的是,内联表单中的控件通常需要设置宽度,以确保布局美观。同时,可以使用`.sr-only`类隐藏标签,使其对屏幕阅读...
基本的表单结构时BootStrap自带的,创建基本表单的步骤如下: 1、向父<form>元素添加role = “form”; 2、为了获取最佳的间距,把标签和控件放在一个div.form-group中,div放在父form下; 3、向所有的文本元素...
在本文中,我们将深入探讨Bootstrap中的表单布局,特别是垂直表单、内联表单和水平表单的创建方法。 **垂直表单**是最基础的表单样式,它的特点是输入框与对应的标签垂直排列。创建垂直表单,你需要遵循以下步骤: ...
此外,Bootstrap还支持其他高级表单功能,如表单验证、按钮组、下拉菜单等,可以与基础、水平或内联表单结合使用。表单验证可以通过添加`required`属性、自定义错误消息或使用JavaScript插件实现。按钮组和下拉菜单...
内联表单允许你将表单元素紧密排列在同一行内,通过添加`.form-inline`类到`<form>`标签实现。需要注意的是,由于Bootstrap的控件默认宽度为100%,所以要实现内联效果,需要为每个控件指定宽度。同时,内联表单的`...
内联表单的`.form-group`会变为内联块元素,且`.form-control`的宽度设置为`auto`,确保元素可以在一行内排列。 示例代码: ```html <form action="" class="form-inline"><div class="form-group">用户名:...
内联表单 水平表单 小妞妞做的表单实例: <!DOCTYPE html> <html> <head> <title>Bootstrap 教学意见调查表</title> <meta charset="utf-8"> <link rel="stylesheet" href...
Bootstrap4 表单 ... 内联表单:水平方向 Bootstrap 提供了两种类型的表单布局: 堆叠表单 以下实例使用两个输入框,一个复选框,一个提交按钮来创建堆叠表单: 实例 Email address: Password:
同时,Bootstrap还支持表单的水平和垂直布局,以及内联表单。 按钮是任何界面中的关键元素,Bootstrap提供了一系列预设的按钮样式,如`.btn`、`.btn-primary`、`.btn-success`等,这些按钮可以根据需要进行大小和...
案例中可能有多种表单布局,如内联表单、水平表单以及如何添加验证反馈。 6. **卡片(Cards)**:卡片是Bootstrap4引入的一个新组件,常用于展示内容,如图片、标题、文本等。案例中会展示卡片的不同变体,包括带有...
在Bootstrap中,表单布局有三种主要类型:垂直表单、内联表单和水平表单,每种都有其特定的应用场景和设计风格。 1. 垂直表单(Vertical Form): 垂直表单是最基础的布局方式,通常用于标准的多行表单,其中每个...