Как подключить bootstrap к react проекту

Аватар пользователя Ivan Gagarinov
Ivan Gagarinov
16 июля 2024

Чтобы подключить Bootstrap React, вам нужно выполнить несколько шагов:

  1. Установить Bootstrap в проект с помощью npm или yarn: Для npm:

    npm install bootstrap
    

    Для yarn:

    yarn add bootstrap
    
  2. После установки Bootstrap, необходимо импортировать его стили в проект, например в App.js добавить строку:

    import 'bootstrap/dist/css/bootstrap.min.css';
    
  3. Теперь можно использовать компоненты Bootstrap или его стили:

    import React from 'react';
    import Button from 'react-bootstrap/Button';
    
    const MyButton = () => {
      return (
        <Button variant="primary">Нажми меня</Button>
      );
    }
    
    export default MyButton;
    
  4. Если вы хотите использовать JavaScript-функционал Bootstrap, такой как модальные окна или вкладки, вам нужно установить и импортировать также Popper.js и jQuery. Установите их с помощью npm или yarn:

    Для npm:

    npm install popper.js jquery
    

    Для yarn:

    yarn add popper.js jquery
    

    Импортируйте их в ваш проект, добавив следующие строки в файл, где вы хотите использовать JavaScript-функционал Bootstrap:

    import 'jquery/dist/jquery.min.js';
    import 'popper.js/dist/popper.min.js';
    import 'bootstrap/dist/js/bootstrap.min.js';
    
0 0
Познакомьтесь с основами HTML и CSS бесплатно

Похожие вопросы