Могу ли я использовать Twitter Bootstrap и jQuery UI одновременно?

Я использую Twitter Bootstrap, и я хочу использовать «автоматическое предложение», которое недоступно в Bootstrap, тогда как пользовательский интерфейс jQuery имеет свои собственные методы для автоматического предложения.

Могу я использовать оба? Будет ли это перегрузить полосу пропускания?

Проверьте jquery-ui-bootstrap . Из README:

Twitter Bootstrap был одним из моих любимых проектов, вышедших в 2011 году, но из-за регулярного его использования мне хотелось двух вещей:

Возможность работать бок о бок с пользовательским интерфейсом jQuery (что привело к визуальному сбою ряда виджетов). Возможность тематизировать виджеты пользовательского интерфейса jQuery с использованием стилей Bootstrap. Хотя мне нравится jQuery UI, я (как и другие) считаю, что некоторые из текущих тем выглядят немного устаревшими. Я надеюсь, что эта тема станет достойной альтернативой для тех, кто думает так же. Чтобы уточнить, этот проект не нацелен и не намеревается заменить Twitter Bootstrap. Он просто предоставляет jQuery UI-совместимую тему, вдохновленную дизайном Bootstrap. Он также предоставляет версию Bootstrap CSS с несколькими закомментированными (второстепенными) разделами, которые позволяют теме работать вместе с ней.

просто чтобы обновить это, bootstrap v2 больше не конфликтует с jquery ui

https://github.com/twbs/bootstrap/issues/171

Изменить : как @Freshblood есть несколько вещей, которые все еще конфликтуют. Однако, как было изначально опубликовано, Twitter предполагает, что они работают над этим, и это в значительной степени работает, особенно по сравнению с v1.

Для справки в будущем (так как это лучший ответ Google ATM), чтобы предотвратить переопределение пользовательского интерфейса jQuery стиля начальной загрузки или вашего пользовательского стиля, вам необходимо создать пользовательскую загрузку и выбрать no-themeтему. Это будет включать только сбросы пользовательского интерфейса jQuery, а не перегрузку стиля начальной загрузки для различных элементов.

Пока мы это делаем, некоторые компоненты пользовательского интерфейса jQuery (например, datepicker) имеют встроенную реализацию начальной загрузки. В собственных реализациях начальной загрузки будут использоваться классы, атрибуты и макеты начальной загрузки css, поэтому она должна иметь лучшую интеграцию с остальной частью фреймворка.

В моем ограниченном опыте я тоже сталкиваюсь с проблемами. Похоже, что элементы JQuery (например, кнопки) можно стилизовать с помощью начального CSS. Однако я испытываю проблемы с созданием вкладки JQuery UI и желанием заблокировать ввод только для начальной загрузки (с использованием класса input-append) в нижней части каждой вкладки, только первая находится правильно. Итак, вкладки JQuery + кнопки Bootstrap = вероятно, нет.

Bootstrap по-прежнему не работает с пользовательским интерфейсом Jquery, например с модальным. Bootstrap имеет приятный стиль, но в качестве фреймворка с Twitter позади не так хорошо.

Если вы столкнулись с конфликтами пространства имен javascript, вы можете использовать noConflict()функцию Bootstrap, чтобы передать функциональность пользовательскому интерфейсу jQuery.

Хотя в этом вопросе конкретно упоминается функция автозаполнения jQuery-UI, заголовок вопроса более общий: работает ли bootstrap 3 с jQuery UI? У меня возникли проблемы с функцией jQUI datepicker (всплывающий календарь). Я решил проблему с datepicker и надеюсь, что решение поможет с другими проблемами jQUI / BS.

Сегодня мне было трудно получить последнюю версию jQueryUI (версия 1.12.1) datepicker для работы с bootstrap 3.3.7. Произошло то, что календарь отображался, но не закрывался.

Оказалось проблема версии с jQUI и BS. Я использовал последнюю версию Bootstrap и обнаружил, что мне пришлось перейти на следующие версии jQUI и jQuery:

jQueryUI - 1.9.2 (проверено - работает)
jQuery - 1.9.1 или 2.1.4 (проверено - оба работают. Другие версии могут работать, но эти работают.)
Bootstrap 3.3.7 (проверено - работает)

Поскольку я хотел использовать настраиваемую тему, я также создал настраиваемую загрузку jQUI (удалил некоторые вещи, такие как все взаимодействия, диалог, индикатор выполнения и несколько эффектов, которые я не использую) - и обязательно выбрал «Купертино» внизу как моя тема.

Я их установил так:

<head>
...etc...
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/cupertino/jquery-ui-1.9.2.custom.min.css">
<link rel="stylesheet" href="css/bootstrap-3.3.7.min.css">

<!-- <script src="js/jquery-1.9.1.min.js"></script> -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/bootstrap-3.3.7.min.js"></script>
...etc...
</head>

Для желающих папка CSS выглядит так:

[css]
  - bootstrap-3.3.7.min.css
  - font-awesome.min.css
  - style.css
  - [cupertino]
      - jquery-ui-1.9.2.custom.min.css
      [images]
          - ui-bg_diagonals-thick_90_eeeeee_40x40.png
          - ui-bg_glass_100_e4f1fb_1x400.png
          - ui-bg_glass_50_3baae3_1x400.png
          - ui-bg_glass_80_d7ebf9_1x400.png
          - ui-bg_highlight-hard_100_f2f5f7_1x100.png
          - etc (8 more files that were in the downloaded jQUI zip file)

Если не хранить его локально и использовать ссылку, которую они предоставляют, производительность может повыситься. В некоторых случаях у клиента могут быть уже кэшированные сценарии. Что касается случая jQueryUI, я бы рекомендовал не загружать его до тех пор, пока это необходимо. Они оба свернуты, но вы можете запустить консоль и посмотреть на вкладку сети и посмотреть, сколько времени потребуется для ее загрузки, после первоначальной загрузки она будет кэширована, так что вам не стоит беспокоиться впоследствии. да, используйте их оба, но используйте CDN

Да, вы можете использовать оба. js bootstrap от twitter - это набор плагинов jquery. Никакого конфликта с jQuery UI не должно быть.

Что касается перегрузки полосы пропускания, это действительно зависит от того, как вы обрабатываете запросы на загрузку всех ваших js-файлов. если вы действительно не хотите делать несколько запросов к серверу для запроса каждого файла, просто сложите их вместе и сверните. Или вы, вероятно, можете избавиться от некоторых плагинов js bootstrap, которые вам не нужны. он очень модульный.

В Kendo UI есть хорошая тема начальной загрузки и набор веб-интерфейса, сравнимый с jquery-UI. У них также есть версия с открытым исходным кодом, которая хорошо работает с темой.

У меня есть сайт, разработанный с использованием jquery ui, я просто попытался подключить bootstrap для будущей разработки и стилизации, но он ломает практически все.

Так что нет, они несовместимы.

Потому что это лучший результат в Google по jquery ui и bootstrap.js я решил добавить его как вики сообщества.

Я использую:

• Bootstrap v3.2.0
• jquery-2.1.0
• jquery-ui-1.10.3

и каким-то образом, когда я включаю bootstrap.js, он отключает раскрывающийся список автозаполнения jquery ui .

мои три обходных пути:

• исключить bootstrap.js
• или больше, чтобы набрать вперед lib
• перейти с bootstrap.js на bootstrap.min.js (странно, но у меня сработало)

Data-role = "none" - ключ к их совместной работе. Вы можете применить к элементам, которые должны касаться начальной загрузки, но игнорировать jquery mobile. как этот input type = "text" class = "form-control" placeholder = "Search" data-role = "none"