1

O bootstrap selectpicker funciona com o bootstrap versão 4?

Existe incompatibilidade entre eles? Existe outro "plugin" semelhante?

Estou testando da seguinte forma:

CSS importados:

<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

Scripts importados:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

Código usado:

<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

Tudo conforme a documentação explica. A diferença é o bootstrap que é mais novo.

11
  • Vc já chegou a testar?
    – Sam
    Commented 20/02/2018 às 23:55
  • sim, não funcionou... Commented 21/02/2018 às 0:00
  • Testei no BS4 e não funcionou, ele não abra o Select
    – hugocsl
    Commented 21/02/2018 às 0:09
  • Carregue este .js antes do .js do bootstrap e faça um teste: <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    – Sam
    Commented 21/02/2018 às 0:11
  • @hugocsl isso mesmo, vou esperar pra ver se alguém dá alguma dica :/ Commented 21/02/2018 às 0:11

1 Resposta 1

3

Não existe incompatibilidade entre o bootstrap-select e o bootstrap 4.
O problema é que se não incluir a versão UMD do popper.js antes do bootstrap.min.js não funciona!
Também pode usar bootstrap.bundle.min.js ao invés do popper.js e bootstrap.min.js, porque nele já esta incluído o código do popper!
Abaixo um exemplo com os estados do brasil e opção de busca!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.6/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.6/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<style>
body { background: seagreen; }
</style>

<br><br>

<div class="container">
  <select class="selectpicker" data-width="40%" title="Estados do Brasil" data-live-search="true">
    <option value="AC">Acre</option>
    <option value="AL">Alagoas</option>
    <option value="AP">Amapá</option>
    <option value="AM">Amazonas</option>
    <option value="BA">Bahia</option>
    <option value="CE">Ceará</option>
    <option value="DF">Distrito Federal</option>
    <option value="ES">Espírito Santo</option>
    <option value="GO">Goiás</option>
    <option value="MA">Maranhão</option>
    <option value="MT">Mato Grosso</option>
    <option value="MS">Mato Grosso do Sul</option>
    <option value="MG">Minas Gerais</option>
    <option value="PA">Pará</option>
    <option value="PB">Paraíba</option>
    <option value="PR">Paraná</option>
    <option value="PE">Pernambuco</option>
    <option value="PI">Piauí</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="RN">Rio Grande do Norte</option>
    <option value="RS">Rio Grande do Sul</option>
    <option value="RO">Rondônia</option>
    <option value="RR">Roraima</option>
    <option value="SC">Santa Catarina</option>
    <option value="SP">São Paulo</option>
    <option value="SE">Sergipe</option>
    <option value="TO">Tocantins</option>
  </select>
</div>

Pen com o mesmo exemplo:

CodePen

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .