免費AI編程助手
Bootstrap5 按鈕
2023-06-21 15:15 更新
Bootstrap 5 提供了不同樣式的按鈕。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<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>Bootstrap5 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<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>按鈕設置邊框
Bootstrap 5 也可以設置按鈕多邊框，鼠標移動到按鈕上添加突出到效果：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<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 5 可以設置按鈕的大小，使用 .btn-lg 類設置大按鈕，使用 .btn-sm 類設置小按鈕：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<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 類可以設置塊級按鈕，.d-grid 類設置在父級元素中：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<p>通過添加 .btn-block 類可以設置塊級按鈕，.d-grid 類設置在父級元素中：</p>
<div class="d-grid">
<button type="button" class="btn btn-primary btn-block">按鈕 1</button>
</div>
</div>
</body>
</html>如果有多個塊級按鈕，你可以使用用 .gap-* 類來設置：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<p>通過添加 .btn-block 類可以設置塊級按鈕，.d-grid 類設置在父級元素中：</p>
<div class="d-grid gap-3">
<button type="button" class="btn btn-primary btn-block">100% 寬度的按鈕</button>
<button type="button" class="btn btn-primary btn-block">100% 寬度的按鈕</button>
<button type="button" class="btn btn-primary btn-block">100% 寬度的按鈕</button>
</div>
</div>
</body>
</html>激活和禁用的按鈕
按鈕可設置為激活或者禁止點擊的狀態(tài)。
.active 類可以設置按鈕是可用的， disabled 屬性可以設置按鈕是不可點擊的。 注意 <a> 元素不支持 disabled 屬性，你可以通過添加 .disabled 類來禁止鏈接的點擊。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<h2>按鈕狀態(tài)</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>加載按鈕
我們也可以設置一個正在加載的按鈕。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<h2>加載按鈕</h2>
<p>按鈕添加正在加載按鈕:</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>以上內(nèi)容是否對您有幫助：
更多建議：