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-* 类似的类可以为控件设置宽度。

这张图很好的解释了


wKioL1YOhEaTHv7CAAHT-at5dcE825.jpg

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

wKiom1YOhcri0p9LAAHaG38fMHg283.jpg

这时候你就会想他妈的到底用哪个,个瘪犊子,是不是,是个加一个-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.按钮wKioL1YOhQnR9gy_AAL6d_bjdXY398.jpg