JSRUN 用代码说话

按钮

编辑教程

按钮

Bootstrap4上提供了不同样式的按钮,这些按钮支持一系列上下文变量、尺寸、状态等设置。

按钮样式:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
  <h2>按钮样式</h2>
  <button type="button" class="btn">基本按钮</button>
  <button type="button" class="btn btn-primary">主要按钮</button>
  <button type="button" class="btn btn-secondary">次要按钮</button>
  <button type="button" class="btn btn-success">成功</button>
  <button type="button" class="btn btn-info">信息</button>
  <button type="button" class="btn btn-warning">警告</button>
  <button type="button" class="btn btn-danger">危险</button>
  <button type="button" class="btn btn-dark">黑色</button>
  <button type="button" class="btn btn-light">浅色</button>
  <button type="button" class="btn btn-link">链接</button>      
</div>
</body>
</html>

按钮类可用于 <a>, <button>, 或 <input> 元素上:

实例:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>按钮元素</h2>
  <a href="#" class="btn btn-info" role="button">链接按钮</a>
  <button type="button" class="btn btn-info">按钮</button>
  <input type="button" class="btn btn-info" value="输入框按钮">
  <input type="submit" class="btn btn-info" value="提交按钮"> 
</div>
</body>
</html>

按钮设置边框

需要一个按钮,但是不要他们自带的背景颜色?我们可以使用.btn-outline类来实现。

实例:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>按钮设置边框</h2>
  <button type="button" class="btn btn-outline-primary">主要按钮</button>
  <button type="button" class="btn btn-outline-secondary">次要按钮</button>
  <button type="button" class="btn btn-outline-success">成功</button>
  <button type="button" class="btn btn-outline-info">信息</button>
  <button type="button" class="btn btn-outline-warning">警告</button>
  <button type="button" class="btn btn-outline-danger">危险</button>
  <button type="button" class="btn btn-outline-dark">黑色</button>
  <button type="button" class="btn btn-outline-light text-dark">浅色</button>
</div>
</body>
</html>

按钮大小

Bootstrap 4 可以设置按钮的大小,.btn-lg类可以设置大号按钮,.btn-sm类可以设置小号按钮。

实例:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>按钮大小</h2>
  <button type="button" class="btn btn-primary btn-lg">大号按钮</button>
  <button type="button" class="btn btn-primary">默认按钮</button>
  <button type="button" class="btn btn-primary btn-sm">小号按钮</button>
</div>
</body>
</html>

块级按钮

通过添加 .btn-block 类可以设置块级按钮:

实例:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>块级按钮</h2>
  <button type="button" class="btn btn-primary btn-block">按钮 1</button>
  <button type="button" class="btn btn-default btn-block">按钮 2</button>
  <h2>大的块级按钮</h2>
  <button type="button" class="btn btn-primary btn-lg btn-block">按钮 1</button>
  <button type="button" class="btn btn-default btn-lg btn-block">按钮 2</button>
  <h2>小的块级按钮</h2>
  <button type="button" class="btn btn-primary btn-sm btn-block">按钮 1</button>
  <button type="button" class="btn btn-default btn-sm btn-block">按钮 2</button>
</div>
</body>
</html>

激活和禁用的按钮

按钮可设置为激活或者禁止点击的状态。

.active 类可以设置按钮是可用的, disabled 属性可以设置按钮是不可点击的。 注意 元素不支持 disabled 属性,你可以通过添加 .disabled 类来禁止链接的点击。

实例:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>按钮状态</h2>
  <button type="button" class="btn btn-primary">主要按钮</button>
  <button type="button" class="btn btn-primary active">点击后的按钮</button>
  <button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
  <a href="#" class="btn btn-primary disabled">禁止点击的链接</a>
</div>
</body>
</html>
JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