bootstrap --- 按钮
生活随笔
收集整理的這篇文章主要介紹了
bootstrap --- 按钮
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<head><!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body style="padding:5px;"><p><!-- 標(biāo)準(zhǔn)按鈕樣式 --><button type="button" class="btn btn-default">默認(rèn)</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><!-- 表示危險(xiǎn)操作 --><button type="button" class="btn btn-danger">危險(xiǎn)</button><!-- 使其看起來(lái)向一個(gè)鏈接, 同時(shí)保持按鈕的行為 --><button type="button" class="btn btn-link">Link</button></p><p><button type="button" class="btn btn-primary btn-lg">大號(hào)按鈕</button><button type="button" class="btn btn-default btn-lg">大號(hào)按鈕</button></p><p><button type="button" class="btn btn-primary ">默認(rèn)按鈕</button><button type="button" class="btn btn-default ">默認(rèn)按鈕</button></p><p><button type="button" class="btn btn-primary btn-sm">小號(hào)按鈕</button><button type="button" class="btn btn-default btn-sm">小號(hào)按鈕</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><p><button type="button" class="btn btn-primary btn-lg btn-block"> 此按鈕為塊級(jí)元素</button><button type="button" class="btn btn-default btn-lg btn-block"> 此按鈕為塊級(jí)元素</button></p><p><button type="button" class="btn btn-primary btn-lg" disabled="disabled">主要按鈕</button><button type="button" class="btn btn-default btn-lg" disabled="disabled">按鈕</button></p><p><a href="#" class="btn btn-primary btn-lg disabled" role="button">主要鏈接</a><a href="#" class="btn btn-default btn-lg disabled" role="button">鏈接</a></p>
</body>
</html>
提交按鈕樣式
// 點(diǎn)擊提交之后顯示loading... 且按鈕變?yōu)榻脿顟B(tài) <button id='loading-btn' data-loading-text="Loading..." class="btn btn-primary"> 提交 </button> <script>$('#loading-btn').click(function (){var btn = $(this)btn.button('loading')}) </script> // data-loading-text:點(diǎn)擊之后的文本參考 https://v3.bootcss.com/css/#buttons
參考 《CSS高效開(kāi)發(fā)實(shí)戰(zhàn)》 P161~P163
總結(jié)
以上是生活随笔為你收集整理的bootstrap --- 按钮的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 如何解压.bz2文件包
- 下一篇： 万丰科技机器人排名_2020年全国机器人