Select2 4.0.0 Bootstrap 主题

Question

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

<link href="/select2-bootstrap-theme/select2-bootstrap.min.css" type="text/css" rel="stylesheet" />

然后设置主题

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

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

Answer 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>

Answer 4

有官方支持的主题 bootstrap 4 可用，官方 select2 网站也提到

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/

Answer 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();
});

Select2 4.0.0 Bootstrap 主题

Select2 4.0.0 Bootstrap theme

twitter-bootstrap

jquery-select2