閱讀(9.2k) 書簽贊(0) 我要糾錯(cuò)

Bootstrap4 按鈕

2018-05-28 14:50 更新

Bootstrap4上提供了不同樣式的按鈕，這些按鈕支持一系列上下文變量、尺寸、狀態(tài)等設(shè)置。

按鈕樣式：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</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">危險(xiǎn)</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> 元素上:

實(shí)例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  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" >
</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>

按鈕設(shè)置邊框：

需要一個(gè)按鈕，但是不要他們自帶的背景顏色？我們可以使用.btn-outline類來實(shí)現(xiàn)。

實(shí)例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  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" >
</head>
<body>
<div class="container">
  <h2>按鈕設(shè)置邊框</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">危險(xiǎn)</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 可以設(shè)置按鈕的大小，.btn-lg類可以設(shè)置大號(hào)按鈕，.btn-sm類可以設(shè)置小號(hào)按鈕。

實(shí)例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  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" >
</head>
<body>
<div class="container">
  <h2>按鈕大小</h2>
  <button type="button" class="btn btn-primary btn-lg">大號(hào)按鈕</button>
  <button type="button" class="btn btn-primary">默認(rèn)按鈕</button>
  <button type="button" class="btn btn-primary btn-sm">小號(hào)按鈕</button>
</div>
</body>
</html>

塊級(jí)按鈕

通過添加 .btn-block 類可以設(shè)置塊級(jí)按鈕：

實(shí)例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  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" >
</head>
<body>
<div class="container">
  <h2>塊級(jí)按鈕</h2>
  <button type="button" class="btn btn-primary btn-block">按鈕 1</button>
  <button type="button" class="btn btn-default btn-block">按鈕 2</button>
  <h2>大的塊級(jí)按鈕</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>小的塊級(jí)按鈕</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>

激活和禁用的按鈕

按鈕可設(shè)置為激活或者禁止點(diǎn)擊的狀態(tài)。

.active 類可以設(shè)置按鈕是可用的， disabled 屬性可以設(shè)置按鈕是不可點(diǎn)擊的。注意 <a> 元素不支持 disabled 屬性，你可以通過添加 .disabled 類來禁止鏈接的點(diǎn)擊。

實(shí)例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  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" >
</head>
<body>
<div class="container">
  <h2>按鈕狀態(tài)</h2>
  <button type="button" class="btn btn-primary">主要按鈕</button>
  <button type="button" class="btn btn-primary active">點(diǎn)擊后的按鈕</button>
  <button type="button" class="btn btn-primary" disabled>禁止點(diǎn)擊的按鈕</button>
  <a href="#" class="btn btn-primary disabled">禁止點(diǎn)擊的鏈接</a>
</div>
</body>
</html>

以上內(nèi)容是否對(duì)您有幫助：

← Bootstrap4 信息提示框

Bootstrap4 按鈕組 →

寫筆記

我要補(bǔ)充