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

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

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

Ответ 1

Отъезд jquery-ui-bootstrap. Из README:

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

У меня было трудное время, чтобы получить последнюю версию jQueryUI (ver 1.12.1) datepicker для работы с бутстрапом 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)

Ответ 8

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

Ответ 9

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

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

Ответ 11

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

Таким образом, они не совместимы.

Ответ 12

Поскольку это лучший результат в google на jquery ui и bootstrap.js, я решил добавить это как сообщество wiki.

Я использую:

  • Bootstrap v3.2.0
  • JQuery-2.1.0
  • JQuery-щ-1.10.3

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

мои три обхода:

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

Ответ 13

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