组件

项目中各种通用的 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>

触发器及选项的参数如下:

 视觉高度字体大小字体颜色补白背景色圆角大小
触发器36px16px#FFFFFF纵:10px
左:20px
右:15px
#ED65536px
选项纵: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>