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

1.图标使用

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

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

部分

Bootstrap图标、下拉菜单、按钮组、按钮式下拉菜单_第1张图片

所有图标查询 https://v3.bootcss.com/components/

2.下拉菜单

向下弹出

Bootstrap图标、下拉菜单、按钮组、按钮式下拉菜单_第2张图片

向上弹出

Bootstrap图标、下拉菜单、按钮组、按钮式下拉菜单_第3张图片

下拉菜单中的标题

Bootstrap图标、下拉菜单、按钮组、按钮式下拉菜单_第4张图片

分割线

Bootstrap图标、下拉菜单、按钮组、按钮式下拉菜单_第5张图片

禁用菜单

Bootstrap图标、下拉菜单、按钮组、按钮式下拉菜单_第6张图片

3. 按钮组

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

按钮的大小

Bootstrap图标、下拉菜单、按钮组、按钮式下拉菜单_第7张图片

...
...
...
...

嵌套下拉菜单

按钮组垂直排列

Bootstrap图标、下拉菜单、按钮组、按钮式下拉菜单_第8张图片

...

4.按钮式下拉菜单


5.分裂式按钮下拉菜单


尺寸

Bootstrap图标、下拉菜单、按钮组、按钮式下拉菜单_第9张图片


向上弹出

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

你可能感兴趣的:(Bootstrap,Bootstrap图标,下拉菜单,按钮组)