2016-06-27 3 views
2

Я пытаюсь использовать bootstrap-select (http://silviomoreto.github.io/bootstrap-select/) и не могу загрузить его. Он отображает dropbox, но не параметры. Я немного потерял и не уверен, загружаю ли я надлежащие зависимости в правильном порядке или делаю что-то глупое.Борьба за создание Bootstrap-select to work

Я начинаю изучать все это и, возможно, что-то неправильно делаю здесь. Я создал плункер, чтобы я мог четко воспроизвести эту проблему.

Цените любую помощь!

Это мой код: https://plnkr.co/edit/f80WGOjxuxBfXomOgEZn?p=preview

<!DOCTYPE html> 
    <html> 
    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

    <!-- Jquery javascript version 1.12.4 --> 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> 
    <!--script data-require="[email protected]*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.min.js"></script--> 

    <!-- Latest compiled and minified CSS for Bootstrap-select--> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css"> 

    <!-- Latest compiled and minified JavaScript for Bootstrap-select --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script> 

    <!-- (Optional) Latest compiled and minified JavaScript translation files --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script> 

    </head> 

<body onload="start()"> 
    <h1>Bootstrap-select Dropdown test!</h1> 

    <select class="selectpicker"> 
    <option>Mustard</option> 
    <option>Ketchup</option> 
    <option>Relish</option> 
    </select> 
</body> 

</html> 
+0

Вы должны загрузить JavaScript в конце вашего 'body'. И обязательно вы должны добавить язык вместо '*' в 'defaults - *. Min.js' – phaberest

+1

@makshh он делает это в файле' script.js' – phaberest

ответ

0

Вы забыли включить бутстраповские JS в вашем HTML.

Здесь мы идем: https://plnkr.co/edit/JZhBHwTooRVVDpVYb8u0?p=preview

Все, что вам нужно было просто

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

PS: Не забудьте положить ваши JS файлы в конце вашего body и любой пользовательский файл должен быть загруженные после библиотек, чтобы вы могли вызывать функции от них и быть в состоянии переопределить их вещи.

Вот почему окончательный JS часть должна быть

<!-- rest of body here --> 

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-en_US.min.js"></script> 
<script src="script.js"></script> 

<!-- close body & html --> 
+0

Спасибо за быстрый ответ! Он работает сейчас! –

+0

Не забудьте отметить его, спасибо! ;) – phaberest

Смежные вопросы