input-group子类排列
input-group-addon 存放一些符号或单位
form-horizontal清除了内边距
textarea文本域
rows默认展示的行数
disabled禁止样式
multiple 默认展示下拉框所有选项
form-control-static静态类
readonly只读状态
表单的颜色
has-success
has-error
has-warning在control-label、.form-control 和 .help-block才生效
form-control-feedback
input-lg input-sm控制input大小
btn设置为按钮 btn-default添加样式的颜色
active激活状态
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7-dist/css/bootstrap.css"/>
<title></title>
</head>
<body style="height: 2000px;">
<form>
<!-- input-group子类排列 -->
<!-- input-group-addon 存放一些符号或单位 -->
<div class="input-group">
<div class="input-group-addon">¥</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">元</div>
</div>
</form>
<!-- form-horizontal清除了内边距 -->
<form class="form-horizontal">
<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>
</form>
<hr >
<!-- textarea文本域 -->
<!-- rows默认展示的行数 -->
<textarea class="form-control" rows="3"></textarea>
<!-- disabled禁止样式 -->
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<input type="text" class="form-control" disabled>
<hr >
<!-- multiple 默认展示下拉框所有选项 -->
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<hr >
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<!-- form-control-static静态类 -->
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
<!-- readonly只读状态 -->
<input type="text" class="form-control" readonly name="" id="" value="" />
<!-- 表单的颜色
has-success
has-error
has-warning在control-label、.form-control 和 .help-block才生效-->
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<hr >
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input style="border-radius: 20px;" type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-search form-control-feedback" style="left: 0;" aria-hidden="true"></span>
<!-- form-control-feedback -->
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<!-- input-lg input-sm控制input大小 -->
<input type="text" class="form-control input-lg" name="" id="" value="" />
<input type="text" class="form-control" name="" id="" value="" />
<input type="text" class="form-control input-sm" name="" id="" value="" />
<hr >
<input type="button" name="" id="" value="按钮1" />
<button type="button">按钮2</button>
<div class="btn btn-default">按钮3</div>
<a href="" class="btn btn-default">按钮4</a>
<!-- btn设置为按钮 btn-default添加样式的颜色 -->
<div class="btn btn-primary">按钮5</div>
<div class="btn btn-success">按钮5</div>
<div class="btn btn-info">按钮5</div>
<div class="btn btn-lg btn-block btn-warning">按钮5</div>
<div class="btn btn-sm btn-danger">按钮5</div>
<div class="btn btn-xs btn-link">按钮5</div>
<!-- active激活状态 -->
<div class="btn btn-primary active" disabled>按钮6</div>
</body>
</html>