8 полезных библиотек Bootstrap UI-компонентов в 2018 году

Адаптированный перевод статьи Джонатана Саринга «9 Bootstrap UI Component Libraries for 2018».

Библиотека Bootstrap компонентов

Bootstrap это самый популярный в мире фронтенд-фреймворк. Он содержит шаблоны типографики, форм, кнопок и других компонентов пользовательского интерфейса на основе HTML и CSS.

Чтобы помочь вам начать, мы собрали некоторые из лучших UI-наборов. Конечно, беспристрастным наш выбор назвать нельзя: он базируется на мнении членов сообщества.

С помощью Bit (GitHub) вы можете с легкостью сделать любую библиотеку разделяемой коллекцией индивидуальных компонентов, которые можно будет использовать и разрабатывать где угодно.

1. React Bootstrap

React Bootstrap

Библиотека React Bootstrap

React Bootstrap это, пожалуй, самая популярная реализация Bootstrap компонентов, созданная с помощью React (14 тысяч звезд на GitHub, 300 тыс. скачиваний в неделю). Каждый компонент построен с нуля в качестве React-компонента. Для работы с существующими темами Bootstrap эти компоненты опираются только на таблицы стилей Bootstrap.

2. Reactstrap

Reactstrap

Reactstrap это библиотека «React Bootstrap 4 компонентов без запоминания состояния», получившая на GitHub больше 6 тысяч звезд. Она не зависит от jQuery или Bootstrap Javascript, однако на них полагается Poppers.js, нужный для более продвинутого позиционирования контента.

3. Material Design React Bootstrap

Material Design React Bootstrap

Библиотека Material Design React Bootstrap

Эта библиотека – набор компонентов React Bootstrap для Material Design. Компоненты предоставляют кросс-браузерную совместимость. Они прекрасно работают с Chrome, Firefox, Safari, Opera и Microsoft Edge. Чтобы помочь с проблемами выравнивания, включена поддержка системы Flexbox. Документация обширна и полезна. Познакомиться с проектом можно с помощью этого видео.

4. BootstrapVue

BootstrapVue

Библиотека BootstrapVue

BootstrapVue это понятная и довольно популярная (6,5 тысяч звезд на GitHub) реализация компонентов Bootstrap 4 и grid-системы для Vue.js. Имеет обширную и автоматизированную разметку доступности WAI-ARIA. Библиотека создана для построения адаптивных, mobile-first веб-проектов с использованием Vue.js и Bootstrap 4. Она предоставляет два полезных vue-cli шаблона: webpack-simple и webpack.

5. UIV

Библиотека UIV

Набор UI-компонентов Bootstrap 3, реализованный в Vue 2. Он довольно легковесный: все компоненты в Gzip весят примерно 20KB. Зависит только от Vue и Bootstrap CSS. Компненты можно импортировать по отдельности. Есть поддержка всех современных браузеров (IE 9+). SSR тоже поддерживается.

6. NG Bootstrap

NG Bootstrap

Библиотека NG Bootstrap

Angular 6 и Bootstrap 4 это интересная комбинация для адаптивных макетов, создаваемых с помощью компонентов Angular. NG Bootstrap это библиотека UI-компонентов, написанная на TypeScript, со 100% покрытием тестами. Она буквально создана для успешной работы. Зависит она только от Angular и Bootstrap 4 CSS. Активно поддерживается.

7. AngularJS Bootstrap

AngularJS Bootstrap

Библиотека AngularJS Bootstrap

Эта библиотека заработала 15 тысяч звезд на GitHub. Она представляет собой набор собственных директив AngularJS для Bootstrap с маленьким объемом (20kB в gzip) и без JS-зависимостей (jQuery, bootstrap JS). Скачать можно здесь, а посмотреть директивы – здесь.

8. NGX Bootstrap

NGX Bootstrap

Библиотека NGX Bootstrap

NGX Bootstrap реализует виджеты Bootstrap 3 и 4 с помощью Angular. Этот проект получил на GitHub 4,5 тысячи звезд. Содержит все основные (и не только) Bootstrap-компоненты с использованием разметки и CSS, предоставляемых bootstrap, так что у вас не будет необходимости включать оригинальные JS-компоненты. Вы можете реализовывать собственные шаблоны и стили. Все компоненты созданы расширяемыми и адаптивными, со стандартной производительностью как для мобильных, так и для десктопных проектов. Испытать компоненты можно здесь.


[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх