按钮:btn-default(默认)
btn-link(链接)
大小:btn-lg/sm/xs
状态:active(已经选择中的状态)/disable(禁用状态)
种类:a / input / button
例如:<a href="#" class="btn btn-primary">按钮</a>
<button class="btn btn-primary">按钮</button>
<input type="button" value="按钮" class="btn btn-primary">
块级:btn-block
按钮组(组合方式):btn-group / btn-group-justified(按钮组的端点对其)/ btn-group-vertical(把按钮组从横向转为纵向)
<div class="btn-group"> //把三个按钮变成了一个整体
<input type="button" value=" 按钮1" class="btn btn-primary">
<input type="button" value=" 按钮2" class="btn btn-primary">
<input type="button" value=" 按钮3" class="btn btn-primary">
</div>
使用btn-group-justified注意(a标签可以正常使用,input和button需要注意):
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">按钮1</a>
<a href="#" class="btn btn-primary">按钮2</a>
<a href="#" class="btn btn-primary">按钮3</a>
</div><br></br>
<div class="btn-group btn-group-justified">
//input和button要想使用btn-group-justified,必须给每个input或者button加一层容器,并且这层容器的class="btn-group";
<div class="btn-group">
<input type="button" value=" 按钮1" class="btn btn-primary">
</div>
<div class="btn-group">
<input type="button" value=" 按钮2" class="btn btn-primary">
</div>
<div class="btn-group">
<input type="button" value=" 按钮3" class="btn btn-primary">
</div>
</div>
btn-group-vertical:不需要和btn-group组合使用,自己单独使用就可以了(可以控制按钮的大小 btn-group-lg/sm/xs),a,input,button用法和a相同,不需要加容器,直接用
<div class="btn-group-vertical btn-group-lg">
<a href="#" class="btn btn-primary">按钮1</a>
<a href="#" class="btn btn-primary">按钮2</a>
<a href="#" class="btn btn-primary">按钮3</a>
</div>
如果只是按钮,a,input,button三种都没事问题,如果按钮中需要和图标组合使用,则用到最多的是a,button。input中不能添加图标。
<a href="#" class="btn btn-primary">按钮 <span class="caret"></span></a>
<button class="btn btn-primary">按钮 <span class="caret"></span></button>
按钮和图标分开的组合使用:(a和button用法相同,input仍不能满足需求)
<div class="btn-group">
<a href="#" class="btn btn-primary">按钮</a>
<a href="#" class="btn btn-primary"><span class="caret"></span></a>
</div>
向下的箭头,让他们变成向上,需要在父级中加上class="dropup"(dropdown)
<div class="btn-group dropup">
<a href="#" class="btn btn-primary">按钮</a>
<a href="#" class="btn btn-primary"><span class="caret"></span></a>
</div>
下拉菜单
属性:data-*(用来操作js,实现交互,js的触发器,与js有关 data-toggle="dropdown") aria-* role
aria-expanded="false" 默认状态下下拉菜单是收起来的,true是代表下拉菜单是展开的
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
dropdown-menu-right/left 让下拉的菜单靠右或者靠左
<div class="row">
<div class="col-lg-4">
<div class="dropdown open">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="dropdown open pull-right">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="dropdown open">
<button class="btn btn-default btn-block dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
下拉菜单(open 一开始的时候下拉菜单是展开的,dropdown-header : 菜单中头部分,划分两个部分的分割线为 class="divider")
上菜单(dropup),用法和下拉菜单相同
<div class="dropdown open">
<button class="btn btn-default btn-block dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li class="dropdown-header">第一部分</li>
<li class="active"><a href="#">Action</a></li> //默认是选中的
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">第二部分</li>
<li class="disabled"><a href="#">Action</a></li> //默认是禁用的
<li><a href="#">Another action</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
运动的菜单:
<style>
.my-btnStyle button{width:85px;height:35px;border:none; background: #ccc;}
.my-btnStyle .dropdown-menu{animation:0.3s linear imove;}
@keyframes imove{
0%{opacity: 0;transform:translateY(-20px); }
100%{opacity: 1;transform:translateY(0); }
}
</style>
<div class="dropdown my-btnStyle">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
导航1
<span class="caret"></span>
</button>
<ul class="dropdown-menu menu-width">
<li><a href="#"><span class="glyphicon glyphicon-pawn pull-left"></span>目录1</a></li>
<li><a href="#"><span class="glyphicon glyphicon-pawn pull-left"></span>目录2</a></li>
<li><a href="#"><span class="glyphicon glyphicon-pawn pull-left"></span>目录3</a></li>
</ul>
</div>