twitter-bootstrap 向 Bootstrap 按钮下拉项添加复选标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21286887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding check marks to Bootstrap button drop-down items
提问by user3216489
I am using Twitter bootstrap drop down button:
我正在使用 Twitter 引导程序下拉按钮：
http://getbootstrap.com/components/#btn-dropdowns-single
http://getbootstrap.com/components/#btn-dropdowns-single
And I would like to add checkmarks (not necessarily checkboxes) to those list items that the user has selected. Is there style already built in do this or does someone already have a solution built for this?
我想为用户选择的那些列表项添加复选标记（不一定是复选框）。是否已经内置了样式来执行此操作，或者是否有人已经为此构建了解决方案？
Thanks!
谢谢！
回答by claviska
Here's a solution that doesn't require icon fonts or images. This is all the CSS you need:
这是一个不需要图标字体或图像的解决方案。这是您需要的所有 CSS：
.dropdown-item-checked::before {
position: absolute;
left: .4rem;
content: '?';
font-weight: 600;
}
Toggling the Checked State
切换选中状态
To add/remove a checkmark, just toggle the dropdown-item-checkedmodifier on the appropriate dropdown-item:
要添加/删除复选标记，只需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>
Here's what it looks like:
这是它的样子：
Demo & Source
演示和源代码
Demo: https://codepen.io/claviska/pen/aLxQgv
演示：https: //codepen.io/claviska/pen/aLxQgv
Source: https://www.abeautifulsite.net/adding-a-checked-state-to-bootstrap-4-dropdown-menus
来源：https: //www.abeautifulsite.net/adding-a-checked-state-to-bootstrap-4-dropdown-menus
回答by mikeapr4
Here's a simple solution using a Font Awesome icon: http://www.bootply.com/oJgbiXIzBM
这是使用 Font Awesome 图标的简单解决方案：http: //www.bootply.com/oJgbiXIzBM
Using the same HTML as http://getbootstrap.com/components/#btn-dropdowns-single
使用与http://getbootstrap.com/components/#btn-dropdowns-single相同的 HTML
The CSS is:
CSS是：
.active-tick a::after {
content: '\f00c'; /* http://fontawesome.io/3.2.1/icon/ok/ */
font-family: 'FontAwesome';
float: right;
}
And here's an example of mutually exclusive ticks on the options:
这是选项上互斥刻度的示例：
$('li').click(function(e) {
$(this).addClass('active-tick').siblings().removeClass('active-tick');
});
回答by Mister Epic
I don't know of anything built into the bootstrap for this.
我不知道引导程序中为此内置了任何内容。
Firefox and Webkit browser support the background-imageproperty on the optionelement:
Firefox 和 Webkit 浏览器支持元素background-image上的属性option：
<option style="background-image:url(check.gif);">Option</option>
Otherwise, you will need to resort to a jQuery solution. This is a nice one:
否则，您将需要求助于 jQuery 解决方案。这是一个不错的：
