twitter-bootstrap Select2 4.0.0 Bootstrap 主题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29357917/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select2 4.0.0 Bootstrap theme
提问by Victor
In select2 4.0 version there is a theme option. However in the documentation I can't find what does the option mean and how can I create custom theme (https://select2.github.io/examples.html)
在 select2 4.0 版本中有一个主题选项。但是在文档中我找不到该选项的含义以及如何创建自定义主题（https://select2.github.io/examples.html）
I've found bootstrap 3 theme for select2, but it seems to be working only for 3.5 version.
我找到了 select2 的 bootstrap 3 主题，但它似乎只适用于 3.5 版本。
So I could I create custom theme for select2 latest version (4.0)? Basically I need bootstrap 3 styling preferably with LESS file
那么我可以为 select2 最新版本 (4.0) 创建自定义主题吗？基本上我需要引导 3 样式，最好使用 LESS 文件
回答by Kevin Brown
@fkis working on a Bootstrap 3 theme for Select2 4.0.0.
@fk正在为 Select2 4.0.0 开发 Bootstrap 3 主题。
https://github.com/select2/select2-bootstrap-theme
https://github.com/select2/select2-bootstrap-theme
There is not currently any documentation on creating themes for Select2 4.0.0, but it may help to look at the default theme's SCSSfor the selectors.
目前没有关于为 Select2 4.0.0 创建主题的任何文档，但查看选择器的默认主题的 SCSS可能会有所帮助。
回答by sr9yar
If you want to use bootstrap styling from Kevin Brown' answer
如果您想使用 Kevin Brown 的回答中的引导程序样式
https://github.com/select2/select2-bootstrap-theme
https://github.com/select2/select2-bootstrap-theme
You addthis css file to your page, keep the default select2 styles
您将此 css 文件添加到您的页面，保持默认的 select2 样式
<link href="/select2-bootstrap-theme/select2-bootstrap.min.css" type="text/css" rel="stylesheet" />Then set the theme
然后设置主题
$("#elem").select2({theme:"bootstrap"});Also, use classes .select2-bootstrap-prependand .select2-bootstrap-appendon the .input-group wrapper elements to group buttons and selects seamlessly.
此外，在 .input-group 包装元素上使用类.select2-bootstrap-prepend和.select2-bootstrap-append来无缝地对按钮和选择进行分组。
回答by TheLastCodeBender
You can also try this example from https://codepen.io/riyos94/pen/VyBdBz/
你也可以从https://codepen.io/riyos94/pen/VyBdBz/试试这个例子
<html>
<head>
<title>Using Select2</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div class="jumbotron">
<div class="container bg-danger">
<div class="col-md-6">
<label>Single Select2</label>
<select id="single" class="js-states form-control">
<option>Java</option>
<option>Javascript</option>
<option>PHP</option>
<option>Visual Basic</option>
</select>
</div>
<div class="col-md-6">
<label>Multiple Select2</label>
<select id="multiple" class="js-states form-control" multiple>
<option>Java</option>
<option>Javascript</option>
<option>PHP</option>
<option>Visual Basic</option>
</select>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
$("#single").select2({
placeholder: "Select a programming language",
allowClear: true
});
$("#multiple").select2({
placeholder: "Select a programming language",
allowClear: true
});
</script>
</body>
</html>
