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

Question

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

109

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

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

Sanket Sahu 28 янв. 2012, в 18:38

Источник

6

Пользовательский интерфейс jQuery имеет размер 6,6 Кб (минимизированный и сжатый), поэтому если ваша пропускная способность не измеряется в Кб, это не будет проблемой.
BryanH 06 дек. 2012, в 21:18
4

С тех пор, как я разместил этот вопрос, все изменилось. Сейчас существует множество плагинов Bootstrap, которые достаточно хороши для замены существующих плагинов jQuery UI. Теперь я использую Bootstrap с плагинами, созданными для начальной загрузки.
Sanket Sahu 16 янв. 2013, в 09:05
1

Почему бы не использовать твиттер typeahead ( twitter.github.io/typeahead.js/examples ) для автоматического предложения?
koppor 28 июнь 2013, в 14:15

Показать ещё 1 комментарий

Теги:

twitter-bootstrap

jquery-ui

13 ответов

58

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

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

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

Eonasdan 29 март 2012, в 17:09

10

Вы действительно уверены в этом? Тем не менее я вижу проблему с JQuery DatePicker
Freshblood 12 май 2012, в 15:59
0

Я бы посоветовал вам взять bootstrap v2 и jquery ui и создать пустую тестовую страницу, чтобы убедиться, что это не ваш код. У меня не было проблем с новой версии
Eonasdan 12 май 2012, в 19:47
1

Пожалуйста, проверьте этот jquery ui datepicker jqueryui.com/demos/datepicker/#dropdown-month-year . Как вы можете видеть с этими настройками, datepicker содержит элемент dropdownbox, поэтому начальная загрузка уже переопределяет все входные элементы. Но нет никаких проблем, если вы не используете datepicker с этими настройками.
Freshblood 12 май 2012, в 21:25
1

Любой виджет, содержащий элемент ввода, будет конфликтовать со стилями начальной загрузки Twitter.
Freshblood 12 май 2012, в 21:29
0

ну, это работает для меня, пока я не использовал этот конкретный пример. Я также следовал тому, что Твиттер сказал им сам. Я мог бы изменить образ jquery ui или начальной загрузки css, чтобы быть более конкретным.
Eonasdan 13 май 2012, в 12:20
1

Негативный. Функции кнопок Bootstrap не работают с пользовательским интерфейсом jQuery, поскольку они оба определяют метод button() .
BryanH 06 дек. 2012, в 21:08
0

@BryanH, как подсказывает мое редактирование, это значительное улучшение по сравнению с версией v1, и я признаю, что все еще есть некоторые проблемы. Они также исправили большинство стилевых конфликтов
Eonasdan 06 дек. 2012, в 21:28

Показать ещё 5 комментариев

22

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

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

T0xicCode 08 дек. 2013, в 23:47

0

Я не вижу темы без темы здесь: jqueryui.com/themeroller . Я пропустил это или его больше нет?
gaefan 16 дек. 2014, в 23:07
3

jqueryui.com/download - это ссылка, которую вы должны использовать. Прокрутите вниз и выберите «Нет темы» в списке.
T0xicCode 17 дек. 2014, в 16:08

3

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

fluxcapacitor 02 сен. 2013, в 04:41

2

Хотя этот вопрос специально упоминает функцию автозапуска 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)

gibberish 14 март 2017, в 02:25

2

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

user1618143 31 окт. 2013, в 23:16

2

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

Lucian Povatanu 20 авг. 2012, в 21:47

1

Kendo UI имеет приятную тему bootstrap здесь и набор веб-интерфейса, сопоставимый с jquery-UI. У них также есть версия с открытым исходным кодом, которая прекрасно работает с темой.

prograhammer 20 фев. 2014, в 22:48

1

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

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

Benny Tjia 28 янв. 2012, в 22:03

4

Все JS правильно расположены в пространстве имен, но вам нужно беспокоиться о коллизиях CSS: если вы добавите виджет JUI во вкладку Bootstrap, что будет иметь приоритет?
btown 11 сен. 2012, в 03:54
0

