PHP前端开发

三分钟带你了解bootstrap下拉菜单

百变鹏仔 1个月前 (11-14) #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视频教程