向Bootstrap按钮下拉项添加复选标记

Question

我正在使用Twitter bootstrap下拉按钮：

http://getbootstrap.com/components/#btn-dropdowns-single

我想在用户选择的列表项中添加复选标记（不一定是复选框）。是否已经内置了这样的风格，或者有人已经为此构建了解决方案吗？

谢谢！

Answer 1

这是一个不需要图标字体或图像的解决方案。这就是你需要的所有CSS：

.dropdown-item-checked::before {
  position: absolute;
  left: .4rem;
  content: '✓';
  font-weight: 600;
}

切换已检查状态

要添加/删除复选标记，只需在相应的dropdown-item-checked上切换dropdown-item修饰符：

<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Menu</button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Item 1</a>
    <a href="#" class="dropdown-item dropdown-item-checked">Item 2</a>
    <a href="#" class="dropdown-item">Item 3</a>
  </div>
</div>

这就是它的样子：

演示＆amp;源

演示：https://codepen.io/claviska/pen/aLxQgv

来源：https://www.abeautifulsite.net/adding-a-checked-state-to-bootstrap-4-dropdown-menus

Answer 2

这是一个使用Font Awesome图标的简单解决方案：http://www.bootply.com/oJgbiXIzBM

使用与http://getbootstrap.com/components/#btn-dropdowns-single相同的HTML

CSS是：

.active-tick a::after {
    content: '\f00c'; /* http://fontawesome.io/3.2.1/icon/ok/ */
    font-family: 'FontAwesome';
    float: right;
}

以下是选项互斥的例子：

$('li').click(function(e) {
    $(this).addClass('active-tick').siblings().removeClass('active-tick');
});

Answer 3

我不知道这个内置于引导程序中的任何内容。

Firefox和Webkit浏览器支持background-image元素上的option属性：

 <option style="background-image:url(check.gif);">Option</option>

否则，您将需要求助于jQuery解决方案。这是一个很好的：

http://www.marghoobsuleman.com/jquery-image-dropdown

Answer 4

我改编了claviska's great CSS-only answer，以便它使用带有2个带边框的边的旋转框来绘制它，并且比HTML实体提供的几何外观更加现代。

.dropdown-item-checked::before
{
position: absolute;
left: 0.8rem;
margin-top: 1px;
content: '';
width: 6px;
height: 12px;
border-bottom: 3px solid #333;
border-right: 3px solid #333;
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}