Bootstrap4 菜鳥教程
- Bootstrap4 教程
- Bootstrap4 安裝使用
- Bootstrap4 網(wǎng)格系統(tǒng)
- Bootstrap4 文字排版
- Bootstrap4 顏色
- Bootstrap4 表格
- Bootstrap4 圖像形狀
- Bootstrap4 Jumbotron
- Bootstrap4 信息提示框
- Bootstrap4 按鈕
- Bootstrap4 按鈕組
- Bootstrap4 徽章
- Bootstrap4 進(jìn)度條
- Bootstrap4 分頁
- Bootstrap4 列表組
- Bootstrap4 卡片
- Bootstrap4 下拉菜單
- Bootstrap4 折疊
- Bootstrap4 導(dǎo)航
- Bootstrap4 導(dǎo)航欄
- Bootstrap4 面包屑導(dǎo)航
- Bootstrap4 表單
- Bootstrap4 表單控件
- Bootstrap4 輸入框組
- Bootstrap4 自定義表單
- Bootstrap4 輪播
- Bootstrap4 模態(tài)框
- Bootstrap4 提示框
- Bootstrap4 彈出框
- Bootstrap4 滾動(dòng)監(jiān)聽
- Bootstrap4 小工具
- Bootstrap4 Flex 布局
- Bootstrap4 多媒體對象
Bootstrap4 按鈕
按鈕是網(wǎng)站和應(yīng)用程序的組成部分。它們用于各種目的，例如提交或重置HTML表單，執(zhí)行交互操作，例如單擊按鈕即可在網(wǎng)頁上顯示或隱藏某些內(nèi)容，將用戶重定向到另一個(gè)頁面，等等。Bootstrap提供了一種快速簡便的方法來創(chuàng)建和自定義按鈕。
Bootstrap 4 提供了不同樣式的按鈕。
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </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> 元素上:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </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è)置邊框
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </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è)置按鈕的大?。?/p>
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>不同大小的按鈕</h2> <button type="button" class="btn btn-primary btn-lg">大號按鈕</button> <button type="button" class="btn btn-primary">默認(rèn)按鈕</button> <button type="button" class="btn btn-primary btn-sm">小號按鈕</button> </div> </body> </html>測試看看 ?/?
塊級按鈕
通過添加 .btn-block 類可以設(shè)置塊級按鈕：
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>塊級按鈕</h2> <button type="button" class="btn btn-primary btn-block">按鈕 1</button> <button type="button" class="btn btn-default btn-block">按鈕 2</button> <h2>大的塊級按鈕</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>小的塊級按鈕</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)擊。
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </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>測試看看 ?/?