Это не просто CSS-код jQuery, который выглядит плохо в Bootstrap. Bootstrap вносит быстрые изменения в CSS, часто с !important , что мне постоянно приходится переопределять и исправлять, иногда с помощью взломанного кода. Я ненавижу Bootstrap и не одобряю его использование, по крайней мере, до тех пор, пока оно не прекратит работать с элементами, которые не используют классы Bootstrap. (Это не ошибка оригинального дизайнера - я сомневаюсь, что оригинальные разработчики Twitter ожидали, что они работают, чтобы стать популярной библиотекой.)
Michael Scheper 21 нояб. 2015, в 04:03

1

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

andrei 28 янв. 2012, в 20:38

0

Поскольку это лучший результат в 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(странно, но работал у меня)

JP Hellemons 11 июль 2014, в 10:10

3

Даунвот и без комментариев? Спасибо!
JP Hellemons 11 июль 2014, в 09:16
0

Сочетание JQuery UI начальной загрузки также отключить всплывающую подсказку и DatePicker.
Vipul Hadiya 06 дек. 2014, в 12:34

0

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

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

NimChimpsky 13 янв. 2013, в 10:54

-2

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

Dinesh Khetarpal 31 окт. 2013, в 16:38

1

этот вопрос был о начальной загрузке и jquery-UI, а не JQuery Mobile
T J 08 янв. 2016, в 17:20

Ещё вопросы

Пользовательский интерфейс jQuery имеет размер 6,6 Кб (минимизированный и сжатый), поэтому если ваша пропускная способность не измеряется в Кб, это не будет проблемой.
С тех пор, как я разместил этот вопрос, все изменилось. Сейчас существует множество плагинов Bootstrap, которые достаточно хороши для замены существующих плагинов jQuery UI. Теперь я использую Bootstrap с плагинами, созданными для начальной загрузки.
Почему бы не использовать твиттер typeahead ( twitter.github.io/typeahead.js/examples ) для автоматического предложения?
Вы действительно уверены в этом? Тем не менее я вижу проблему с JQuery DatePicker
Я бы посоветовал вам взять bootstrap v2 и jquery ui и создать пустую тестовую страницу, чтобы убедиться, что это не ваш код. У меня не было проблем с новой версии
Пожалуйста, проверьте этот jquery ui datepicker jqueryui.com/demos/datepicker/#dropdown-month-year . Как вы можете видеть с этими настройками, datepicker содержит элемент dropdownbox, поэтому начальная загрузка уже переопределяет все входные элементы. Но нет никаких проблем, если вы не используете datepicker с этими настройками.
Любой виджет, содержащий элемент ввода, будет конфликтовать со стилями начальной загрузки Twitter.
ну, это работает для меня, пока я не использовал этот конкретный пример. Я также следовал тому, что Твиттер сказал им сам. Я мог бы изменить образ jquery ui или начальной загрузки css, чтобы быть более конкретным.
Негативный. Функции кнопок Bootstrap не работают с пользовательским интерфейсом jQuery, поскольку они оба определяют метод button() .
@BryanH, как подсказывает мое редактирование, это значительное улучшение по сравнению с версией v1, и я признаю, что все еще есть некоторые проблемы. Они также исправили большинство стилевых конфликтов
Я не вижу темы без темы здесь: jqueryui.com/themeroller . Я пропустил это или его больше нет?
jqueryui.com/download - это ссылка, которую вы должны использовать. Прокрутите вниз и выберите «Нет темы» в списке.
Все JS правильно расположены в пространстве имен, но вам нужно беспокоиться о коллизиях CSS: если вы добавите виджет JUI во вкладку Bootstrap, что будет иметь приоритет?
Это не просто CSS-код jQuery, который выглядит плохо в Bootstrap. Bootstrap вносит быстрые изменения в CSS, часто с !important , что мне постоянно приходится переопределять и исправлять, иногда с помощью взломанного кода. Я ненавижу Bootstrap и не одобряю его использование, по крайней мере, до тех пор, пока оно не прекратит работать с элементами, которые не используют классы Bootstrap. (Это не ошибка оригинального дизайнера - я сомневаюсь, что оригинальные разработчики Twitter ожидали, что они работают, чтобы стать популярной библиотекой.)
Даунвот и без комментариев? Спасибо!
Сочетание JQuery UI начальной загрузки также отключить всплывающую подсказку и DatePicker.
этот вопрос был о начальной загрузке и jquery-UI, а не JQuery Mobile

sdolan · Accepted Answer · 2012-01-28T21-07-00.000Z

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

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

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