bootstrap 按钮

标签：按钮   分析   案例   方向   自适应   内容   分组   trap   tar   

一、按钮工具栏（btn-toolbar）

<div class="btn-toolbar">

　　<div class="btn-group">

　　　　<button type="button" class="btn btn-default">

　　　　　　<span class="glyphicon glyphicon-star"></span><!--图标的引用-->

　　　　</button>

　　　　<button type="button" class="btn btn-default">

　　　　　　<span class="glyphicon glyphicon-ok"></span><!--图标的引用-->

　　　　</button>

　　</div>

</div>

二、按钮嵌套分组（实现导航效果，水平方向）

<div class="btn-group">

　　<button type="button"  class="btn btn-default">首页</button>

　　<button type="button" class="btn btn-default">产品展示</button>

　　　　<div class="btn-group">

　　　　　　<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

　　　　　　案例分析

　　　　　　<span class="caret"></span>

　　　　　　</button>

　　　　　　<ul class="dropdown-menu">

　　　　　　　　<li><a href="##">2010</a></li>

　　　　　　　　<li><a href="##">2012</a></li>

　　　　　　　　<li><a href="##">2014</a></li>

　　　　　　</ul>

　　</div>

</div>

 三、垂直分组(.btn-group-vertical)

<div class="btn-group-vertical">

　　<button type="button"  class="btn btn-default">首页</button>

　　<button type="button" class="btn btn-default">产品展示</button>

　　　　<div class="btn-group">

　　　　　　<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

　　　　　　案例分析

　　　　　　<span class="caret"></span>

　　　　　　</button>

　　　　　　<ul class="dropdown-menu">

　　　　　　　　<li><a href="##">2010</a></li>

　　　　　　　　<li><a href="##">2012</a></li>

　　　　　　　　<li><a href="##">2014</a></li>

　　　　　　</ul>

　　</div>

</div>

 添加样式style

.dropdown-menu{ left:100%;top:0}

 四、等分按钮（自适应分组按钮 .btn-group-justified）

 <div class="btn-wrap">

　　<div class="btn-group-justified">

　　<a herf="##">首页</a>

　　<a herf="##">产品展示</a>

　　</div>

</div>

五、按钮内容向上显示(.dropup)

<div class="btn-group ">

　　<button type="button"  class="btn btn-default">首页</button>

　　<button type="button" class="btn btn-default">产品展示</button>

　　　　<div class="btn-group dropup">

　　　　　　<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

　　　　　　案例分析

　　　　　　<span class="caret"></span>

　　　　　　</button>

　　　　　　<ul class="dropdown-menu">

　　　　　　　　<li><a href="##">2010</a></li>

　　　　　　　　<li><a href="##">2012</a></li>

　　　　　　　　<li><a href="##">2014</a></li>

　　　　　　</ul>

　　</div>

</div>

bootstrap 按钮

标签：按钮   分析   案例   方向   自适应   内容   分组   trap   tar   

原文地址：https://www.cnblogs.com/love-or/p/8893794.html