Czy mogę używać Twitter Bootstrap i jQuery UI w tym samym czasie?

Używam Twittera Bootstrap i chcę użyć „auto-sugestii”, która nie jest dostępna w Bootstrap, podczas gdy interfejs użytkownika jQuery ma własne metody automatycznego sugerowania.

Czy mogę używać obu? Czy spowoduje to przeciążenie przepustowości?

Sprawdź jquery-ui-bootstrap . Z README:

Bootstrap na Twitterze był jednym z moich ulubionych projektów, które pojawiły się w 2011 roku, ale regularne korzystanie z niego sprawiło, że chciałem mieć dwie rzeczy:

Możliwość pracy obok siebie z interfejsem użytkownika jQuery (coś, co spowodowało, że wiele widżetów zepsuło się wizualnie) Możliwość tworzenia motywów widgetów jQuery UI przy użyciu stylów Bootstrap. Chociaż uwielbiam interfejs jQuery UI, (podobnie jak inne) uważam, że niektóre z obecnych motywów wyglądają na nieco przestarzałe. Mam nadzieję, że ten motyw będzie dobrą alternatywą dla innych, którzy czują to samo. Aby wyjaśnić, ten projekt nie ma na celu ani nie ma zamiaru zastąpić Twitter Bootstrap. Zapewnia jedynie motyw zgodny z interfejsem jQuery inspirowany projektem Bootstrap. Udostępnia również wersję Bootstrap CSS z kilkoma (pomniejszymi) sekcjami zakomentowanymi, co pozwala na współdziałanie motywu.

aby to zaktualizować, bootstrap v2 nie powoduje już konfliktu z interfejsem jquery

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

Edycja : jako @Freshblood jest kilka rzeczy, które nadal powodują konflikt. Jednak, jak pierwotnie opublikowano na Twitterze, sugeruje, że pracują nad tym i to w dużej mierze działa, szczególnie w porównaniu do v1.

Na przyszłość (ponieważ jest to najlepszy bankomat odpowiedzi Google), aby uniemożliwić interfejsowi jQuery nadpisanie stylu bootstrap lub niestandardowego, musisz utworzyć niestandardowe pobieranie i wybrać no-theme motyw. Będzie to obejmować tylko resetowanie interfejsu użytkownika jQuery, a nie przeciążanie stylu bootstrap dla różnych elementów.

Skoro już o tym mowa, niektóre komponenty interfejsu użytkownika jQuery (takie jak datepicker) mają natywną implementację ładowania początkowego. Natywne implementacje bootstrap będą używać klas, atrybutów i układów bootstrap css, więc powinny mieć lepszą integrację z resztą frameworka.

Z mojego ograniczonego doświadczenia również napotykam problemy. Wygląda na to, że elementy JQuery (takie jak przyciski) można stylizować za pomocą bootstrap CSS. Jednak mam problemy z utworzeniem karty interfejsu użytkownika JQuery i chęcią zablokowania tylko wejścia ładowania początkowego (przy użyciu klasy input-append) na dole każdej karty, tylko pierwsza jest umieszczona poprawnie. Tak więc zakładki JQuery + przyciski Bootstrap = prawdopodobnie nie.

Bootstrap nadal nie działa z interfejsem użytkownika Jquery, na przykład modalnym. Bootstrap ma ładny styl, ale jako framework z Twitterem nie jest taki dobry.

Jeśli napotkasz kolizje przestrzeni nazw javascript, możesz użyć noConflict()funkcji Bootstrap, aby scedować funkcjonalność na interfejs użytkownika jQuery.

Chociaż to pytanie wyraźnie wspomina o funkcji autosugestii jQuery-UI, tytuł pytania jest bardziej ogólny: czy bootstrap 3 działa z interfejsem jQuery? Miałem problem z funkcją jQUI datepicker (wyskakujący kalendarz). Rozwiązałem problem z datownikiem i mam nadzieję, że rozwiązanie pomoże z innymi problemami z jQUI / BS.

Trudno mi było dziś uzyskać najnowszy datepicker jQueryUI (wersja 1.12.1) do pracy z bootstrapem 3.3.7. Działo się tak, że kalendarz był wyświetlany, ale się nie zamykał.

Okazało się, że jest to problem z wersją jQUI i BS. Korzystałem z najnowszej wersji Bootstrap i stwierdziłem, że muszę przejść na te wersje jQUI i jQuery:

jQueryUI - 1.9.2 (testowane - działa)
jQuery - 1.9.1 lub 2.1.4 (testowane - oba działają. Inne wersje mogą działać, ale te działają).
Bootstrap 3.3.7 (testowane - działa)

Ponieważ chciałem użyć niestandardowego motywu, stworzyłem również niestandardowy plik do pobrania jQUI (usunąłem kilka rzeczy, takich jak wszystkie interakcje, okno dialogowe, pasek postępu i kilka efektów, których nie używam) - i upewniłem się, że wybrałem „Cupertino” na dole jako mój motyw.

Zainstalowałem je w ten sposób:

<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>

Dla zainteresowanych folder CSS wygląda następująco:

[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)

Jeśli nie przechowujesz go lokalnie i użyjesz podanego przez niego łącza, możesz uzyskać lepszą wydajność. W niektórych przypadkach klient może mieć już buforowane skrypty. Jeśli chodzi o przypadek jQueryUI, radziłbym nie ładować go, dopóki nie będzie to konieczne. Oba są zminimalizowane, ale możesz uruchomić konsolę i spojrzeć na kartę sieciową i zobaczyć, ile czasu zajmuje jej załadowanie, po pierwszym pobraniu zostanie zapisana w pamięci podręcznej, więc nie powinieneś się później martwić. tak, używaj ich obu, ale używaj CDN

Tak, możesz używać obu. js bootstrap z twittera to zbiór wtyczek jquery. Nie powinno być żadnego konfliktu z interfejsem użytkownika jQuery.

Jeśli chodzi o przeciążenie przepustowości, to naprawdę zależy od tego, jak obsługujesz żądania załadowania wszystkich plików js. jeśli naprawdę nie chcesz wysyłać wielu żądań do serwera w celu zażądania każdego pliku, po prostu dołącz je razem i zminimalizuj. Lub prawdopodobnie możesz pozbyć się niektórych wtyczek bootstrap js, których nie potrzebujesz. jest bardzo modułowy.

Kendo UI ma tutaj ładny motyw bootstrap i zestaw interfejsu internetowego porównywalny z jquery-UI. Mają też wersję open source, która dobrze współgra z motywem.

Mam witrynę stworzoną przy użyciu jquery ui, po prostu próbowałem podłączyć bootstrap do przyszłego rozwoju i stylizacji, ale psuje praktycznie wszystko.

Więc nie, nie są kompatybilne.

Ponieważ jest to najlepszy wynik w Google na jquery ui i bootstrap.js , zdecydowałem się dodać to jako wiki społeczności.

Ja używam:

• Bootstrap w wersji 3.2.0
• jquery-2.1.0
• jquery-ui-1.10.3

iw jakiś sposób, kiedy dołączam plik bootstrap.js, wyłącza rozwijanie autouzupełniania interfejsu jquery ui .

moje trzy obejścia:

• wyklucz plik bootstrap.js
• lub więcej, aby wpisać ahead lib
• przejdź z bootstrap.js do bootstrap.min.js (dziwne, ale działało dla mnie)

Data-role = "none" jest kluczem do ich współpracy. Możesz zastosować do elementów, które chcesz, aby bootstrap dotykał, ale jquery mobile ignorować. jak to wejście type = "text" class = "form-control" placeholder = "Search" data-role = "none"