bootstrap学习（三）表单

基本实例：

from-group:可以是其内的标签排列更好

from-control：使标签宽度为100%

<form><div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button>
</form>

内联表单：表单在一行显示

form-inline: 其内标签水平排列

.form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

必须有label标签：如果不限让label显示。可以设置 .sr-only

<form class="form-inline"><div class="form-group"><label for="exampleInputName2">Name</label><input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"></div><div class="form-group"><label for="exampleInputEmail2">Email</label><input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"></div><button type="submit" class="btn btn-default">Send invitation</button>
</form>

水平排列：

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

将每一个 .form-group水平排列

control-label：将label和div 水平排列整齐

<form class="form-horizontal"><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>

posted @ 2019-05-04 18:22 巡山小妖N 阅读(...) 评论(...) 编辑收藏

bootstrap学习（三）表单相关推荐

Bootstrap学习之表单
表单单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 表单控件 <form class="mx-auto pt-5" style=&qu ...
表单识别（四）-基于深度学习的表单识别)-OCR
(论文研读后,感觉有用的一些笔记,主要是给自己记录) 论文:熊雨点,基于深度学习的表单识别系统的研究与实现基于深度学习的表单识别前言: 文档检测方法: 基于扩张卷积残差网络的表单文档定位方法: 扩 ...
【HTML】学习笔记——表单、框架
[HTML]学习笔记--表单.框架 HTML 表单表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入内容,比如:文本域(textarea).下拉列表.单选框(radio-buttons) ...
JeecgBoot学习_Online表单初体验
JeecgBoot学习Online表单初体验在这几个地方改起来在页面属性里选择类型再建一个商品表为了使得选择有树形结构我们修改这两处备注: 1.字典table 填写树控件对应的表名 { 例 ...
黄聪： Bootstrap之Form表单验证神器： BootstrapValidator（转）
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
【Html标签学习】表单标签
表单标签: 所有的表单内容,都要写在form标签里面核心属性:type,不同的type决定了该输入框的方式.外观.规则等等常见Type 明文:普通文本,type = "text" ...
Bootstrap样式之表单样式
表单基本表单 class="form-control":可以给<input>.<textarea>.<select>元素设置宽度为100% 示 ...
菜鸟教程学习——html5 表单
整理自:http://www.runoob.com/html/html5-form-attributes.html 表单中,输入框的内容提交后,仍有记忆:autocomplete=on www.run ...
【PHP学习】表单验证实现注册功能
上次学了一下最基本的语法,这次笔记中记录的是用上次学到的语法以及第一次的前端页面做表单验证,实现注册功能. 网页界面博客链接:PHP 学习之路(1)-- Simple Message 系统基础语法博 ...
前端学习之表单验证（超详细）
表单验证: 主要用于验证input框的非空或者类型是否正确. iView表单验证: 参数详解(html部分): <Form ref="form" :model="f ...

bootstrap学习（三）表单

bootstrap学习（三）表单

内联表单：表单在一行显示

水平排列：

bootstrap学习（三）表单相关推荐

最新文章

热门文章