Question

我正在使用Twitter Bootstrap作为我的前端。我需要一个只有图像作为选项的选择输入组件。我只能用JQuery UI找到这样一个组件，它不是Bootstrap的一部分。 Boostrap有没有这样的组件？

Answer 1

Bootstrap-select组件具有您可以使用的data-content属性。见这个例子：

$(function() {
    $('.selectpicker').selectpicker();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://silviomoreto.github.io/bootstrap-select/css/base.css" rel="stylesheet"/>
<link href="https://silviomoreto.github.io/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://silviomoreto.github.io/bootstrap-select/dist/js/bootstrap-select.min.js">
<script src="https://silviomoreto.github.io/bootstrap-select/js/base.js"></script>
<select class="selectpicker">
    <option data-content='<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Gota07.svg/120px-Gota07.svg.png">'>Teardrop</option>
    <option data-content='<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Emblem-club.svg/120px-Emblem-club.svg.png">'>Club</option>
    <option data-content='<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Emblem-spade.svg/120px-Emblem-spade.svg.png">'>Spade</option>
    <option data-content='<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Luneta07.svg/120px-Luneta07.svg.png">'>Moon</option>
    <option data-content='<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Emblem-important-black.svg/120px-Emblem-important-black.svg.png">'>Exclamation</option>
</select>
<p style="padding-bottom: 100px"></p>

带有仅包含图像的选择列表的Bootstrap

1 个答案: