Твиттер Bootstrap vs jQuery UI? [закрыто]

214

Я использовал jQuery UI для некоторых базовых улучшений страницы. Кнопки и стили ввода и модальные диалоговые окна. Теперь я наткнулся на Bootstrap, и он выглядит довольно хорошо.

У кого-нибудь есть опыт перехода с jQuery UI на Bootstrap? Это то, что я думаю сделать, но прежде чем сделать это, я бы хотел знать, с какими проблемами я могу столкнуться.

javascript jquery jquery-ui twitter-bootstrap Джессика
источник
4
Одно из возможных решений, которое, возможно, не было доступно, когда об этом спросили ... Адди Османи и его команда работали над слиянием двух - если вы застряли между ними, проверьте и, возможно, вы можете получить все, что вы хотите! - addyosmani.github.io/jquery-ui-bootstrap
уличный
1
Как обновить (2014!) Ответы? Кто-нибудь может начать здесь щедрость?
Питер Краусс
С сайта Bootstrap - «Bootstrap поддерживает только одно модальное окно за раз. Вложенные модалы не поддерживаются, так как мы считаем, что они плохо работают с пользователем». -- Печаль во благо.
Джордж Бейер

Ответы:

133

У меня есть несколько проектов.

Самая большая разница на мой взгляд

  • Пользовательский интерфейс jQuery безопасен при отказе, он работает правильно и хорошо выглядит в старых браузерах, где Bootstrap основан на CSS3, что в новых браузерах означает БОЛЬШОЙ, а в старых - не так уж и много

  • Частота обновления: Bootstrap получает большие большие обновления с удивительными новыми функциями, но, к сожалению, они могут сломать предыдущий код, поэтому вы не можете просто установить bootstrap и обновить, когда выйдет новый основной выпуск, он в основном требует много нового кодирования

  • Пользовательский интерфейс jQuery основан на хорошей HTML-структуре с преобразованиями из JavaScript, а Bootstrap - на основе визуально настраиваемой встроенной структуры. (вызов виджета в JQUERY UI, определение его в Bootstrap)

Так что же выбрать?

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

Я всегда в конечном итоге использую оба, поэтому я могу использовать лучшее из обоих миров.

Вот ссылки на обе платформы, если вы решите их использовать.

  1. JQuery UI
  2. начальная загрузка
Марко Йоханнесен
источник
2
- Спасибо, что нашли время, чтобы ответить. Мне нужно что-то, работающее на IE9 или других браузерах более поздней версии, которые имеют довольно хорошую поддержку CSS3. Bootstrap начинает хорошо выглядеть для меня. Один вопрос. Я использую ASP.MVC. Я заметил кое-что о необходимости меньше. Будет ли Boostrap нормально работать с платформой Microsoft ASP MVC? Где "меньше" вписывается?
Джессика
Вы можете скомпилировать меньше файлов в файлы .css. Сборка начальной загрузки (с использованием make) создаст готовые к использованию CSS-файлы. Таким образом, вам не нужно использовать меньше.
Микаэльб
3
МЕНЬШЕ это рамки CSS. Он не нужен для использования Boostrap (у них обычная версия CSS / JS), но с LESS вы можете легко создавать переменные в CSS (изменять цвета и т. Д.), Делать его зависимым, иметь функции. Смотрите здесь: lesscss.org, и есть бета-версия для компилятора в .NET, смотрите: dotlesscss.org
Марко Йоханнесен,
20
Как вы вообще используете «лучшее из обоих миров»? Самое близкое, что я получил, - это использование jQueryUI Bootstrap (в основном, тема jQueryUI), но все же он предназначен для Bootstrap 1.4, а не 2.0, и при попытке использовать JS для кнопок и т. Д. Возникают конфликты
Адам Линч
3
@ PhoenixX_2 постараюсь! Пример: в bootstrap вы пишете все классы на элементе button (т.е. button button-primary button-small, где в jQueryUI вы назначаете элемент для кнопки, т.е. просто добавляете «btn», а затем через JS вы делаете его кнопкой $(".btn").button(). Это означает, что в Bootstrap вы определите его в HTML, а в jQueryUI вы определите его в JS. Отрицательные значения в Bootstrap - это необходимость редактировать HTML, если вы обновляете / меняете что-то (например, версии Bootstrap), где jQueryUI вам просто нужно изменить JS, что часто проще. Есть и плюсы и минусы с обоими! :)
Марко Йоханнесен
73

