BootStrap--from表单模式:总结

  1. BootStrap--from表单模式

表单的种类网上很多我不多赘诉,我包表单的模式总结了一下放在一个网页文件里面、

在附件里面:不能传html,改一下格式直接打开就好了

这里主要叙述一下样式什么的

包括大部分表单控件、文本输入域控件,还支持所有 HTML5 类型的输入控件: textpassworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor

要说的有:

1.状态

焦点状态:我们将某些表单控件的默认 outline 样式移除,然后对 :focus 状态赋予 box-shadow 属性。

<div class="bs-example">    
<form>      
<input class="form-control" id="focusedInput" value="Demonstrative focus state" type="text">   
 </form> 
 </div>

显示出阴影

然后还有只读,禁用状态

2.控制尺寸

通过 .input-lg 类似的类可以为控件设置高度,通过 .col-lg-* 类似的类可以为控件设置宽度。

这张图很好的解释了

您可以通过向 .input-group 添加相对表单大小的 class:
比如 .input-group-lginput-group-sminput-group-xs 来改变输入框组的大小。
输入框中的内容会自动调整大小。

这时候你就会想他妈的到底用哪个,个瘪犊子,是不是,是个加一个-lg,-sm,然后放在上面就可以啊

别光bb没用的。

先推荐几篇文章:

http://blog.csdn.net/jklfjsdj79hiofo/article/details/7976438

http://www.runoob.com/bootstrap/bootstrap-helper-classes.html

http://blog.jobbole.com/67276/

然后我再这样来:

打开bootstrap.css我们来搜索-lg

看看有哪些啊

先普及一下知识:

通过把两个类选择器

http://www.cnblogs.com/duanhuajian/archive/2012/12/17/2821524.html

CSS选择器里,“元素.类名” 与“类名.元素”有什么区别?

元素.类名
例如:p.abc{
                color:red;

            }
类名是abc的标签p的颜色是red

类名.元素
.abc p{
    color:red;
}
表示:类名abc的任何标签旗下的p标签颜色是red

下面是一些带-lg的类看一下 :挑出表单里一些常见的()

input-lg

.input-group-lg

.form-control-static.input-lg

.form-control-static.input-lg

select.input-lg

textarea.input-lg

select[multiple].input-lg

.form-group-lg .form-control
.form-group-lg select.form-control
.form-group-lg textarea.form-control,
.form-group-lg select[multiple].form-control

.form-group-lg .form-control-static
.input-lg + .form-control-feedback

.input-group-lg + .form-control-feedback,
.form-group-lg .form-control + .form-control-feedback

.form-horizontal .form-group-lg .control-label
.btn-lg

.btn-group-lg

.dropup .btn-lg .caret

.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn

select.input-group-lg > .form-control,
select.input-group-lg > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn

textarea.input-group-lg > .form-control,
textarea.input-group-lg > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn,
select[multiple].input-group-lg > .form-control,
select[multiple].input-group-lg > .input-group-addon,
select[multiple].input-group-lg > .input-group-btn > .btn
.input-group-addon.input-lg
.pagination-lg > li > a,
.pagination-lg > li > span

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span

.well-lg

.modal-lg

.visible-lg

.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block

table.visible-lg

tr.visible-lg

th.visible-lg,
  td.visible-lg

.visible-lg-inline

.hidden-lg

还有其他的控制尺寸:

1.按钮

时间: 2024-09-29 23:57:53

BootStrap--from表单模式:总结的相关文章

Bootstrap之表单控件状态

Bootstrap中的表单控件状态主要有三种:焦点状态,禁用状态,验证状态. 一.焦点状态:该状态告诉用户可输入或选择东西 焦点状态通过伪类“:focus”以实现. bootstrap.css相应源码: .form-control:focus { border-color: #66afe9; outline: 0; //删除了outline的默认样式 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 1

BootStrap 智能表单

背景:本码农.NET后端工程师,由于现在的公司后端能玩到的东西不怎么深入(一般也就sql.linq.反射.wcf....),所以申请玩玩前端的东西,在负责的一个电商项目中发现很大一部分是根据表结构来构建form表单的,而且模块还很多的,特别是表的列名都还没确定的时候需要先出界面,等后面表列名确定后又的重新来给表单元素加上id.name等,尼玛感觉这样下去就是一真正的码农了,于是自己整了一套根据配置来生成form表单的插件 源码地址(github):BootStrap智能表单 本系列将包括 1.表

BootStrap 智能表单系列 十 自动完成组件的支持

web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需要将产品的编号.产品的名称.产品的单价.产品的备注信息等填写会表单中的某个位置 代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-autocomplete.html): 自动完成

BootStrap 智能表单系列 十一 级联下拉的支持

像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然后通过关联来显示或隐藏与上一级别无关的项 感觉还是第二种简单一些,于是使用了第二种方式来实现的,其余的就不废话了 代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-cascade

BootStrap 智能表单系列 九 表单图片上传的支持

本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-img.html): 依赖jquery-file-upload插件,需要引用jquery.ui.widget.js.jquery.iframe-transport.js.jquery.fileload.js 调用global.Fn.InitPlugin('img',

Flask:03-你离最美的web只差一个:bootstrap与表单

bootstrap与表单 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的前端开发框架,使得 Web 开发更加快捷. Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的BreakingNews都使用了该项目.国内一些移动

Bootstrap+PHP表单验证实例

简单实用的Bootstrap+PHP表单验证实例,非常适合初学者及js不熟悉者,还有ajax远程验证 js验证表单 1 $(document).ready(function() { 2 $('#defaultForm') 3 .bootstrapValidator({ 4 message: 'This value is not valid', 5 feedbackIcons: { 6 valid: 'glyphicon glyphicon-ok', 7 invalid: 'glyphicon g

Bootstrap关于表单控件(按扭)

按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现:   ?  input[type=“submit”]   ?  input[type=“button”]   ?  input[type=“reset”]   ?  <button> 这里先让大家看看Bootstrap的按钮长成什么样: 表单控件的大小: 前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了

Bootstrap(4) 表单和图片

1.表单 基本格式,实现基本的表单样式 <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">电子邮件</label> <div class="col-sm-10"> <input type="email" c