bootstrap学习笔记
<div class="dropdown pull-right">//下拉列表里首先要放在一个大的dropdown里面
<button class="btn btn-primary" data-toggle="dropdown">更多选项 <span class="caret"></span></button>
//改下拉列表主按钮得有一个data-toggle="dropdown"用于实现下拉动作以及与列表联系起来的
<ul class="dropdown-menu">//dropdown-menu用于与主下拉列表联系起来
<li class=""><a href="">百度</a></li>
<li class=""><a href="">谷歌</a></li>
<li class=""><a href="">搜狐</a></li>
<li class=""><a href="">360</a></li>
<li class=""><a href="">必应</a></li>
</ul>
<\div>
2.按钮组：
<div class="btn-group">//按钮组必须把所有按钮放入btn-group里，若要实现垂直按钮组，则改为btn-group-vertical
<button class="btn btn-danger">百度</button>
<button class="btn btn-danger">百度</button>
<div class="btn-group">//若要在按钮组里实现下拉菜单，需要放进一个btn-group里
<div class="btn btn-danger dropdown-toggle" data-toggle="dropdown">百度 <span class="caret"> </span></div>
<ul class="dropdown-menu">
<li><a href="">百度</a></li>
<li><a href="">百度</a></li>
<li><a href="">百度</a></li>
<li class="divider"></li>
<li><a href="">百度</a></li>
<li><a href="">百度</a></li>
</ul>
</div>
</div>
两端对齐的按钮组嵌套下拉列表：
<div class="btn-group btn-group-justified">//两端对齐只要加入 btn-group-justified类，在里面所有按钮都要放入按钮组。
<div class="btn-group"><button class="btn btn-danger">lux</button></div>
<div class="btn-group"><button class="btn btn-danger">lux</button></div>
<div class="btn-group"><button class="btn btn-danger">lux</button></div>
<div class="btn-group"><button class="btn btn-danger">lux</button></div>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">lux <span class="caret"></span></button>//按钮下拉菜单与btn下拉菜单大同小异
<ul class="dropdown-menu">
<li><a href="">lux</a></li>
<li><a href="">lux</a></li>
<li><a href="">lux</a></li>
<li><a href="">lux</a></li>
<li><a href="">lux</a></li>
</ul>
</div>
</div>
网友评论