按钮
按钮样式
| 类 | 背景颜色 | 描述 |
|---|---|---|
| btn btn-default | 白色 | 带渐变的默认灰色按钮。 |
| btn btn-primary | 深蓝色 | 在一组按钮中的主动作按钮。 |
| btn btn-success | 绿色 | 替代默认按钮。 |
| btn btn-info | 浅蓝色 | 成功或正确的行动。 |
| btn btn-warning | 橙色 | 表明此操作应注意。 |
| btn btn-danger | 红色 | 表示危险或潜在的负面行为。 |
| btn btn-link | 使按钮看起来像一个链接。 |
button、input、a 标签可用
```
Default
Default
Default
```
##### 按钮尺寸
btn-lg 、 btn-sm 、btn-xs
按钮 辅助类
- btn-block将使按钮跨越整个网格
- active将使按钮看起来像它当前点击
- disabled将使按钮无法单击并显示渐变色。(btn,input 有
disabled="disabled")
按钮的活动状态
类 active disabled
属性 data-toggle="button" 状态切换
全宽按钮
块级别的按钮：btn-block
按钮 加载中
bootstrap.min.css
bootstrap-theme.min.css
jquery.min.js
bootstrap.min.js
<script>
$(function(){$(".btn").click(function(){$(this).button("loading").delay(1000).queue(function(){$(this).button("reset");$(this).dequeue();}); });
});
</script>
<div class="btn btn-danger" type="button" data-loading-text="loading...">Danger</div>
<div class="btn btn-success" type="button" data-loading-text="loading...">Success</div>
按钮下拉菜单
按钮下拉菜单
```
bootstrap.min.css
bootstrap-theme.min.css
jquery.min.js
bootstrap.min.js
div.row
div.col-xs-6
div.input-group
div.input-group-button
button.btn.btn-default.dropdown-toggle[type=button][data-toggle]="dropdown"
Action
span.caret
ul.dropdown-menu(.pull-right)
li a[href=#]{Action}
li.divider
li a[href=#]{Another action}
input.form-control[type=text]
div.col-xs-6
...
...
...
##### 分段下拉按钮组
<img src="//tva3.sinaimg.cn/large/005zbIM7gy1g0ryhe2u7rj30e101amwy.jpg" alt="img">
<img src="//tva3.sinaimg.cn/large/005zbIM7gy1g0ryinaippj30e404eglj.jpg" alt="img">
bootstrap.min.css
bootstrap-theme.min.css
jquery.min.js
bootstrap.min.js
div.input-group
div.input-group-btn
button.btn.btn-default[type=button][tabindex=-1]{Action}
button.btn.btn-default.dropdown-toggle[type=button][tabindex=-1][data-toggle=dropdown]
span.caret
span.sr-only{Toggle Dropdown}
ul.dropdown-menu
li a[href=#]{Action}
li.divider
li a[href=#]{Separated link}
input.form-control[type=text]
tabindex="-1" tabindex属性设为负值，那么标签将被排除在TAB键的序列之外。
.sr-only{you can't see} 只在屏幕阅读器上显示(帮助残障人士)
#### 按钮组
[按钮组-实现链接](https://www.w3cschool.cn/bootstrap/html-css-bootstrap-button-group.html)
##### 水平按钮组
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g0rzwklwxkj305901awe9.jpg" alt="img">bootstrap.min.css
div.btn-group
button.btn.btn-primary[type=button]{Left}
button.btn.btn-primary[type=button]{Middle}
button.btn.btn-primary[type=button]{Right}
##### 垂直按钮组
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g0rzxk66e0j302o03c742.jpg" alt="img">
bootstrap.min.css
div.btn-group-vertical
button.btn.btn-primary[type=button]{Top}
button.btn.btn-primary[type=button]{Middle}
button.btn.btn-primary[type=button]{Bottom}
##### 按钮工具栏
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g0rzyq2vstj308801i3ya.jpg" alt="img">
bootstrap.min.css
div.btn-toolbar
div.btn-group
button.btn.btn-primary[type=button]{1-4} * 4
div.btn-group
button.btn.btn-primary[type=button]{5-7} * 3
div.btn-group
button.btn.btn-primary[type=button]{8}
##### 按钮组的高度
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g0rzzejdelj306z05r3yf.jpg" alt="img">
bootstrap.min.css
div.btn-toolbar
div.btn-group.btn-group-lg
button.btn.btn-primary{Left}
button.btn.btn-primary{Middle}
button.btn.btn-primary{Right}
br
div.btn-toolbar
div.btn-group
button3
br
div.btn-group.btn-group-sm
button3
br
div.btn-group.btn.group-xs
button*3
没有 btn-toolbar 按钮组上下会没有间隙
没有 btn-group,只有btn-group-lg 按钮左右有间隙
##### 在组中对齐按钮(按钮伸展以跨越其父类的整个宽度)<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g0s00nyo69j30t601lwea.jpg" alt="img">
bootstrap.min.css
div.btn-group.btn-group-justified
a.btn.btn-primary[href=#]{Left}
a.btn.btn-primary[href=#]{Middle}
a.btn.btn-primary[href=#]{Right}
button 需要单独封装在类 div.btn-group
div.btn-group.btn-group-justified
div.btn-group
button.btn.btn-primary[type=button]{Left}
div.btn-group
button.btn.btn-primary[type=button]{Middle}
div.btn-group
button.btn.btn-primary[type=button]{Right}
#### 按钮方法
##### 通过JS-loading
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g0t5o3dr1xj30dt037dfu.jpg" alt="img">
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g0t5y4tg6ij308x02s748.jpg" alt="img"></br><b>点击时loading</b>js css
css .nav a{outline: none;}
div.bs-example
div.tabbable
ul.nav.nav-tabs
li.active
a[data-toggle=tab][href=#tab1][data-loading-text=Loading...]{Section 1}
li
a[data-toggle=tab][href=#tab2][data-loading-text=Loading...]{Section 2}
li
a[data-toggle=tab][href=#tab3][data-loading-text=Loading...]{Section 3}
div.tab-content
div#tab1.tab-pane.active.fade.in
p{Some Words}
div#tab2.tab-pane.fade
p{Some Words}
div#tab3.tab-pane.fade
p{Some Words}
##### ().button('toggle') 点击切换状态
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g0t65kj659j30cn01cwei.jpg" alt="img"></br>
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g0t66q5dj4j301x01da9t.jpg" alt="img">
div#myButtons.bs-example
button.btn.btn-default{Default}
..
..
##### ().button('string')
- ().button('loading') [data-loading-text=""] 加载时，"Laoding...", 按钮将被禁用
- ().button('reset') 重置
- ().button('complete') [data-complete-text=""] 完成
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g0u0k6xgj0j30d501emx6.jpg" alt="img">
div#myButtons.bs-example
form[action=#][autocomplete=off]
button.btn.btndefault[type=button]{Default}
//button('complete') 时需要加属性
// [data-complete-text=Loading Completed]
...
....
autocomplete = on 存储填写记录，帮助填写表单
