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

最新推荐文章于 2024-11-28 12:11:47 发布

空谷丶幽兰

最新推荐文章于 2024-11-28 12:11:47 发布

阅读量1w

点赞数 1

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/yangaoyuan1999/article/details/111241188

版权

Bootstrap 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Bootstrap框架中关于按钮的样式和大小设置，包括不同风格的按钮和如何调整按钮尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按钮样式：

在这里插入图片描述

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

在这里插入图片描述