Twitter Bootstrap та інтерфейс jQuery? [зачинено]


214

Я використовував інтерфейс jQuery для деяких основних вдосконалень сторінки. Стилізація кнопок та входів та модальні діалогові вікна. Зараз я натрапив на Bootstrap і це виглядає досить непогано.

Хтось має досвід переходу від використання інтерфейсу jQuery до Bootstrap? Це те, що я думаю зробити, але перш ніж зробити це, я хотів би усвідомити, з якими проблемами я можу зіткнутися.


4
Одне можливе рішення, яке, можливо, було б недоступне, коли про це попросили ... Адді Османі та його команда працювали над об'єднанням двох - якщо ви застрягли між ними, перевірте, і, можливо, ви зможете отримати все, що завгодно! - addyosmani.github.io/jquery-ui-bootstrap
вуличне

1
Як оновити (2014!) Відповіді? Чи може хтось тут почати вигравати?
Пітер Краусс

З веб-сайту Bootstrap - "Bootstrap підтримує лише одне модальне вікно за один раз. Вкладені модалі не підтримуються, оскільки ми вважаємо, що це поганий досвід користувачів". - Добре горе.
Джордж Беєр

Відповіді:


133

У мене є кілька проектів.

Найбільша різниця на мою думку

  • Користувальницький інтерфейс jQuery безпечний, він працює правильно і добре виглядає в старих браузерах, де Bootstrap базується на CSS3, що в основному означає ВЕЛИКИЙ у нових браузерах, не такий великий у старих

  • Частота оновлення: Bootstrap отримує великі великі оновлення із приголомшливими новими функціями, але, на жаль, вони можуть порушити попередній код, тому ви не можете просто встановити завантажувальний пакет і оновити, коли з'явиться новий великий реліз, він, як правило, вимагає багато нового кодування

  • Інтерфейс jQuery заснований на хорошій структурі html з перетвореннями від JavaScript, тоді як Bootstrap заснований на візуальній та настроюваній вбудованій структурі. (виклик віджета в інтерфейсі JQUERY, визначення його в Bootstrap)

То що вибрати?

Це завжди залежить від типу проекту, над яким ви працюєте. Кращі віджети і швидко виглядають віджети, або ваші користувачі часто використовують старі браузери?

Я завжди закінчую використання обох, тому можу використовувати найкраще з обох світів.

Ось посилання на обидва рамки, якщо ви вирішили їх використовувати.

  1. інтерфейс jQuery
  2. Завантажувач

2
-Дякую, що знайшли час для відповіді. Мої потреби полягають у тому, що я працюю над IE9 або іншими браузерами пізнішої версії, які мають досить гарну підтримку CSS3. Bootstrap починає виглядати добре для мене. Одне питання. Я використовую ASP.MVC. Я помітив щось про те, що потрібно менше. Чи буде Boostrap добре працювати з платформою Microsoft ASP MVC? Де «менше» вміщується?
Джессіка

Ви можете зібрати менше файлів у файли .css. Створивши завантажувальний засіб (використовуючи make), створить готові до використання CSS файли. Таким чином вам не потрібно використовувати менше.
mikaelb

3
LESS - це рамка css. Це ні в якому разі не потрібно використовувати Boostrap (вони мають звичайну версію CSS / JS), але за допомогою МЕНШЕ ви можете легко робити змінні в CSS (змінювати кольори тощо), робити його залежним, мати функції. Дивіться тут: lesscss.org і є версія BETA для компілятора в .NET дивіться: dotlesscss.org
Marco Johannesen

20
Як ви навіть використовуєте "найкраще з обох світів"? Найближче до мене - використання jQueryUI Bootstrap (в основному тема jQueryUI), але все ж він розроблений для Bootstrap 1.4, а не 2.0, і виникають сутички при спробі використання JS для кнопок тощо.
Адам Лінч

3
@ PhoenixX_2 невдало! Приклад: у завантажувальній програмі ви button button-primary button-smallзаписуєте всі класи на елемент кнопки (тобто , де у jQueryUI ви призначаєте елемент як кнопку, тобто просто додаєте "btn", а потім через JS ви робите його кнопкою $(".btn").button(). Це означає, що в Bootstrap ви визначте його в HTML, а в jQueryUI ви визначаєте його в JS. Негативні матеріали на Bootstrap - вам потрібно відредагувати свій HTML, якщо ви щось оновлюєте / змінюєте (тобто. версії Bootstrap), де jQueryUI вам просто потрібно змінити свій JS, що часто простіше. І в обох є позитиви та негативи! :)
Марко Йоханнесен

73

