Bootstrap4 按鈕

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

實例

<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>

按鈕類可用於 <a>, <button>, 或 <input> 元素上:

實例

<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="提交按鈕">

按鈕設置邊框

實例

<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>

不同大小的按鈕

Bootstrap 4 可以設置按鈕的大小：

實例

<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>

塊級按鈕

通過添加 .btn-block 類可以設置塊級按鈕：

實例

<button type="button" class="btn btn-primary btn-block">按鈕 1</button>

啟動和禁用的按鈕

按鈕可設置為啟動或者禁止點擊的狀態。

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

實例

<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>