按钮样式:

<!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按钮,按钮样式,大小设置