Не работает bootstrap react

Как включить bootstrap css и js в приложение reactjs?

Я новичок в reactjs, я хочу включить bootstrap в мое приложение react

Я установил bootstrap by npm install bootstrap —save

теперь, хотите загрузить bootstrap css и js в моем приложении react.

Я использую webpack.

webpack.конфиг.js

моя проблема: «как включить bootstrap css и js в приложение reactjs из node_modules?»Как настроить bootstrap для включения в мое приложение react?

9 ответов

если вы новичок в реагировании и использовании create-react-app cli настройка. Затем выполните приведенную ниже команду NPM, чтобы включить последнюю версию bootstrap.

затем добавьте следующую инструкцию import в .js

не забудьте использовать className как атрибут (react использует className как атрибут вместо класс)

вы не можете использовать компоненты Javascript на основе Bootstrap Jquery в приложении React, так как все, что пытается манипулировать DOM вне React, считается плохой практикой. Здесь вы можете прочитать подробнее о.

Как включить Bootstrap в приложение React:

1) рекомендовано. Вы можете включить необработанные CSS-файлы Bootstrap, как указано в других ответах.

2) посмотри react-bootstrap библиотека. Это исключительно написано для реакции.

3) для Bootstrap 4 есть reactstrap

бонус

в эти дни я обычно избегаю загрузочных библиотек, которые предоставляют готовые к использованию компоненты (вышеупомянутые react-bootstrap или reactstrap и т. д.). Поскольку вы становитесь зависимыми от реквизита, который они берут (вы не можете добавить пользовательское поведение внутри них), и вы теряете контроль над DOM, который производят эти компоненты.

поэтому либо используйте только Bootstrap CSS, либо оставьте Ушко наружу. Общее эмпирическое правило: если вы не уверены, нужно ли вам это, вам это не нужно. Я видел много приложений, которые включают Bootstrap, но используют только небольшое количество CSS, и иногда большая часть этого CSS переопределяется пользовательскими стилями.

можно просто import файл css, где вы хотите. Webpack позаботится о том, чтобы связать css, если вы настроили загрузчик по мере необходимости.

и webpack конфиг вроде

Примечание: Вы также должны добавить загрузчики шрифтов, иначе вы получите ошибку.

Via npm, вы бы запустить folowing

если bootstrap 4, также добавьте поппер.js

добавить следующее (как новый объект) в свой конфигурация webpack loaders: [ массив

добавьте к вашему индекс или планировка

пожалуйста, перейдите по ссылке ниже, чтобы использовать bootstrap с React. https://react-bootstrap.github.io/

поместите загрузочный CDN для CSS в тег индекса.html-файл в react и Bootstrap CDN для Js в теге индекса.HTML-файл. Применение класса вместо класса следуйте ниже индекса.HTML-код

и добавьте import в свой индекс.файл JS

или вы можете просто добавить CDN в свой индекс.HTML-файл.

вы можете установить его dirctly через

затем импортируйте то, что вам действительно нужно из bootstrap, например :

а также вы можете установить:

и для CSS вы можете прочитать эту ссылку также carfuly

надеюсь, это полезно;)

Шаг 1: с помощью NPM установите эту команду ниже

Шаг 2: пример индекса.в JS скрипт импорта ниже команду

Шаг 3: компоненты пользовательского интерфейса см. ниже веб-сайт reactstrap.гитуб.io

на всякий случай, если вы можете использовать yarn что рекомендуется для приложений React,

вы можете сделать,

это добавит bootstrap в качестве зависимости от вашего package.json как хорошо.

после этого просто импортируйте bootstrap в своем .

Источник

Bootstrap Dropdown not working in React

I’m trying to get a dropdown working inside a form for one of my React components. Here is how I’m setting up the dropdown portion of the code, the following is inside a form parent tag which is inside the div tag that I’m returning.:

However, when I click the Dropdown button, it does not display the dropdown menu and the items in it.

All my other bootstrap components are working fine. What am I doing wrong?

I referenced bootstrap in my index.js:

Am I missing something?

6 Answers 6

To make dropdown menu and other js stuff work in 4th Bootstrap you need just follow next steps: install with npm to dependencies:

add it to index.js

all steps are taken from here

It’s because you’ve added HTML and CSS but not the js for it. Your code doesn’t know what to do when you click on the dropdown. Here is an example how you have to do that. And the code below:

