Bootstrap — это (и будет в течение длительного времени), без сомнения, одна из самых удивительных и известных платформ HTML, CSS и JavaScript, которую вы можете использовать в качестве основы для создания веб-сайтов или веб-приложений. Помимо других функций, он включает в себя базовый CSS и HTML для типографики, значков, форм, кнопок, таблиц, сеток макетов и навигации, а также настраиваемые jquery-плагины и поддержку адаптивных макетов.
С появлением ReactJS многие разработчики приняли его в качестве инструмента по умолчанию в своем ежедневном процессе разработки. Это означает, что jQuery был и остается стороной, по крайней мере, для разработки очень динамичных веб-приложений. Но что делать jQuery с Bootstrap? Что ж, jQuery необходим для правильной работы компонентов Bootstrap, и это другая проблема, оригинальная библиотека Bootstrap использует собственный DOM браузера, а React реализует виртуальный DOM. Вот почему, чтобы решить все эти неудобства и сохранить легкую традицию использования Bootstrap в качестве основы для пользовательского интерфейса, была написана библиотека загрузок React.
Эта библиотека может помочь вам работать в режиме React, используя удивительные и простые в использовании функции Bootstrap.
1. Установите React Bootstrap
Модуль React Bootstrap реализует все компоненты Bootstrap 3 как компоненты React, поэтому их можно легко встроить в ваше приложение. Это не зависит от jQuery, поэтому ваш код будет максимально чистым.
Чтобы установить его, перейдите в каталог вашего проекта с терминалом и установите его, выполнив следующую команду:
npm install react-bootstrapПосле установки вы сможете использовать любые компоненты, которые может предложить оригинальная библиотека Bootstrap. Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальный репозиторий на Github здесь.
2. Определите свою тему Bootstrap
Как вы знаете, каждый создает свою собственную тему Boostrap или просто использует тему по умолчанию. Следуя этой простой рекомендации, React-Bootstrap не зависит от какой-либо версии Bootstrap CSS и не реализует свою собственную версию. Очевидно, что вам нужно добавить немного CSS, чтобы компонент выглядел хорошо, однако это полностью ваше дело. Самый простой способ — использовать любую версию Bootstrap CSS из бесплатного CDN (стандартная и широко известная базовая тема начальной загрузки):
Или вы можете использовать тему из потрясающая бесплатная коллекция тем Bootstrap от Bootswatch как «United», который выглядит намного лучше, чем стандартная тема Bootstrap:
Процедура очень проста, просто включите файл CSS внутри тега head вашего документа, и вы готовы к работе:
My Awesome React App
Loading...
Теперь ваши компоненты в React будут выглядеть так, как должны. В качестве альтернативы вы можете настроить webpack так, чтобы он включал и передавал исходные файлы SASS начальной загрузки, так что вы можете настраивать и изменять стили Bootstrap по своему усмотрению.
3. Использование компонентов Bootstrap в React
Как типичный подход в React, каждый компонент Bootstrap может быть импортирован из библиотеки:
раскладка
Одной из самых удивительных особенностей Bootstrap была его революционная система координатной сетки. Грид-системы используются для создания макетов страниц через ряд строк и столбцов, в которых размещается ваш контент. Как правило, каждый ряд начальной загрузки оборачивается внутри container либо нормально, либо container-fluid, В версии React эти компоненты называются Grid и могут использоваться следующим образом:
import Grid from 'react-bootstrap/lib/Grid';
const Container = (
{/* Normal BS would be:
*/}
);
const ContainerFluid = (
{/* Normal BS would be:
*/}
);Далее следует компонент Row, который определяет горизонтальный элемент div, в который можно поместить несколько столбцов:
import Row from 'react-bootstrap/lib/Row';
const MyRow = (
{/* Normal BS would be:
*/}
);И, наконец, широко известные отзывчивые колонки начальной загрузки.
import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
const MyAwesomeLayout = (
{/* Some content */}
{/* Some content */}
{/* Some content */}
{/* Some content */}
{/* Some content */}
{/* Some content */}
{/* Some content */}
{/* Some content */}
);Кнопки
Bootstrap предоставляет различные стили кнопок, которые можно легко использовать с React. При простой загрузке вам нужно было только предоставить класс для определения стиля кнопки, теперь в ReactJS вы можете установить его тип с помощью bsStyle имущество:
import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
import Button from 'react-bootstrap/lib/Button';
const buttonsInstance = (
{/* Standard button */}
Default
{/* Provides extra visual weight and identifies the primary action in a set of buttons */}
Primary
{/* Indicates a successful or positive action */}
Success
{/* Contextual button for informational alert messages */}
Info
{/* Indicates caution should be taken with this action */}
Warning
{/* Indicates a dangerous or potentially negative action */}
Danger
{/* Deemphasize a button by making it look like a link while maintaining button behavior */}
Link
);модальности
Следующий компонент создает кнопку, которая отображает модальный при нажатии. Как только вы нажмете кнопку закрытия, диалоговое окно закроется автоматически:
import React from 'react';
import Modal from 'react-bootstrap/lib/Modal';
import Button from 'react-bootstrap/lib/Button';
export default class App extends React.Component {
constructor(props, context) {
super(props, context);
// Handle state
this.state = {
show: false
};
}
render() {
// Close the dialog
let close = () => {
this.setState({ show: false});
};
return (
this.setState({ show: true })}
>
Launch contained modal
Contained Modal
Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
Close
);
}
}
Поскольку мы не хотели перечислять все компоненты начальной загрузки, но наиболее часто используемые, вы будете найти все компоненты в документации на официальном сайте React Bootstrap здесь.
