组件
项目中各种通用的 UI 组件的示例
下拉菜单
目录
示例
组件来自 Bootstrap 3，使用方法参见官方文档。
下拉菜单的容器的 class 既可以为 .dropdown 也可以为 .btn-group。为了符合语义，正常使用时要用 .dropdown，只有在不需要浮动并且不占用一行时才可以使用 .btn-group。
<!-- HTML -->
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);" tabindex="-1">选项一</a></li>
<li><a href="javascript:void(0);" tabindex="-1">选项二</a></li>
<li><a href="javascript:void(0);" tabindex="-1">选项三</a></li>
</ul>
</div>触发器及选项的参数如下：
| 视觉高度 | 字体大小 | 字体颜色 | 补白 | 背景色 | 圆角大小 | |
|---|---|---|---|---|---|---|
| 触发器 | 36px | 16px | #FFFFFF | 纵：10px左： 20px右： 15px | #ED6553 | 6px |
| 选项 | 纵：10px横： 20px | 正常：#FF7B69悬停： #ED6553 |
操作菜单
<!-- HTML -->
<div class="YY-DropDown--upon glyphicon glyphicon-cog">
<ul class="YY-DropDown-list">
<li><a href="#">下架</a></li>
<li><a href="#">结课</a></li>
<li><a href="#">删除</a></li>
</ul>
</div>