Bootstrap学习 Form
2014-05-27 11:20
134 查看
总觉得Form这个东西怎么弄都行,弄弄就知道越弄越难弄了。老实儿地学学bootstrap的做法吧,—.—!
如下html表现为label在上,input在下的样式。
form-group设置了margin,
form-control控制的input等输入控件设置了其width为100%,
这就导致了和label不在一条线上。
form设定样式form-inline并没有为form设定什么样式,而是用来定位里面的内容的
.form-inline .form-group被设置成为:display: inline-block;
.form-inline .form-control被设置成为: display: inline-block;
所以下面的HTML表现为所有的内容在一条线上。。。
下面的这个是小猿的最爱:
form设定form-horizontal样式同样没有设定什么样式,用来定位其它的样式
padding-top: 7px;
margin-top: 0;
margin-bottom: 0;
.form-horizontal .control-label {text-align: right;}
所以我们的label必须设定一个control-label的样式,且需要设定一个栅栏的宽度。。。
form-control设定了一个width:100%,所以我们的控件需要设定一个form-control,另外这个控件需要一个设置了栅栏宽度的div来包含。。。
so, it should be just like this:
表单相关的控件:
给一个输入文本框设置一个focus样式的话,需要设定一个border-color和一个box-shadow。。。
button
<button type="button" class="btn"> 默认样式,一下是其它样式,有一个btn-link有点意思。。。
btn btn-success
btn btn-info
btn btn-warning
btn btn-danger
btn btn-link
块级元素的button,挺好看的,占满整个容器的宽度。
我们可以为一个链接元素设置btn样式,表现的跟button一样,挺帅!
按钮的禁用是通过给button追加disabled="disabled"来实现的。
链接的禁用是通过给a追加.disabled样式来实现的。
border-radius: 50%; 挺好看哈~
图片相关的样式:
几个相当有意思的符号:
1 ×表现出来是一个×。
2 <span class="caret"></span>
caret的样式是这样设置的,表现出来就是一个上下的角号。
如下html表现为label在上,input在下的样式。
form-group设置了margin,
form-control控制的input等输入控件设置了其width为100%,
这就导致了和label不在一条线上。
<div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div>
form设定样式form-inline并没有为form设定什么样式,而是用来定位里面的内容的
.form-inline .form-group被设置成为:display: inline-block;
.form-inline .form-control被设置成为: display: inline-block;
所以下面的HTML表现为所有的内容在一条线上。。。
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <button type="submit" class="btn btn-default">Sign in</button> </form>
下面的这个是小猿的最爱:
form设定form-horizontal样式同样没有设定什么样式,用来定位其它的样式
.form-horizontal .control-label, .form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline {
padding-top: 7px;
margin-top: 0;
margin-bottom: 0;
} /* 这样设定跟.row的样式是一样的,所以可以直接在其内部设定col-sm-6等 */ .form-horizontal .form-group { margin-right: -15px; margin-left: -15px; }
.form-horizontal .control-label {text-align: right;}
所以我们的label必须设定一个control-label的样式,且需要设定一个栅栏的宽度。。。
form-control设定了一个width:100%,所以我们的控件需要设定一个form-control,另外这个控件需要一个设置了栅栏宽度的div来包含。。。
so, it should be just like this:
<form class="form-horizontal" role="form"> <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"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form>
表单相关的控件:
给一个输入文本框设置一个focus样式的话,需要设定一个border-color和一个box-shadow。。。
button
<button type="button" class="btn"> 默认样式,一下是其它样式,有一个btn-link有点意思。。。
btn btn-success
btn btn-info
btn btn-warning
btn btn-danger
btn btn-link
.btn-lg、
.btn-sm、
.btn-xs用来设定button的大小。
块级元素的button,挺好看的,占满整个容器的宽度。
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
我们可以为一个链接元素设置btn样式,表现的跟button一样,挺帅!
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
按钮的禁用是通过给button追加disabled="disabled"来实现的。
链接的禁用是通过给a追加.disabled样式来实现的。
border-radius: 50%; 挺好看哈~
图片相关的样式:
<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail"> <img src="..."alt="Responsive image" class="img-responsive">
几个相当有意思的符号:
1 ×表现出来是一个×。
2 <span class="caret"></span>
caret的样式是这样设置的,表现出来就是一个上下的角号。
border-top: 4px solid #000000; border-right: 4px solid transparent; border-bottom: 0 dotted; border-left: 4px solid transparent;
相关文章推荐
- [学习][记录][转]JS组件系列——Form表单验证神器: BootstrapValidator
- 学习使用bootstrap基本控件(table、form、button)
- Bootstrap初级学习(一)表单<form>
- 学习官方示例 - TApplication.CreateForm
- J2ME学习笔记(5)--Form类的学习
- Struts学习笔记: Html标签库学习(Form标签)
- Smart Form Tutorial(适用新手学习)
- Smart Form Tutorial(适用新手学习)
- 理解XForm——学习IBM DW的资料 (3)
- Prototype使用学习手册指南之form.js
- ExtJs学习笔记(19)_复杂Form示例
- 理解XForm——学习IBM DW的资料
- Ext JS 学习(6) Ext.FormPanel 组件的使用第三式(Combo的使用)
- EXTJS学习系列提高篇:第二十六篇(转载)作者殷良胜,ext2.2打造Ext.form.ComboBox系列--静态绑定
- Ext JS 学习(4) Ext.FormPanel 组件的使用第一式
- Spring 版的 JpetStore 中的 AccountFormController 学习笔记
- Struts学习笔记: Html标签库学习(Form标签)
- T5学习之Form的基本应用
- 学习官方示例 - TForm.BorderIcons
- Ext JS 学习(8) Ext.FormPanel 组件的使用第五式(FormPanel的综合使用,提交页面到后台)