Bootstrap與只包含圖像的選擇列表

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>