按钮Button
一、按钮Button介绍
-
.btn
-
颜色：.btn-default、.btn-primary、.btn-success、.btn-warning、.btn-danger
-
大小：.btn-lg、.btn-sm、.btn-xs、.btn-block
-
其他：.active、.disabled
二、代码实战
代码的详细解读，可以参考视频教程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="./res/bootstrap.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="./res/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./res/bootstrap.min.js"></script>
</head>
<body style="padding: 50px;">
<h1>Form表单中的按钮</h1>
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="control-label col-md-2">名字</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">颜色分按钮</label>
<div class="col-md-8">
<button class="btn btn-primary">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-warning">按钮</button>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">大小分按钮</label>
<div class="col-md-8">
<button class="btn btn-primary btn-lg">按钮</button>
<button class="btn btn-success btn-sm">按钮</button>
<button class="btn btn-danger btn-xs">按钮</button>
<button class="btn btn-warning btn-block">按钮</button>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">是否可用</label>
<div class="col-md-8">
<button class="btn btn-primary btn-lg disabled" >按钮</button>
<button class="btn btn-success btn-sm active" >按钮</button>
</div>
</div>
</form>
</body>
</html>