after a long searching and tweaking I got the answer here

you just have to add a css to resolve this issue. when you click on dropdown button, it adds a class «show» to that element and as per bootstrap that much is sufficient to make a dropdown button work.

for me it work like charm.

I tries @teimurjan solution and it worked for me but with two issues

1. I have to manage a state even though its not needed
2. once dropdown clicked the expanded menu does not disappear on click of body or anywhere else.

Источник

Два способа интеграции Bootstrap в React-приложение

В этой статье мы рассмотрим способы подключения фреймворка Bootstrap к React -приложению. Я покажу два способа интеграции Bootstrap и React. В первом способе мы будем использовать менеджер пакетов npm, который дает возможность использовать все классы Bootstrap в React- приложениях.

Второй метод заключается в установке готового пакета React-Bootstrap. Данная сборка позволяет использовать JavaScript компоненты фреймворка Bootstrap (кнопки, формы, элементы навигации) в React- приложениях. Мы рассмотрим оба способа, чтобы вы могли выбрать наиболее подходящий.

Пример использования элементов Bootstrap в оформлении React- приложения:

Первый способ интеграции Bootstrap и React

Прежде всего, установим фреймворк Bootstrap, используя следующую команду для менеджера пакетов npm:

После успешной установки необходимо импортировать CSS элементы Bootstrap в файл src/index.js , с помощью команды, приведенной ниже:

Код в файле src/index.js должен выглядеть следующим образом:

Теперь вы можете использовать классы Bootstrap, как это сделал я в файле src/App.js (результат – на скриншоте, продемонстрированном в начале статьи):

Второй способ подключения Bootstrap к React-приложениям

В этом методе мы установим сборку React-Bootstrap с помощью следующей npm команды:

После завершения установки импортируем CSS элементы Bootstrap в файл src/index.js :

Код файла src/index.js выглядит следующим образом:

Все готово, можно использовать классы Bootstrap, как это сделано в моем примере файла src/App.js на скриншоте, приведенном в начале статьи:

Пожалуйста, оставьте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, лайки, отклики, подписки!

Источник

Интеграция Bootstrap с React: руководство для разработчиков

Интеграция Bootstrap с React позволяет разработчикам React использовать современную сеточную систему Bootstrap и ее различные другие компоненты.

В этом уроке мы собираемся:

• изучить инструменты и методы для создания пользовательского интерфейса с использованием Bootstrap для веб-приложения на основе React
• используйтеactstrap для создания приложения списка контактов React

React — одна из самых популярных технологий JavaScript для интерактивных веб-приложений. Его популярность проистекает из модульного подхода на основе компонентов, компоновки и быстрого алгоритма рендеринга.

Однако, будучи библиотекой представлений, React не имеет встроенного механизма, который мог бы помочь нам создавать проекты, которые бывают адаптивными, изящными и интуитивно понятными. Вот тут-то и вступает фреймворк дизайна, такой как Bootstrap .

Почему нельзя просто включить компоненты Bootstrap в React

Объединить Bootstrap с React не так просто, как добавить
в файл index.html . Это потому, что Bootstrap зависит от jQuery для питания определенных компонентов пользовательского интерфейса. В jQuery используется метод прямого манипулирования DOM, который противоречит декларативному подходу React.

Если нам нужен Bootstrap только для адаптивной сетки из 12 столбцов или компонентов, которые не используют jQuery, мы можем просто прибегнуть к ванильной таблице стилей Bootstrap. Иначе, есть много библиотек, которые заботятся о преодолении разрыва между React и Bootstrap. Мы сравним оба метода, чтобы лучше подходить к конкретному случаю.

Настройка таблицы стилей Bootstrap с помощью React

Давайте используем CLI Create React App для создания проекта React, который требует нулевой конфигурации для начала работы.

Мы устанавливаем приложение Create React и запускаем следующую команду, чтобы начать новый проект и обслуживать сборку разработки:

Вот структура каталогов, созданная приложением Create React:

Далее, давайте загрузим последнюю версию библиотеки Bootstrap с официального сайта Bootstrap . Пакет включает в себя как скомпилированные, так и минимизированные версии CSS и JavaScript. Мы просто скопируем CSS и поместим его в каталог public/ . Для проектов, которым нужна только сетка, есть также таблица стилей, специфичная для сетки.

