Select2 4.0.0 引导主题答案

【问题标题】：Select2 4.0.0 Bootstrap themeSelect2 4.0.0 引导主题
【发布时间】：2015-06-04 03:49:45
【问题描述】：

在select2 4.0 版本中有一个主题选项。但是在文档中我找不到该选项的含义以及如何创建自定义主题 (https://select2.github.io/examples.html)

我找到了 select2 的 bootstrap 3 主题，但它似乎只适用于 3.5 版本。

所以我可以为 select2 最新版本 (4.0) 创建自定义主题吗？基本上我需要引导 3 样式，最好使用 LESS 文件

【问题讨论】：

标签： twitter-bootstrap jquery-select2

【解决方案1】：

@fk 正在为 Select2 4.0.0 开发 Bootstrap 3 主题。

https://github.com/select2/select2-bootstrap-theme

目前没有任何关于为 Select2 4.0.0 创建主题的文档，但查看选择器的 default theme's SCSS 可能会有所帮助。

【讨论】：

好的，谢谢。实际上我选择了另一个插件，因为我遇到了一些麻烦（如果我没记错的话）自适应设计问题。但无论如何，谢谢
如果我可以问你选择了哪个插件？谢谢
@Victor 你最终使用了哪个插件？

【解决方案2】：

如果您想使用 Kevin Brown 回答中的引导样式

https://github.com/select2/select2-bootstrap-theme

你添加这个css文件到你的页面，保持默认的select2样式

&lt;link href="/select2-bootstrap-theme/select2-bootstrap.min.css" type="text/css" rel="stylesheet" /&gt;

然后设置主题

$("#elem").select2({theme:"bootstrap"});

Also，使用 .input-group 包装器元素上的类 .select2-bootstrap-prepend 和 .select2-bootstrap-append 对按钮进行分组并无缝选择.

【讨论】：

【解决方案3】：

你也可以从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>

【讨论】：

【解决方案4】：

官方 select2 网站上也提到了 bootstrap 4 的官方支持主题

主题的 Git 仓库

https://github.com/ttskch/select2-bootstrap4-theme

现场演示

https://ttskch.github.io/select2-bootstrap4-theme/

使用 CLI 安装

# npm
$ npm install @ttskch/select2-bootstrap4-theme

# yarn
$ yarn add @ttskch/select2-bootstrap4-theme

# composer
$ composer require ttskch/select2-bootstrap4-theme

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css">

官方网站

https://select2.org/

【讨论】：

【解决方案5】：

Select2 Plugin:
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

HTML:
<select id="id_user" class="custom-select select2 basic-single" name="id_user">
     <option value="1">Dummy 1</option>
     <option value="2">Dummy 2</option>
     <option value="3">Dummy 3</option>
     <option value="4">Dummy 4</option>
</select>

// create your own script css
CSS:
.select2 {
  display: block!important;
  width: 100%!important;
  height: calc(1.5em + 0.75rem + 2px)!important;
  padding: 0.375rem 0.75rem!important;
  font-size: 1rem!important;
  font-weight: 400!important;
  line-height: 1.5!important;
  color: #495057!important;
  background-color: #fff!important;
  background-clip: padding-box!important;
  border: 1px solid #ced4da!important;
  border-radius: 0.25rem!important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out!important;
}

.select2 span {
  border: none!important;
  margin: 0!important;
  padding: 0!important;
}

// create your own script js
JS:
$(document).ready(function() {
    $('.basic-single').select2();
});

【讨论】：