Используя оба, Twitter Bootstrap - превосходный набор технологий. Вот некоторые отличия,

  • Виджеты : JQuery UI выигрывает здесь. Предоставляемый им виджет даты очень полезен, а Twitter Bootstrap ничего подобного не предоставляет.
  • Строительные леса : Bootstrap выигрывает здесь. Сетка Твиттера, как текучая, так и фиксированная, на высшем уровне. Пользовательский интерфейс jQuery даже не предоставляет это направление, оставляя макет страницы до конечного пользователя.
  • Превосходный профессионализм : Bootstrap, использующий CSS3, впереди лиги, а интерфейс jQuery выглядит сравнительно устаревшим.
  • Иконки : Я пойду завяжу это. Bootstrap имеет более приятные значки, чем jQuery UI , но мне не нравятся термины «один бит», Glyphicons Halflings обычно не доступны бесплатно, но договоренность между Bootstrap и создателями Glyphicons сделала это возможным для вас как для разработчиков бесплатно. В качестве благодарности, мы просим вас, если это возможно, включать дополнительную ссылку на Glyphicons.
  • Изображения и миниатюры : переход к Bootstrap , пользовательский интерфейс jQuery здесь даже не помогает.

Другие заметки,

  • Важно понимать, как эти две технологии конкурируют и в сферах. Существует много совпадений, но если вам нужны простые леса и создание фиксированных / текучих сред, Bootstrap - это не другая технология, это лучшая технология. Если вам нужен какой-то один виджет, пользовательский интерфейс jQuery, вероятно, даже не входит в первую тройку. Сегодня jQuery UI - это, в основном, игрушка для согласованности и подтверждения концепции создания клиентского виджета с использованием унифицированной среды.
Эван Кэрролл
источник
34

Вы можете использовать оба с относительно небольшими проблемами. Twitter Bootstrap использует jQuery 1.7.1 (на момент написания статьи), и я не могу придумать каких-либо причин, по которым вы не можете интегрировать дополнительные компоненты Jquery UI в ваши 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.

Использование LESS в Twitter Bootstrap также необязательно. Они используют LESS для компиляции всего CSS, который используется Bootstrap, но если вы просто хотите переопределить или добавить свои собственные стили, они предоставляют пустой файл CSS для этой цели.

Существует также пустой файл js (script.js) для добавления пользовательского кода. Здесь вы бы добавили свои обработчики или селекторы для дополнительных компонентов jQueryUI.

eterps
источник
Отличный ответ. Быстрый вопрос, что на самом деле предлагает пользовательский интерфейс jquery, который не включен в загрузчик Twitter и его плагины?
MindWire
5
Извините, только что видел это. Что касается виджетов js, в пользовательском интерфейсе jQuery есть указатель даты и ползунок, которые не включены в Bootstrap. Также jqUI включает взаимодействия и эффекты, такие как перетаскивание, анимация показа / скрытия, переключение классов и многое другое. Объединение взаимодействий jqUI с компонентами макета Bootstrap может быть очень мощным сочетанием.
eterps
6
Одна проблема, которую нужно остерегаться; оба проекта определяют $ .fn.button несовместимыми способами.
Леви
27

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

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

Поэтому я не вижу смысла в использовании чего-то, что в конечном итоге устареет ...

Раджив
источник
43
Все в конечном итоге будет устаревшим. Нет смысла что-либо делать.
Тилгови
6
Правда, нам просто нужно выбрать тот, который, по нашему мнению, продержится дольше.
Раджив
8
Нет, тебе просто нужно выбрать ту, которая принесет деньги от твоих клиентов. Как только он заработает, он должен работать некоторое время, даже если он выходит из моды, поэтому единственное реальное беспокойство - это деньги.
Адам