Полезные библиотеки пользовательского интерфейса Bootstrap, созданные с помощью React, Vue, Angular и других разработчиков.
Bootstrap - это самый популярный в мире интерфейсный фреймворк, разработанный для обеспечения согласованности между инструментами. Он содержит шаблоны на основе HTML и CSS для типографики, форм, кнопок и других компонентов пользовательского интерфейса.
С появлением последних фреймворков и библиотек, таких как React, Vue и Angular, мы создали множество проектов для реализации Bootstrap как набора повторно используемых компонентов пользовательского интерфейса. .
Чтобы помочь вам начать работу, мы собрали некоторые из лучших наборов пользовательского интерфейса, реализующих Bootstrap с современными фреймворками. Как и в большинстве случаев, имейте в виду, что некоторые в сообществе считают это самоуверенным выбором.
Используя Bit (GitHub), вы можете находить и повторно использовать определенные компоненты из этих библиотек или свои собственные компоненты. Они становятся доступными для вашей команды, с ними можно играть онлайн и устанавливать с помощью NPM / Yarn. Попробуй:
1. React Bootstrap
React-bootstrap, вероятно, является самой популярной (14K звезд, 300K загрузок в неделю) реализацией компонентов Bootstrap 3 + 4 в React. Каждый компонент был создан с нуля как компонент React, полностью полагаясь на таблицу стилей Bootstrap для работы с существующими темами Bootstrap.
2. Reactstrap
Reactstrap - это библиотека компонентов React Bootstrap 4 без сохранения состояния с более чем 6K звезд, которая не зависит от Bootstrap Javascript. Однако Poppers.js через react-popper используется для расширенного позиционирования контента, такого как всплывающие подсказки, всплывающие окна и автоматически переворачивающиеся раскрывающиеся списки. Ожидается, что контент будет составляться через props.children, а не с использованием именованных реквизитов для передачи в Компоненты.
3. Реагирующий бутстрап Material Design
Эта библиотека представляет собой набор компонентов React Bootstrap с Material Design. Компоненты обеспечивают кроссбраузерность. Отлично работает с Chrome, Firefox, Safari, Opera и Microsoft Edge. Полная поддержка системы макетов Flexbox включена, чтобы помочь с проблемами выравнивания, а документация обширна и полезна. Вы можете посмотреть это короткое видео для быстрого старта, чтобы начать работу.
4. BootstrapVue
BootstrapVue - это комплексная и довольно популярная (6,5 тыс. Звезд) реализация компонентов Bootstrap 4 и системы сеток для Vue.js с обширной и автоматизированной разметкой доступности WAI-ARIA. Он создан для адаптивных, ориентированных на мобильные устройства проектов в Интернете с использованием Vue.js и Bootstrap 4. Он также предоставляет два полезных шаблона vue-cli: webpack-simple и webpack.
5. UIV
Набор компонентов пользовательского интерфейса Bootstrap 3, реализованных в Vue 2. Он легкий со всеми компонентами ~ 20 КБ Gziped и зависит только от Vue и Bootstrap CSS. Вы можете индивидуально импортировать компоненты, которые обеспечивают поддержку всех современных браузеров (IE 9+). Также поддерживается SSR. Взглянем.
6. Реагирующий бутстрап Material Design
Эта библиотека с более чем 400 элементами пользовательского интерфейса, 600 значками и 70 анимациями CSS представляет собой многофункциональный набор пользовательских интерфейсов, основанный на Bootstrap и Vue. Компоненты созданы для быстрой адаптации, кроссбраузерности и гибкости настройки.
7. NG Bootstrap
Angular 6 и Bootstrap 4 - интересная комбинация для адаптивных макетов, созданных с использованием компонентов Angular. Написанная на TypeScript со 100% тестовым покрытием, NG-Bootstrap - это библиотека компонентов пользовательского интерфейса, созданная для этой работы. Это только зависимости Angular и Bootstrap 4 CSS, и они активно поддерживаются.
8. AngularJS Bootstrap.
Эта библиотека, имеющая 15 тыс. Звезд, представляет собой набор директив Native AngularJS для Bootstrap с небольшим размером (20 КБ в сжатом виде) и без зависимостей JS (jQuery, bootstrap JS). Вы можете скачать v2.5 здесь и просмотреть директивы здесь.
9. Загрузочная программа NGX
На уровне 4,5 тыс. Звезд ngx-bootstrap реализует виджеты Bootstrap 3 и 4 с Angular. Он содержит все основные (и не только) компоненты Bootstrap, использующие разметку и CSS, предоставляемые bootstrap, поэтому вам не нужно включать оригинальные компоненты JS. Вы можете реализовать свои собственные шаблоны и стили, и все компоненты разработаны с возможностью расширения и адаптируемости со стандартизованной производительностью как для мобильных устройств, так и для настольных компьютеров. Вы можете попробовать компоненты здесь.
