3, Bootstrap 按钮

按钮

按钮样式

类	背景颜色	描述
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 存储填写记录，帮助填写表单