我正在使用Twitter Bootstrap作为我的前端。我需要一个只有图像作为选项的选择输入组件。我只能用JQuery UI找到这样一个组件,它不是Bootstrap的一部分。 Boostrap有没有这样的组件?Bootstrap与只包含图像的选择列表
2
A
回答
3
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>
+2
当我运行代码片段...我没有看到任何图像!? – user465342 2016-09-01 00:39:06
+3
代码段不起作用。 – pizzamonster 2017-08-08 23:23:54
相关问题
- 1. 只选择包含值的列(Oracle - apex)
- 2. 包含图像内的选择矩形
- 3. 表与多个LINQ的选择包含
- 4. 显示图像与选择列表APEX
- 5. 选择不包含特定图像与jquery的元素
- 6. 的XPath选择包含表
- 7. 在列表视图中包含图像
- 8. XSLT选择与2包含
- 9. JQuery的:选择只包含 “ ”
- 10. 包含图像的Flexbox列
- 11. Bootstrap 3 - 将图像包裹在文本中 - 列表中未包含文本
- 12. Datagridview在表列中包含图像
- 13. Python如何从包含列表的列表中选择项目
- 14. C# - LINQ选择不同于包含列表的列表
- 15. MySQL选择列只包含集合中的值的行
- 16. CSS选择包含特定类只
- 17. 只有当它包含选择
- 18. 只包含图像的目标段落
- 19. MySql - 只选择包含序列化数据的单元格
- 20. MySQL如何只选择其中包含字符串的列
- 21. 一个选择只在列表视图
- 22. MySQL的:选择列,其中列包含从列表
- 23. 选择列表中最高的图像
- 24. Lambda表达式只选择包含某些产品的类别
- 25. 选择数据库只包含特定的表
- 26. 选择Oracle架构只包含特定的表
- 27. 如何创建一个只包含小于$ x的数字的选择列表
- 28. jQuery的搜索与:包含选择器
- 29. MySQL的选择与包含字符串
- 30. 硒IDE 1.9.1的XPath与包含选择
虽然有点臃肿,为什么不直接使用jQuery UI的它是否有你需要什么?你可以得到一个自定义的下载,所以你只包含特定的部分......并且我很犹豫,但是这是边界线题外 – Oberst 2014-09-26 22:42:03
@Oberst,因为它的外观与Bootstrap组件不同。它会看起来很丑! – 2014-09-26 23:04:19