按钮样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible"content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本表单</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-primary">原始按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-info">信息按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-link">链接按钮</button>
</body>
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>
按钮大小：
| 类 | 描述 |
|---|---|
| .btn-lg | 大按钮 |
| .btn-sm | 小按钮 |
| .btn-xs | 超小按钮 |
| .btn-block | 创建块级按钮，会横跨父元素的全部宽度 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible"content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本表单</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body >
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-default btn-lg">大默认按钮</button>
<button class="btn btn-primary">原始按钮</button>
<button class="btn btn-primary btn-sm">小原始按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-success btn-xs">超小成功按钮</button>
<button class="btn btn-info">信息按钮</button>
<button class="btn btn-info btn-block">块级信息按钮</button>
</body>
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>
更多推荐
Bootstrap按钮,按钮样式,大小设置
发布评论