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

如果你想使用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，在.input-group包装器元素上使用类 .select2-bootstrap-prepend 和 .select2-bootstrap-append 来分组按钮和无缝选择。

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

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

主题的 Git 仓库

Image

现场演示

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

使用命令行安装

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

CDN

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

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

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

官方网站

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

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主题

5 个答案: