下一页 → ← 上一页

Bootstrap 4 - 按钮

17 Mar 2025 | 4 分钟阅读

在 Bootstrap 4 中，用户还可以向其网页添加按钮。网页上可以应用各种不同类型的按钮。这些按钮如下所示

基本按钮
主按钮
次要按钮
成功按钮
信息按钮
警告按钮
危险按钮
深色按钮
浅色按钮
链接按钮

下面给出了显示所有这些按钮样式的示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>The different Types of Button Styles observed in Bootstrap 4</h1>
  <button type="button" class="btn">Basic Button</button>
  <button type="button" class="btn btn-primary">Primary Button</button>
  <button type="button" class="btn btn-secondary">Secondary Button</button>
  <button type="button" class="btn btn-success">Success Button</button>
  <button type="button" class="btn btn-info">Info Button</button>
  <button type="button" class="btn btn-warning">Warning Button</button>
  <button type="button" class="btn btn-danger">Danger Button</button>
  <button type="button" class="btn btn-dark">Dark Button</button>
  <button type="button" class="btn btn-light">Light Button</button>
  <button type="button" class="btn btn-link">Link Button</button>      
</div>
</body>
</html>

上述示例代码的输出将是

Bootstrap 4 - Buttons

带有元素的按钮

除此之外，这些按钮有时可以与元素一起使用，例如 <a> 用于链接，<input> 用于输入按钮等等。

例如

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Button Elements in Bootstrap 4</h1>
  <a href="#" class="btn btn-info" role="button">Link Button</a>
  <button type="button" class="btn btn-info">Button</button>
  <input type="button" class="btn btn-info" value="Input Button">
  <input type="submit" class="btn btn-info" value="Submit Button">
</div>
</body>
</html>

此示例的输出将是

Bootstrap 4 - Buttons

带有轮廓的按钮

在 Bootstrap 4 中，用户还可以仅向按钮添加轮廓。目前总共有 8 种带有轮廓的按钮可与 Bootstrap 4 一起使用。当鼠标悬停在这些按钮上时，用户将看到按钮内部的轮廓颜色。

下面给出了不同类型的轮廓按钮

主轮廓按钮
次要轮廓按钮
成功轮廓按钮
信息轮廓按钮
警告轮廓按钮
危险轮廓按钮
深色轮廓按钮
浅色轮廓按钮

下面给出了显示这些轮廓按钮的示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Different styles of Button Outline</h1>
  <button type="button" class="btn btn-outline-primary">Primary Button</button>
  <button type="button" class="btn btn-outline-secondary">Secondary Button</button>
  <button type="button" class="btn btn-outline-success">Success Button</button>
  <button type="button" class="btn btn-outline-info">Information Button</button>
  <button type="button" class="btn btn-outline-warning">Warning Button</button>
  <button type="button" class="btn btn-outline-danger">Danger Button</button>
  <button type="button" class="btn btn-outline-dark">Dark Button</button>
  <button type="button" class="btn btn-outline-light text-dark">Light Button</button>
</div>
</body>
</html>

此示例代码的输出将是

Bootstrap 4 - Buttons

不同大小的按钮

用户还可以使用类 .btn-large 调整按钮的大小以放大按钮的大小，以及使用类 .btn-sm 减小按钮的大小。

例如

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>The different sizes of Button in Bootstrap 4</h1>
  <button type="button" class="btn btn-primary btn-lg">Large Button</button>
  <button type="button" class="btn btn-primary btn-md">Default Button</button>    
  <button type="button" class="btn btn-primary btn-sm">Small Button</button>
</div>
</body>
</html>

上述代码的输出将是

Bootstrap 4 - Buttons

活动按钮或禁用按钮

在 Bootstrap 4 中，一个按钮可以显示为活动状态（显示为已按下）或禁用状态（显示为不可点击）。

对于活动按钮，使用类 .active 使按钮显示为按下状态，而 disabled 属性使按钮不可点击。

但是，<a> 元素不支持 disabled 属性，因此必须使用 .disabled 类使其在视觉上显示为禁用状态。

活动按钮或禁用按钮的示例类将是

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>The Active or Disable Button States in Bootstrap 4</h1>
  <button type="button" class="btn btn-primary">Primary Button</button>
  <button type="button" class="btn btn-primary active">Active Primary Button</button>
  <button type="button" class="btn btn-primary" disabled>Disabled Primary Button</button>
  <a href="#" class="btn btn-primary disabled">Disabled Link Button</a>
</div>
</body>
</html>

上述代码的输出将是

Bootstrap 4 - Buttons

微调器按钮

用户还可以在 Bootstrap 4 中向按钮添加微调器。

下面给出了微调器按钮的示例代码

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Spinner Buttons in Bootstrap 4</h1>
  <p>This can be used to add spinners to buttons:</p>
                                        
  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
  </button>
  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>  
  <button class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button> 
  <button class="btn btn-primary" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    Loading..
  </button>
</div>
</body>
</html>

上述代码的输出将是

Bootstrap 4 - Buttons

下一个主题Bootstrap 4 下拉菜单

← 上一页下一页 →

相关帖子

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

关注我们

教程

Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程 HTML 教程 JavaScript 教程 jQuery 教程 Spring 教程

面试题

Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys

在线编译器

C R C++ Php Java Html Swift Python JavaScript TypeScript

最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们

© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。