如何将图像图标添加到Bootstrap选择选项 [英] How to Add Image Icon to Bootstrap Select Options

问题描述

只是想知道是否可以将图标/图像添加到Bootstrap Select Options.
我已经通过在这里

Just wonder if it is possible to add Icon/Image to Bootstrap Select Options.
I already tries this by adding background-image to options at HERE

<select class="span2">
            <option>1</option>
            <option style="background-image:url(slider-dot.png);">2</option>
            <option>3</option>
</select>

但是它不起作用！你能告诉我这是否可行吗? 谢谢

But it is not working! Can you please let me know if this is possible? Thanks

推荐答案

据我所知，您无法使用内置的引导程序设置将图标添加到选项元素.但是，有一个用于引导程序的插件，旨在执行此功能，还为引导选择的组件添加了其他自定义选项.这就是所谓的引导选择.

As far as I know you can't add icons to option elements using built-in bootstrap settings. However, there's a plugin built for bootstrap meant to do this functionality, also adding additional customization options to bootstrap select components. It's called bootstrap-select.

此插件使用的图标直接从bootstrap提供的Glyphicons中加载.

The icons used for this plugin are directly loaded from the Glyphicons provided by bootstrap.

• Git项目可以在这里找到: http://silviomoreto.github.io/bootstrap-select/
• 您还可以在此处找到功能的实时演示: http://silviomoreto.github.io/bootstrap-select/

• The Git Project can be found here: http://silviomoreto.github.io/bootstrap-select/
• You can also find a live demo of the functionality in here: http://silviomoreto.github.io/bootstrap-select/

请参见jsFiddle示例的链接: http://jsfiddle.net/YW8MV/5/

see link for jsFiddle example: http://jsfiddle.net/YW8MV/5/

相关的JavaScript是这样的:

The relevant JavaScript is this:

$('.selectpicker').selectpicker({
    style: 'btn-primary',
    showIcon: true,
    title: 'select test'
});

这篇关于如何将图像图标添加到Bootstrap选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！