Bootstrap4 按鈕
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 類可以設置塊級按鈕：
激活和禁用的按鈕
按鈕可設置為激活或者禁止點擊的狀態。
.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>
嘗試一下 »