Bootstrap按钮，按钮样式，大小设置

按钮样式：<!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,

空谷丶幽兰

10348人浏览 · 2020-12-15 21:49:20

空谷丶幽兰 · 2020-12-15 21:49:20 发布

按钮样式：

在这里插入图片描述

<!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>