Bootstrap 中表单和图片（二）

一、表单的基本框架

<!-- <form class="form-inline">  内联表单，让所有表单元素居于一行--><form class="form-horizontal"><div class="form-group"><label for="Email" class="col-sm-2 control-label">电子邮件</label><div class="col-sm-10"><input type="email" name="Email" class="form-control" placeholder="请输入您的电子邮件"></div></div><div class="form-group"><label for="PassWord" class="col-sm-2 control-label">密码</label><div class="col-sm-10"><input type="password" name="PassWord" class="form-control" placeholder="请输入您的密码"></div></div><div class="input-group"><div class="input-group-addon">￥</div><input type="text" class="form-control" name="" placeholder="请输入价格">        <div class="input-group-addon">元</div></div>  </form>

*在 form 上设置class*
.form-inline // 内联表单，左对齐浮动，表现为inline-block内联块结构 P.s.<768px，会恢复独占样式

.form-horizontal // 表单内元素保持水平排列,

*在 div 上设置class*

.form-group // 表单群组，类似块级模式

.input-group // 表单合组，input 配合 div.input-group-addon使用,保持在一行显示

*在 label 上设置class*

.control-label // 保持和父元素样式同步,居右对齐

二、复选框和单选框 (用法相同)

<div class="checkbox"><label><input type="checkbox"> 体育</label>
</div><div class="checkbox disabled"><label><input type="checkbox" disabled> 美术</label>
</div>

input放于label中，作用为点击文本也可视为选中。

*在 input和label外围添加div，上设置class*

.checkbox // 文字和input居中对齐，鼠标为手型，每一组为一行

.disabled // 禁用复选框，鼠标手型变为禁用样式

.radio // radio

<label class="checkbox-inline"><input type="checkbox"> 音乐
</label> <label class="checkbox-inline disabled"><input type="checkbox" disabled> 音乐
</label> <label class="radio-inline"><input type="radio" name="sex"> 女
</label><div class="radio disabled"><label><input type="radio" name="sex" disabled> 男</label>
</div>

*在 label 上设置class*

.checkbox-inline // 内联一行显示的复选框

.radio-inline // 内联一行显示的单选框

三、下拉列表

<select class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option>
</select>

.form-control // select 100% 显示，并且赋有样式

四、校验的状态

<div class="form-group has-success"><label for="Email" class="control-label">电子邮件</label><input type="email" name="Email" class="form-control" placeholder="请输入您的电子邮件">
</div>

*在 div 上设置class,与form-group同级存在*

.has-success // 成功状态

.has-error // 错误状态

.has-warning // 警告状态

*在 label 上设置class*

<label class="control-label"></label> // label标签同步相应的状态

五、添加额外的图标

<div class="form-group has-success has-feedback"><label for="Email" class="control-label">电子邮件</label><input type="email" name="Email" class="form-control" placeholder="请输入您的电子邮件"><span class="glyphicon glyphicon-ok form-control-feedbak"></span>
</div>

.has-feedback // 获取相对定位

.form-control-feedback // 获取绝对定位，并且与父元素标签同步相应的状态，即继承has-success样式

P.s.

.glyphicon-ok // 成功状态

.glyphicon-warning-sign // 警告状态

.glyphicon-remove // 错误状态

六、控制尺寸（从大到小）

*在 input 上设置class*

.input-lg

不设置样式

.input-sm

*也可在父元素上设置class来调整*

.form-group-lg

.form-group-sm

七、图片

*在 img 上设置class*

.img-rounded // 形状-圆角矩形

.img-circle // 形状-椭圆或者圆

.img-thumbnail // 形状-缩略提，加个边框和圆角矩形，边框有白色填充

.img-responsive // 响应式图片

转载于:https://www.cnblogs.com/rainy0496/p/6595267.html

Bootstrap 中表单和图片（二）相关推荐

Bootstrap ——排版、表格、表单、图片、button 学习博客（二）
Bootstrap中的排版 1. 排版标题部分文本部分对齐 .text-left :文字左对齐 .text-center :文字居中对齐 .text-right :文字右对齐 .text-low ...
Bootstrap之表格，按钮，表单和图片的样式
Bootstrap之表格,按钮,表单和图片的样式本文中,都是结合本人的学习Bootstrap时所做的练习,来理解通过内置的 CSS 定义,Bootstrap的表格,按钮,表单和图片是如何来显示各种丰 ...
【Bootstrap学习笔记】1.Bootstrap介绍、排版样式、表格和按钮、表单和图片
四.表单和图片学习内容: .form-control 表单群组内联表单表单合组水平排列复选框和单选框下拉列表校验状态添加额外图标控制大小图片 .form-control .form ...
layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
BootStrap 智能表单系列五表单依赖插件处理
这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...
bootstrap登录表单
介绍: bootstrap登录表单. 注册页面,带空值验证网盘下载地址: http://kekewangLuo.cc/7KKRVJCpNwd0 图片:
请使用recaptcha_如何在30分钟内使用ReCaptcha和PHP构建Bootstrap电子邮件表单
请使用recaptcha by Ondrej Svestka 通过Ondrej Svestka 如何在30分钟内使用ReCaptcha和PHP构建Bootstrap电子邮件表单 (How to bui ...
java多图片上传插件,Bootstrap中的fileinput 多图片上传及编辑功能
Bootstrap中的fileinput 多图片上传及编辑功能 2019-01-01 编程之家收集整理的这篇文章主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能,编程之家小编觉 ...
添加form表单_Django实战：如何使用djangocrispyforms美化Bootstrap 4表单
这是一个快速教程,可帮助您开始使用django-crispy-forms, 并且永不回头.Django-crispy-forms是一个很棒的第三方包,可让您控制渲染Django表单的方式,而不会破坏默 ...

Bootstrap 中表单和图片（二）

Bootstrap 中表单和图片（二）相关推荐

最新文章

热门文章

Bootstrap 中 表单和图片（二）

Bootstrap 中 表单和图片（二）相关推荐

最新文章

热门文章

Bootstrap 中表单和图片（二）

Bootstrap 中表单和图片（二）相关推荐