三分钟带你了解bootstrap下拉菜单
文章标签
带你
本篇文章给大家介绍一下bootstrap 按钮式下拉菜单。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
在按钮中加上.btn-group就可以作为按钮触发菜单了。
单按钮下拉菜单
在按钮中做一些改变,就可以作为下拉菜单。
<div> <button> 示例<span></span> </button> <ul> <li><a>列表1</a></li> <li><a>列表2</a></li> <li> <li><a>列表3</a></li> </ul> </div>
分裂式列表下拉菜单
与单按钮下拉菜单极为相似,不同的是分裂式的多一个按钮。
<div> <button>示例</button> <button> <span></span> <span>示例</span>//为了残障人士设计,不影响正常的阅读,屏幕阅读器能识别并阅读出来 </button> <ul> <li><a>列表1</a></li> <li><a>列表2</a></li> <li> <li><a>列表3</a></li> </ul></div>
尺寸
下拉菜单都支持尺寸操作,且支持不同尺寸大小。
<div> <button> 大尺寸菜单<span></span> </button> <ul> <li><a>列表1</a></li> <li><a>列表2</a></li> <li> <li><a>列表3</a></li> </ul> </div> <div> <button> 中等尺寸菜单<span></span> </button> <ul> <li><a>列表1</a></li> <li><a>列表2</a></li> <li> <li><a>列表3</a></li> </ul> </div> <div> <button> 小尺寸菜单<span></span> </button> <ul> <li><a>列表1</a></li> <li><a>列表2</a></li> <li> <li><a>列表3</a></li> </ul> </div>
推荐学习:Bootstrap视频教程