Чи можу я користуватися Twitter Bootstrap та інтерфейсом jQuery одночасно?

108

Я використовую Twitter Bootstrap і хочу використовувати "автоматичну пропозицію", яка недоступна в Bootstrap, тоді як інтерфейс jQuery має власні методи автоматичної пропозиції.

Чи можу я використовувати обоє? Чи буде це перевантажувати пропускну здатність?

jquery-ui  twitter-bootstrap 
— Санкет Саху
джерело
6
Користувацький інтерфейс jQuery становить 6,6 К (мінімізований та gzipped), тому, якщо ваша пропускна здатність не буде виміряна в кбі, це не буде проблемою.
— BryanH
4
Все змінилося з моменту розміщення цього питання. Зараз існує багато плагінів Bootstrap, які досить хороші для заміни існуючих плагінів інтерфейсу jQuery. Зараз я використовую Bootstrap із плагінами, створеними для завантажувального пристрою.
— Санкет Саху
1
Чому б не використовувати typeahead twitter ( twitter.github.io/typeahead.js/examples ) для автоматичної пропозиції?
— коппор

Відповіді:

83

Перевірте jquery-ui-bootstrap . З ПРОЧИТАННЯ:

Bootstrap у Twitter був одним з моїх улюблених проектів, який виходив з 2011 року, але регулярно використовуючи його, я захотів дві речі:

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

— Сем Долан
джерело
62

просто для оновлення цього, bootstrap v2 більше не конфліктує з jquery ui

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

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

— Еонасдан
джерело
10
Ви справді впевнені в цьому? І все-таки я бачу проблему з jquery
— datepicker
Я б запропонував вам взяти bootstrap v2 та jquery ui та створити порожню тестову сторінку, щоб переконатися, що це не ваш код. У мене не було проблем з новою версією
— Eonasdan
1
Перевірте цей jquery ui datepicker jqueryui.com/demos/datepicker/#dropdown-month-year . Як ви можете бачити за допомогою цих налаштувань, дата-панель містить елемент випадаючої скриньки, тому завантажувальна програма вже замінює всі вхідні елементи. Але немає жодних проблем, якщо ви не використовуєте датчик з цими налаштуваннями.
— Свіжекровний
1
Будь-який віджет, що містить елемент введення, суперечить стилям css twitter bootstrap.
— Свіжекровний
1
Обов’язковий. Функції кнопки Bootstrap не працюють з інтерфейсом jQuery, оскільки вони обидва визначають button()метод.
— BryanH
24

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

Поки ми працюємо, деякі компоненти інтерфейсу jQuery (наприклад, datepicker) мають вбудовану програму завантаження. Власні реалізації завантажувальної програми використовуватимуть класи, атрибути та макети bossstrap css, тому вони повинні мати кращу інтеграцію з рештою фреймворку.

— T0xicCode
джерело
Я не бачу тут безтематичної теми: jqueryui.com/themeroller . Я пропустив його чи його вже немає?
— gaefan
3
jqueryui.com/download - це посилання, яке ви повинні використовувати. Прокрутіть донизу та виберіть у списку пункт "Без теми".
— T0xicCode
3

У своєму обмеженому досвіді я також стикаюся з проблемами. Здається, елементи JQuery (наприклад, кнопки) можна стилізувати за допомогою завантажувального CSS. Однак у мене виникають проблеми, коли я створив вкладку інтерфейсу JQuery UI і хочу заблокувати лише вхід для завантаження (використовуючи клас введення-додавання) до нижньої частини кожної вкладки, лише перша сидить правильно. Отже, вкладки JQuery + кнопки завантаження = можливо, ні.

— флюсовий конденсатор
джерело
2

Bootstrap все ще не працює з користувальницьким інтерфейсом Jquery, наприклад, modal.Bootstrap має гарний стиль, але як рамки з Twitter позаду не так добре.

— Лучан Поватану
джерело
2

Якщо ви стикаєтесь зіткненнями простору імен JavaScript, ви можете використовувати noConflict()функцію Bootstrap, щоб вона передавала функціональність jQuery UI.

