В этой статье перечислен ряд ресурсов, которые предоставляют компоненты Bootstrap для ваших приложений Angular, React и Vue.js.
В наши дни в Интернете полно одностраничных приложений (SPA), которые быстро реагируют на взаимодействие с пользователем. Часто они основаны на JavaScript-фреймворках, таких как Angular , React и Vue.js.
Эти библиотеки являются отличными инструментами, помогающими сохранить код JavaScript, необходимый для создания SPA, более организованным и обслуживаемым, при этом используя умные методы для обновления DOM без замедления веб-страницы.
Когда дело доходит до стилизации компонентов, которые вы можете создавать с помощью этих библиотек, вы избалованы выбором: вы можете написать свой собственный глобальный документ CSS, как это обычно делается на обычных веб-сайтах, вы можете написать встроенные стили или вы можете использовать каркасы пользовательского интерфейса — на этом я сосредоточусь здесь.
Элементы интерфейса Bootstrap для разработчиков Angular
Angular — самая старая из фреймворков, с которыми я сталкиваюсь в этой статье. Его зрелость и долгая жизнь в жестоком жизненном цикле JavaScript-фреймворков являются признаком его надежной и надежной основы для веб-проектов.
Какие инструменты есть, если вы хотите использовать Bootstrap для стилизации своего приложения Angular?
нг-самозагрузка
ng-bootstrap предлагает набор компонентов в стиле Bootstrap, которые позволяют легко создавать приложения Bootstrap с Angular.
В частности, этот ресурс содержит набор директив Angular, основанных на разметке и стилях Bootstrap. Чтобы использовать его, важно, чтобы вы не включали файлы Bootstrap JavaScript. Вам нужны только файлы Angular и Bootstrap CSS .
ng-bootstrap — это бесплатный проект с открытым исходным кодом . Не стесняйтесь внести свой вклад или попросить новые функции на GitHub.
NGX-самозагрузка
Это еще одна замечательная модульная библиотека с открытым исходным кодом компонентов Bootstrap на базе Angular. Вам не нужно использовать jQuery или какой-либо JS-код Bootstrap, хотя разметка и CSS предоставляются Bootstrap.
Чтобы установить библиотеку с помощью npm , введите npm строку в командной строке:
npm install ngx-bootstrap --save
Затем включите ссылку на таблицу стилей Bootstrap в документе index.html :
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
Вы можете обратиться к удивительным страницам документации на веб-сайте ngx-bootstrap для подробных объяснений и учебных пособий.
Элементы интерфейса Bootstrap для разработчиков React
React был создан разработчиками Facebook и является одной из самых современных библиотек JavaScript для создания современных пользовательских интерфейсов.
Если вы хотите придать своему приложению React модификацию Bootstrap, вот некоторые из доступных вам вариантов.
reactstrap
Reactionstrap — это быстрая и удобная библиотека, которая позволяет добавить внешний вид Bootstrap 4 в ваше приложение React.
Стилизация предоставляется Bootstrap, а функциональность JavaScript встроена в компонентыactstrap. Это означает, что вам не нужно включать JS-код jQuery или Bootstrap. Тем не менее, вам нужно включить response-popper , поскольку некоторые динамические компоненты Bootstrap, такие как раскрывающиеся списки, зависят от правильной работы Popper.js .
Вы можете установить responsestrap через CDN:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js">
В этом случае вам нужно включить библиотеку React и ReactTransitionGroup перед ответной полосой.
Вы также можете установить библиотеку и все зависимости с помощью NPM:
npm install --save reactstrap@next react react-dom
Если вам интересно, перейдите к документации и узнайте больше о каждом компоненте и о том, как интегрироватьactstrap с настройкой Create React App .
Реагировать-Bootstrap
React-Bootstrap — это проект с открытым исходным кодом, который все еще находится в активной разработке до выпуска 1.0.0.
Поскольку эта библиотека не поддерживает какую-либо конкретную версию Bootstrap, вы можете включить любую таблицу стилей Bootstrap, которая, по вашему мнению, лучше всего подходит для вашего проекта. Вообще говоря, включая последнюю версию Bootstrap, вы сможете воспользоваться преимуществами улучшений и исправлений ошибок, так что это должен быть ваш предпочтительный вариант.
Самый простой способ включить Bootstrap в ваше приложение React — через CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
Что касается JavaScript, вам просто нужен React; Для работы Rect-Bootstrap не требуется jQuery или Bootstrap JS. Вы можете установить эту библиотеку Bootstrap UI, используя NPM:
npm install --save react react-dom npm install --save react-bootstrap
Установка библиотеки таким способом позволит вам импортировать отдельные компоненты react-bootstrap/lib а не всю библиотеку. При этом используются только отдельные компоненты, которые вам нужны, а не весь пакет, что отлично подходит для контроля размера файла.
Кроме того, вы можете включить React-Bootstrap и библиотеку React в виде пакета, используя CDNJS, и ссылаться на файлы в своих тегах <script> :
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/<version>/react-bootstrap.min.js"></script>
Дизайн материала для Bootstrap React Version
Material Design для Bootstrap (также доступен для Angular и Vue ) — это библиотека пользовательского интерфейса для React, которая сочетает в себе внешний вид Bootstrap и Google Material Design .
Среди его преимуществ:
- быть в курсе последнего выпуска Bootstrap
- его удивительная документация и учебные пособия
- быть совместимым с последней версией React
- его использование JSX
- его простая установка
- быть свободным для личных и коммерческих проектов.
Чтобы начать работу с Material Design для Bootstrap, просто скачайте его прямо с сайта проекта или используйте NPM:
npm install mdbreact
или используйте пряжу:
yarn add mdbreact
Как только у вас есть файлы, все связано и готово к работе. Запустите npm install затем npm start и получите кодирование.
Элементы интерфейса Bootstrap для разработчиков Vue
Vue.js существует не долго, но он неуклонно набирает популярность благодаря ряду преимуществ:
- легко начать: вы можете быстро включить его в HTML-проект через CDN и включить его в свой обычный HTML-документ, используя его директивы
- вы можете решить включить Vue постепенно, начав с нескольких функций и в конечном итоге превратить его в полноценный фреймворк
- у него небольшой размер файла, и он очень производительный из коробки.
Для интеграции Bootstrap в ваше приложение на основе Vue хорошим выбором является Bootstrap-Vue.
Bootstrap-Вью
Bootstrap-Vue представляет на своем веб-сайте библиотеку пользовательского интерфейса, которая:
предоставляет одну из наиболее полных реализаций компонентов Bootstrap V4 и системы сетки, доступных для Vue.js 2.4+, в комплекте с обширной и автоматической разметкой доступности WAI-ARIA.
Документация отличная, и вы также можете попробовать библиотеку, прежде чем включать ее в свой проект на площадке Bootstrap-Vue .
Вывод
В этой статье перечислен ряд библиотек пользовательского интерфейса, которые помогут вам придать компонентам SPA внешний вид и ощущение загрузки. Это полностью функциональные компоненты Bootstrap, которые работают с Angular, React и Vue из коробки, без дополнительной работы с вашей стороны.
Какой ваш любимый способ интеграции Bootstrap с вашим фреймворком на JavaScript?