Використовуючи обидва, Bootstrap Twitter - це чудовий набір технологій. Ось деякі відмінності,

  • Віджети : тут виграє інтерфейс jQuery. Даний віджет дати надзвичайно корисний, а Twitter Bootstrap не забезпечує нічого подібного.
  • Ліси : Тут виграє Bootstrap. Сітка Twitter як текуча, так і нерухома - це найвищий рівень. Інтерфейс jQuery навіть не надає цей напрямок, залишаючи макет сторінки до кінцевого користувача.
  • Поза професіоналізм : Bootstrap із використанням CSS3 випереджає ліги, інтерфейс jQuery виглядає датованим порівнянням.
  • Ікони : Я піду на цю. У програмі Bootstrap є кращі іконки, ніж у користувальницькому інтерфейсі jQuery , але мені не подобаються терміни один біт, Glyphicons Halflings зазвичай не доступні безкоштовно, але домовленість між Bootstrap та розробниками Glyphicons зробила це можливим без витрат для вас як розробників. Як подяку, ми просимо вас включити необов'язкове посилання назад до Glyphicons, коли це можливо.
  • Зображення та мініатюри : переходить до Bootstrap , інтерфейс jQuery тут навіть не допомагає.

Інші примітки,

  • Важливо зрозуміти, як ці дві технології конкурують і в сферах. Існує багато перекриттів, але якщо ви хочете прості ліси та створення фіксованого / текучого середовища, Bootstrap - це не інша технологія, це найкраща технологія. Якщо вам потрібен якийсь один віджет, користувальницький інтерфейс jQuery, ймовірно, навіть не входить до першої трійки. Сьогодні інтерфейс jQuery є лише іграшкою для послідовності та підтвердженням концепції для створення віджетів на стороні клієнта, використовуючи єдину рамку.

34

Ви можете використовувати обидва з відносно мало питань. Twitter Bootstrap використовує jQuery 1.7.1 (станом на цей текст), і я не можу придумати жодних причин, чому ви не можете інтегрувати додаткові компоненти інтерфейсу Jquery у свої шаблони HTML.

Я використовував комбінацію HTML5 Boilerplate та Twitter Bootstrap, створену на Initializr.com. Це поєднує два дивовижні шаблони для початківців в один великий проект для початківців. Перегляньте деталі на веб-сторінці http://html5boilerplate.com/ та http://www.initializr.com/ Або для початку роботи, перейдіть на сторінку http://www.initializr.com/ , натисніть "Bootstrap 2" і натисніть "Завантажити". Це дасть вам всі js та css, необхідні для початку.

І не лякайтеся HTML5 та CSS3. Initializr та HTML5 Boilerplate включають поліфіли та специфічний код IE, що дозволить працювати всім функціям у IE 6, 7 8 та 9.

Використання МЕНШЕ в Twitter Bootstrap також необов’язкове. Вони використовують ЛЕШЕ для компіляції всіх CSS, які використовуються Bootstrap, але якщо ви просто хочете змінити або додати свої власні стилі, вони надають порожній файл css для цієї мети.

Існує також порожній js-файл (script.js) для додавання спеціального коду. Тут ви б додали ваших обробників або селекторів для додаткових компонентів jQueryUI.


Чудова відповідь. Швидке запитання складне, що насправді пропонує jquery ui, ніж він не включений у завантажувальний центр Twitter та його плагіни?
MindWire

5
Вибачте, щойно це побачив. Що стосується js-віджетів, то у користувальницького інтерфейсу jQuery є панель вибору дати та слайдер, які не входять у Bootstrap. Також jqUI включає взаємодії та ефекти, такі як перетягування, анімація показу / приховування, перемикання класів та інші. Поєднання взаємодії jqUI з компонентами компонування Bootstrap може бути дуже потужною комбінацією.
eterps

6
Одне питання, на який слід стежити; обидва проекти визначають $ .fn.button несумісними способами.
Леві

27

Ми використовували обидва і нам подобається Bootstrap за його простоту та темпи, з якими він розробляється та вдосконалюється. Проблема з інтерфейсом jQuery полягає в тому, що він рухається зі швидкістю равлики. Для впровадження загальних особливостей, таких як Menubar, управління деревом та DataGrid, які знаходяться на стадії планування / розробки назавжди потрібні роки. Ми чекали, чекали, чекали і, нарешті, відмовились і використовували інші бібліотеки, як ExtJS, для нашого продукту http://dblite.com .

Bootstrap розробив досить вичерпний набір функцій за дуже короткий проміжок часу, і я впевнений, що швидше випередить інтерфейс jQuery.

Тому я не бачу сенсу використовувати щось, що з часом застаріло ...


43
Все з часом застаріло. Немає сенсу нічого робити.
tilgovi

6
Щоправда, нам просто потрібно вибрати той, який, на нашу думку, буде тримати свою основу довше.
Раджив

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