— користувач1618143
джерело
2

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

Сьогодні мені було важко отримати найновішу програму jQueryUI (ver 1.12.1) для роботи з завантажувальною версією 3.3.7. Що відбувалося - календар відображається, але він не закриється.

Виявилася проблема з версією jQUI та BS. Я використовував останню версію Bootstrap і виявив, що мені довелося перейти на наступні версії jQUI та jQuery:

jQueryUI - 1.9.2 (перевірено - працює)
jQuery - 1.9.1 або 2.1.4 (перевірено - обидва працюють. Інші версії можуть працювати, але вони працюють.)
Bootstrap 3.3.7 (перевірено - працює)

Оскільки я хотів використовувати власну тему, я також створив спеціальне завантаження jQUI (видалив декілька речей, як-от усі взаємодії, діалогове вікно, панель прогресів та кілька ефектів, які я не використовую) - і обов'язково вибрав "Cupertino" внизу як моя тема.

Я встановив їх таким чином:

<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)
— ксифію
джерело
1

Якщо не зберігати його локально і використовувати посилання, яке вони надають, у вас може бути покращена продуктивність. Клієнт може в деяких випадках сценарії вже кешувати. Що стосується випадку jQueryUI, я б рекомендував не завантажувати його до необхідності. Вони обоє зведені до мінімуму, але ви можете запустити консоль і подивитися на вкладку мережі та побачити, скільки часу потрібно для завантаження, після завантаження спочатку буде кешовано, тож ви не повинні турбуватися після цього. Мій висновок буде так, використовуйте їх обидва, але використовуйте CDN

— andrei
джерело
1

Так, ви можете використовувати і те, і інше. js bootstrap з twitter - це колекція плагінів jquery. Тут не повинно бути конфлікту з інтерфейсом jQuery.

Щодо перевантаження пропускної здатності, це дійсно залежить від того, як ви обробляєте запити, щоб завантажити всі ваші js-файли. якщо ви дійсно не хочете робити кілька запитів на сервер, щоб запитувати кожен файл, просто додайте їх разом і мінімізуйте. Або ви, ймовірно, можете позбутися деяких плагінів для завантаження js, які вам не потрібні. він дуже модульний.

— Бенні Тжія
джерело
4
Усі JS належним чином розподілені з іменами, але вам потрібно переживати зіткнення CSS: якщо ви включите віджет JUI на вкладку Bootstrap, що має перевагу?
— Btown
У Bootstrap погано виглядає CSS jQuery. Bootstrap вносить значні зміни у CSS, часто із тим !important, що мені постійно доводиться переосмислювати та виправляти, іноді з хакі-кодом. Я ненавиджу Bootstrap і перешкоджаю його використанню, принаймні до тих пір, поки він не перестане спілкуватися з елементами, які не використовують класи Bootstrap. (Це не вина оригінального дизайнера - я сумніваюся, що оригінальні розробники Twitter очікували, над чим вони працювали, щоб стати популярною бібліотекою.)
— Майкл Шепер,
0

У мене сайт, розроблений за допомогою jquery ui, я просто намагався підключити завантажувальний інструмент для подальшої розробки та стилізації, але він порушує практично все.

Так Ні, вони не сумісні.

— НімЧимпський
джерело
0

Оскільки це найкращий результат у google on jquery ui та bootstrap.js, я вирішив додати це як вікі спільноти.

Я використовую:

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

і колись я включаю bootstrap.js, він відключає випадання автозаповнення jquery ui .

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

  • виключити bootstrap.js
  • або більше, щоб набрати голову
  • перейти від bootstrap.js до bootstrap.min.js (дивно, але для мене працювало)
— випуски JP Hellemons
джерело
комбінація завантажувальної програми jquery ui також вимикає підказку та вибір дати.
— Vipul Hadiya
-3

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

— Дінеш Хетарпал
джерело
1
це питання стосувалося завантажувального та jquery-ui, а не jquery mobile
— TJ
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.