Bootstrap-выберите плагин jQuery с Bootstrap 4

Я новичок в Bootstrap и пытаюсь использовать Bootstrap-Select с Bootstrap 4 (может заставить его работать с Bootstrap 3) https://developer.snapappointments.com/bootstrap-select/

Однако меня смущают разные компоненты, которые нужны Bootstrap и select. Иногда выбор не открывается, иногда выбор открывается, но поиска нет. Я предполагаю, что необходимые компоненты неверны, но у меня нет опыта, чтобы увидеть, что не так.

Было бы здорово, если бы кто-нибудь помог, спасибо уже ^^

<html>
<head>
    <meta charset = "utf-8">
    <!-- Bootstrap -->
    <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous">

    <!-- Own CSS -->
    <link rel = "stylesheet" type = "text/css" href = "templates/style.css" media = "screen" />
</head>

<body>
    <select class = "selectpicker" data-live-search = "true">
        <option disabled = "disabled" selected>- Select -</option>
        <optgroup label = "Main Options">
            <option value = "all">All Models</option>
            <option value = "final">Final Models</option>
            <option value = "prepared">Prepared Models</option>
        </optgroup>
    </select>

    <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"></script>
    <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
</body>
</html>

bootstrap-4 bootstrap-select bootstrap-selectpicker

10.12.2020 15:45

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

2 361

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы используете bootstrap 4, вам нужно использовать bootstrap-select v1.13.0+

Bootstrap 4 работает только с bootstrap-select v1.13.0+. По умолчанию bootstrap-select автоматически определяет используемую версию Bootstrap. Однако в некоторых случаях определение версии не работает. См. документацию для получения дополнительной информации.

<html>
<head>
    <meta charset = "utf-8">
    <!-- Bootstrap -->
    <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">

    <!-- Own CSS -->
    <!-- <link rel = "stylesheet" type = "text/css" href = "templates/style.css" media = "screen" /> -->
</head>

<body>
    <select class = "selectpicker">
        <option disabled = "disabled" selected>- Select -</option>
        <optgroup label = "Main Options">
            <option value = "all">All Models</option>
            <option value = "final">Final Models</option>
            <option value = "prepared">Prepared Models</option>
        </optgroup>
    </select>

    <script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
</body>
</html>

10.12.2020 16:34

Другие вопросы по теме

Изменить цвет фона Bootstrap 4.6 Выбор опции при выборе или наведении курсора?

Выпадающее меню выбора Bootstrap закрывается, когда я нажимаю кнопку всплывающего окна (внутри раскрывающегося списка)

Bootstrap-select не выпадает при нажатии в веб-приложении ASP.NET

Получить несколько данных выбора из Bootstrap Select с помощью PHP

Parsley JS не работает с bootstrap-select

Стиль bootstrap-select по умолчанию кажется неправильным

Bootstrap Selectpicker - скрыть поле выбора и всегда показывать раскрывающийся список

Selectpicker (bootstrap-select) не работает, показывает отключенное меню?

Bootstrap selectpicker не сбрасывается по умолчанию при запросе

Как обновить максимальные параметры bootstrap-select в зависимости от другого списка выбора

Bootstrap-выберите плагин jQuery с Bootstrap 4

Ответы 1

Другие вопросы по теме

Похожие вопросы