BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
布局组件
下拉按钮
<divclass="dropdown"> <buttonclass="btndropdown-toggle"id='drop1'data-toggle="dropdown"> 帮助<spanclass="caret"></span> </button> <ulclass="dropdown-menu"role="menu"aria-labelledby="drop1"> <lirole="presentation"> <arole="menuitem"tabindex="-1"href="#">关于我们</a> </li> <lirole="presentation"> <arole="menuitem"href="#">关于我们</a> </li> <lirole="presentation"> <arole="menuitem"href="#">关于我们</a> </li> <lirole="presentation"> <arole="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:上拉样式(给父类容器添加)
按钮组
<divclass="btn-group"role="toolbar"> <divclass="btn-groupbtn-group-lg"> <buttontype="button"class="btnbtn-default">按钮1</button> <buttontype="button"class="btnbtn-default">按钮2</button> <buttontype="button"class="btnbtn-default">按钮3</button> </div> <divclass="btn-groupbtn-group-sm"> <buttontype="button"class="btnbtn-default">按钮4</button> <buttontype="button"class="btnbtn-default">按钮5</button> <buttontype="button"class="btnbtn-default">按钮6</button> </div> <divclass="btn-groupbtn-group-xs"> <buttontype="button"class="btnbtn-default">按钮7</button> <buttontype="button"class="btnbtn-default">按钮8</button> <buttontype="button"class="btnbtn-default">按钮9</button> </div> </div>
由多个按钮组构成的一个toolbar!
每个按钮组由一个div容器加.btn-group样式构成(同时可以搭配大小等其他样式)
每个按钮组中由几个按钮组成
利用按钮组和单独的下拉菜单构成分割下拉菜单
<divclass="btn-group"> <buttontype="button"class="btnbtn-defaultdropdown-togglebtn-lg"data-toggle="dropdown">默认 <spanclass="caret"></span> </button> <ulclass="dropdown-menu"role="menu"> <li> <ahref="#">功能</a> </li> <li> <ahref="#">另一个功能</a> </li> <li> <ahref="#">其他</a> </li> <liclass="divider"></li> <li> <ahref="#">分离的链接</a> </li> </ul> </div>
以上所述是小编给大家介绍的BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！