标签：style c class blog code java
总觉得Form这个东西怎么弄都行，弄弄就知道越弄越难弄了。老实儿地学学bootstrap的做法吧，—.—！
如下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;
Bootstrap学习 Form,布布扣,bubuko.com
标签：style c class blog code java
原文地址：http://www.cnblogs.com/voctrals/p/3754731.html
