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

Bootstrap5 按鈕

2023-06-21 15:15 更新

Bootstrap 5 提供了不同樣式的按鈕。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  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">危險(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> 元素上:

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

按鈕設(shè)置邊框

Bootstrap 5 也可以設(shè)置按鈕多邊框，鼠標(biāo)移動(dòng)到按鈕上添加突出到效果：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  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>按鈕設(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 5 可以設(shè)置按鈕的大小，使用 .btn-lg 類設(shè)置大按鈕，使用 .btn-sm 類設(shè)置小按鈕：

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

通過(guò)添加 .btn-block 類可以設(shè)置塊級(jí)按鈕，.d-grid 類設(shè)置在父級(jí)元素中：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  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>通過(guò)添加 .btn-block 類可以設(shè)置塊級(jí)按鈕，.d-grid 類設(shè)置在父級(jí)元素中：</p>
  <div class="d-grid">
    <button type="button" class="btn btn-primary btn-block">按鈕 1</button>
  </div>
</div>

</body>
</html>

如果有多個(gè)塊級(jí)按鈕，你可以使用用 .gap-* 類來(lái)設(shè)置：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  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>通過(guò)添加 .btn-block 類可以設(shè)置塊級(jí)按鈕，.d-grid 類設(shè)置在父級(jí)元素中：</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>

激活和禁用的按鈕

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

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

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

加載按鈕

我們也可以設(shè)置一個(gè)正在加載的按鈕。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  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)容是否對(duì)您有幫助：

← Bootstrap5 信息提示框

Bootstrap5 按鈕組 →

寫筆記

我要補(bǔ)充

查看完整版筆記

99re热视频这里只精品,久久久天堂国产精品女人,国产av一区二区三区,久久久精品成人免费看片,99久久精品免费看国产一区二区三区