Затем мы создаем новый каталог для css внутри public/ , вставляем bootstrap.min.css в наш недавно созданный каталог css и связываем его с public/index.html :

В качестве альтернативы, мы можем использовать CDN для извлечения минимизированного CSS:

Давайте посмотрим, что работает, а что нет с этой настройкой.

Использование Vanilla Bootstrap с React

После добавления таблицы стилей Bootstrap в проект React мы можем использовать обычные классы Bootstrap внутри кода JSX. Давайте перейдем на демонстрационный сайт Bootstrap и скопируем некоторый случайный пример кода, просто чтобы убедиться, что все работает как надо:

Как мы видим, форма выглядит хорошо, а NavBar — нет. Это потому, что NavBar зависит от плагина jQuery Collapse , который мы не импортировали. Помимо невозможности переключения навигационных ссылок, мы не можем использовать некоторые функции, такие как выпадающие меню, закрываемые оповещения и модальные окна.

Разве не было бы замечательно, если бы мы могли импортировать Bootstrap в качестве компонентов React, чтобы максимально использовать возможности React? Например, представьте, можно ли использовать комбинацию компонентов Grid, Row и Column для организации страницы вместо надоедливых HTML-классов:

К счастью, нам не нужно реализовывать собственную библиотеку для этой цели, так как уже есть некоторые популярные решения. Давайте посмотрим на некоторые из них.

Обзор сторонних библиотек для React и Bootstrap

Существует несколько библиотек, которые пытаются создать реализацию Bootstrap для React, чтобы мы могли использовать компоненты JSX при работе со стилями Bootstrap. Я собрал список нескольких популярных модулей Bootstrap, которые мы можем использовать в наших проектах React.

React-Bootstrap — безусловно, одна из самых популярных библиотек для добавления компонентов Bootstrap в React. Однако на момент написания этого руководства оно предназначалось для Bootstrap v3, а не для последней версии Bootstrap. Он находится в активной разработке, и API может сломаться, когда выйдет более новая версия.

Reactionstrap — это еще одна библиотека, которая дает нам возможность использовать компоненты Bootstrap в React. В отличие от React-Bootstrap, responsestrap создан для последней версии Bootstrap. Модуль включает компоненты для типографики, значков, форм, кнопок, таблиц, сеток макетов и навигации. Он также находится в активной разработке и является хорошей альтернативой для создания приложений Bootstrap на основе React.

Есть несколько других библиотек, таких как React-UI , и специфичные для домена модули, такие как React-bootstrap-table и CoreUI-React Admin Panel на GitHub, которые предоставляют расширенную поддержку для создания потрясающих интерфейсов с использованием React.

Источник

Как использовать Bootstrap с React?

Все мы знаем популярность React и то, как эта библиотека упростила задачи разработки для фронтенд-разработчиков. React — самая популярная интерфейсная библиотека для создания пользовательского интерфейса приложения. Отрасли постепенно сокращают использование библиотек jQuery и DOM для создания своих приложений.

Когда дело доходит до создания адаптивного приложения, на рынке полезны фреймворки CSS. Если вы работаете фронтенд-разработчиком, то фреймворки Bootstrap, Foundation и Bulma для вас не новы. Большинство отраслей используют фреймворк Bootstrap. Миллионы веб-сайтов работают в режиме начальной загрузки.

В этом блоге мы собираемся обсудить, как использовать React и Bootstrap, как добавить bootstrap в приложение React. Как установить пакет начальной загрузки React и как использовать его в приложении React. Начнем с этого…

Метод добавления Bootstrap в React

В основном есть три способа добавить Bootstrap в приложение React. Обсудим их по очереди.

1. Использование Bootstrap CDN.
2. Импортировать Bootstrap в React как зависимость
3. Установите пакет React Bootstrap (например, bootstrap-react или reactstrap).

1. Использование Bootstrap CDN

Это один из самых простых способов использовать бутстрап в вашем приложении React. Лучшее в загрузочном CDN — это отсутствие необходимости в установке или загрузке. Вам просто нужно скопировать и вставить ссылку в заголовок вашего приложения, чтобы оно заработало. Ниже находится ссылка, которая вам нужна.

Если вашему приложению нужны компоненты JavaScript вместе с начальной загрузкой, то в нижней части страницы разместите тег

Источник