Bootstrap图标 下拉菜单 按钮组 按钮式下拉菜单

1.图标使用

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

.glyphicon 公共类 .glyphicon-search 相应的图标 aria-hidden="true" 意思是让图标只是显示，辅助设备不用读。

.sr-only类让其在视觉上表现出隐藏的效果

部分

所有图标查询/components/

2.下拉菜单

向下弹出

<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><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 class="dropup"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu2"><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>

下拉菜单中的标题

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">...<li class="dropdown-header">Dropdown header</li>...</ul>

分割线

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">...<li role="separator" class="divider"></li>...</ul>

禁用菜单

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4"><li><a href="#">Regular link</a></li><li class="disabled"><a href="#">Disabled link</a></li><li><a href="#">Another link</a></li></ul>

3. 按钮组

按钮颜色：btn-default btn-primary btn-success btn-info btn-warning btn-danger

<div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">Left</button><button type="button" class="btn btn-default">Middle</button><button type="button" class="btn btn-default">Right</button></div>

按钮的大小

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div><div class="btn-group" role="group" aria-label="...">...</div><div class="btn-group btn-group-sm" role="group" aria-label="...">...</div><div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

嵌套下拉菜单

<div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">1</button><button type="button" class="btn btn-default">2</button><div class="btn-group" role="group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">Dropdown link</a></li><li><a href="#">Dropdown link</a></li></ul></div></div>

按钮组垂直排列

<div class="btn-group-vertical" role="group" aria-label="...">...</div>

4.按钮式下拉菜单

<!-- Single button --><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <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>

5.分裂式按钮下拉菜单

<!-- Split button --><div class="btn-group"><button type="button" class="btn btn-danger">Action</button><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</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>

尺寸

<!-- Large button group --><div class="btn-group"><button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Large button <span class="caret"></span></button><ul class="dropdown-menu">...</ul></div><!-- Small button group --><div class="btn-group"><button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Small button <span class="caret"></span></button><ul class="dropdown-menu">...</ul></div><!-- Extra small button group --><div class="btn-group"><button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Extra small button <span class="caret"></span></button><ul class="dropdown-menu">...</ul></div>

向上弹出

<div class="btn-group dropup"><button type="button" class="btn btn-default">Dropup</button><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button><ul class="dropdown-menu"><!-- Dropdown menu links --></ul></div>

在学习过程中自己做一个全ui的demo，多测试多看官方文档上手非常容易。