- BootStrap--from表单模式
表单的种类网上很多我不多赘诉,我包表单的模式总结了一下放在一个网页文件里面、
在附件里面:不能传html,改一下格式直接打开就好了
这里主要叙述一下样式什么的
包括大部分表单控件、文本输入域控件,还支持所有 HTML5 类型的输入控件: text
、password
、datetime
、datetime-local
、date
、month
、time
、week
、number
、email
、url
、search
、tel
和 color
。
要说的有:
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-*
类似的类可以为控件设置宽度。
这时候你就会想他妈的到底用哪个,个瘪犊子,是不是,是个加一个-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.按钮