我正在尝试使用 HTML 和 JS 中的标志制作一个语言选择器按钮,但我得到的结果与我在此处找到的示例不匹配:https://codepen.io/brapastor/pen/BWyomB选择器选择器可以工作,但标志和外观不起作用。
请问我做错了什么?
<select class="selectpicker" data-width="fit">
<option data-content='<span class="flag-icon flag-icon-us"></span> English'>English</option>
<option data-content='<span class="flag-icon flag-icon-mx"></span> Español'>Español</option>
<script type='text/javascript'> $(function(){
$('.selectpicker').selectpicker();
});</script>
Codepen允许从外部源添加 CSS 和 Javascript 库,并且这些库不可见,除非您单击设置/齿轮链接来公开它们,以下是您应该如何包含它们:
$(function(){
$('.selectpicker').selectpicker();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>`
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<select class="selectpicker" data-width="fit">
<option data-content='<span class="flag-icon flag-icon-us"></span> English'>English</option>
<option data-content='<span class="flag-icon flag-icon-mx"></span> Español'>Español</option>
</select>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)