按钮
使用button实现
基础样式：btn
<button class="btn">按钮</button>
.btn-default ??????默认/标准按钮
.btn-primary ????原始按钮样式（未被操作）
.btn-success ????表示成功的动作
.btn-info ????????????该样式可用于要弹出信息的按钮
.btn-warning ??????表示需要谨慎操作的按钮
.btn-danger ??????表示一个危险动作的按钮操作
.btn-link ??????????让按钮看起来像个链接 (仍然保留按钮行为)
例子
<body>
<button>原本按钮</button><br>
<input type="button" value="按钮"><br>
<button class="btn">加上btn类的按钮</button> <br>
<button class="btn btn-default">加上btn，btn-default类的按钮</button><br>
<button class="btn btn-primary">加上btn，btn-primary类的按钮</button><br>
<button class="btn btn-success">加上btn，btn-success类的按钮</button><br>
<button class="btn btn-info">加上btn，btn-info类的按钮</button><br>
<button class="btn btn-warning">加上btn，btn-warning类的按钮</button><br>
<button class="btn btn-danger">加上btn，btn-danger类的按钮</button><br>
<button class="btn btn-link">加上btn，btn-link类的按钮</button><br>
</body>
效果
多标签支持
使用 a div 等标签制作按钮
<body>
<button>原本按钮</button><br>
<input type="button" value="按钮"><br>
<span>span</span><br>
<span class="btn">带btn的span</span><br>
<button class="btn">加上btn类的按钮</button> <br>
<a href="#">我是超链接</a><br>
<a href="#" class="btn">我是带有btn的超链接</a><br>
<div>我是div</div><br>
<div class="btn">我是带有btn的div</div><br>
</body>
按钮大小
.btn-lg ?????制作一个大按钮
.btn-sm ????制作一个小按钮
.btn-xs ?????制作一个超小按钮
<button>原本按钮</button><br>
<input type="button" value="按钮"><br>
<button class="btn btn-lg">大按钮</button><br>
<button class="btn btn-sm">小按钮</button><br>
<button class="btn btn-xs">超小按钮</button><br>
按钮禁用
- 直接设置属性，在标签里加disabled
<button class="btn btn-danger "disabled="disabled" onClick="alert('Hello!')">禁用按钮 </button>
- 在元素标签中添加类名
<button class="btn btn-danger disabled">禁用按钮</button>
表单布局
水平表单
水平表单，请按下面的几个步骤进行
- 向父 form元素添加 class .form-horizontal。
- 把标签和控件放在一个带有 class .form-group 的 div 中。
- 向标签添加 class .control-label。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="jquery-1.12.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>无标题文档</title>
</head>
<body>
<form action="#" class="form-horizontal" role="form">
<div class="form-group">
<label for="uname" class="control-label col-md-3">姓名</label>
<div class="col-md-8">
<input type="text" id="uname" class="form-control" placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label for="upwd" class="control-label col-md-3">密码</label>
<div class="col-md-8">
<input type="password" id="upwd" class="form-control" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">爱好</label>
<label>
<div class="checkbox col-md-8">
<label><input type="checkbox" name="">唱歌</label>
</div>
<div class="checkbox col-md-8">
<label><input type="checkbox" name="">跳舞</label>
</div>
</label>
</div>
<div class="form-group">
<label for="upwd" class="control-label col-md-3">城市</label>
<div class="col-md-8">
<!--单选-->
<select class="form-control">
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
</select><br>
</div>
</div>
<div class="form-group">
<label for="text" class="control-label col-md-3">简介</label>
<div class="col-md-8">
<textarea id="text" class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-3 col-md-offset-6">
<button class="btn btn-primary">提交</button>
</div>
</div>
</form>
</body>
</html>
内联表单
如果需要创建一个内联表单，它的所有元素是内联的，向左对齐的，标签是并排的，向 form 标签添加 class .form-inline。
<form class="form-inline">
<div class="form-group">
<label for="Usename">姓名</label>
<input type="text" id="Usename" class="form-control" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="Userpwd">密码</label>
<input type="text" id="Userpwd" class="form-control" placeholder="请输入密码">
</div>
<div class="form-group">
<button class="btn btn-default">提交</button>
</div>
</form>