Bootstrap按鈕
阿新 • • 發佈：2021-07-28
按鈕
可作為按鈕使用的標籤或元素
為<a>、<button>或<input>元素新增按鈕類（button class）即可使用 Bootstrap 提供的樣式。
<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit">
預定義樣式
使用下面列出的類可以快速建立一個帶有預定義樣式的按鈕。
<!-- Standard button --> <button type="button" class="btn btn-default">（預設樣式）Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons--> <button type="button" class="btn btn-primary">（首選項）Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">（成功）Success</button> <!-- Contextual button for informational alert messages --> <buttontype="button" class="btn btn-info">（一般資訊）Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">（警告）Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">（危險）Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">（連結）Link</button>
尺寸
需要讓按鈕具有不同尺寸嗎？使用.btn-lg、.btn-sm或.btn-xs就可以獲得不同尺寸的按鈕。
<p> <button type="button" class="btn btn-primary btn-lg">（大按鈕）Large button</button> <button type="button" class="btn btn-default btn-lg">（大按鈕）Large button</button> </p> <p> <button type="button" class="btn btn-primary">（預設尺寸）Default button</button> <button type="button" class="btn btn-default">（預設尺寸）Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">（小按鈕）Small button</button> <button type="button" class="btn btn-default btn-sm">（小按鈕）Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button> <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button> </p>
通過給按鈕新增.btn-block類可以將其拉伸至父元素100%的寬度，而且按鈕也變為了塊級（block）元素。
<button type="button" class="btn btn-primary btn-lg btn-block">（塊級元素）Block level button</button> <button type="button" class="btn btn-default btn-lg btn-block">（塊級元素）Block level button</button>
禁用狀態
button 元素
為<button>元素新增disabled屬性，使其表現出禁用狀態。
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button> <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
連結（<a>）元素
為基於<a>元素建立的按鈕新增.disabled類。
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css"> <script src="../js/jquery-3.3.1.min.js"></script> <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script> </head> <body> <a href="https://www.baidu.com/" class="btn btn-primary">首選項</a> <button class="btn btn-danger">危險</button> <button class="btn btn-default">預設樣式</button> <button class="btn btn-success">成功</button> <button class="btn btn-info">一般資訊</button> <button class="btn btn-warning">警告</button> <button class="btn btn-warning btn-lg">大按鈕</button> <button class="btn btn-warning btn-sm">小按鈕</button> <button class="btn btn-warning btn-xs">超小尺寸</button> <input type="submit" class="btn btn-primary btn-block"> <!-- 通過給按鈕新增 .btn-block 類可以將其拉伸至父元素100%的寬度，而且按鈕也變為了塊級（block）元素--> <button class="btn btn-warning" disabled="disabled">警告</button> <!-- 為 <button> 元素新增 disabled 屬性，使其表現出禁用狀態--> </body> </html>while True: print('studying...')