BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
布局组件
下拉按钮
<div class="dropdown"> <button class="btn dropdown-toggle" id='drop1' data-toggle="dropdown"> 帮助<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#"> 关于我们 </a> </li> <li role="presentation"> <a role="menuitem" href="#"> 关于我们 </a> </li> <li role="presentation"> <a role="menuitem" href="#"> 关于我们 </a> </li> <li role="presentation"> <a role="menuitem" href="#"> 关于我们 </a> </li> </ul> </div>
要构建一个下拉菜单,首先,需要一个div加class(dropdown)来包容所有代码(不然下拉菜单定位找不到),然后在加一个触发下拉菜单的按钮(或者a标签),再加一个下拉菜单ul
触发者样式: .dropdown-toggle ; 属性:data-toggle=”dorpdown”
菜单样式: .dropdown-menu 属性:role=”menu” aria-labelledby='id'
其他:role=”presentation”; role=”menuitem”
样式: .divider 分割线; .dropdown-header:下拉菜单头部(不可点击); .dropdown-menu-right:向右对齐的菜单; .dropup:上拉样式(给父类容器添加)
按钮组
<div class="btn-group" role="toolbar"> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default">按钮 1</button> <button type="button" class="btn btn-default">按钮 2</button> <button type="button" class="btn btn-default">按钮 3</button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">按钮 4</button> <button type="button" class="btn btn-default">按钮 5</button> <button type="button" class="btn btn-default">按钮 6</button> </div> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">按钮 7</button> <button type="button" class="btn btn-default">按钮 8</button> <button type="button" class="btn btn-default">按钮 9</button> </div> </div>
由多个按钮组构成的一个toolbar!
每个按钮组由一个div容器加 .btn-group样式构成(同时可以搭配大小等其他样式)
每个按钮组中由几个按钮组成
利用按钮组和单独的下拉菜单构成分割下拉菜单
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">默认 <span class="caret"></span> </button> <ul class="dropdown-menu" role="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> </ul> </div>
相关推荐
Burgesszheng 2020-06-16
hqulyc 2020-02-13
chenjinlong 2020-02-13
安辉 2020-02-10
tuxlcsdn 2020-01-02
iflreey 2019-12-14
byn0 2011-08-07
追逐阳光的风 2019-06-13
kiduo0 2016-07-13
mwx 2012-08-21
vickya 2012-08-16
蓝蓝的天 2019-06-29
singlow 2019-06-28
zsh 2017-11-06
昔人已老 2016-11-07
zhaoyum 2019-06-27
laxexue 2019-06-26
bertZuo 2019-06-25
SuperMenyII 2019-06-21