Сначала нам нужно настроить файлы index.js и App.js. Сохраните файл index.js, как показано ниже, подключенным к файлу App.js.

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

Теперь перейдите на сайт bootstrap. Затем скопируйте полученный оттуда код, который можно увидеть в разделе пример.

Затем в файле App.js подготовьте браузер с контейнером и картой, используя имена классов, а затем вставьте туда скопированный код. Как вы можете видеть, это код Javascript, и вы должны внести некоторые изменения, чтобы заставить его работать.

постоянная кнопка=()=›{

возврат(

<>

‹h1 className= “text-center text-success my-5'›Bootstrap Cards‹/h1›

‹div className= «контейнер»›

‹div className= "строка"›

‹div className= "col md-3"

‹div className= «card» ›

‹img className= «card-img-top» src= «…» alt= « » /›

‹div className= “card-body”›

‹h5 className= “card-title”›Название карты‹/h5›

‹p className= “card-text”›Небольшой пример текста, который будет основываться на названии карточки и составлять основную часть содержимого карточки.‹/p›

‹a href= "#" className= "btn btn-primary"›Идти куда-нибудь‹/a›

‹/дел›

‹/дел›

‹/дел›

‹/дел›

‹/дел›

</>

);

};

кнопка экспорта по умолчанию

Вместо src добавьте ссылку на изображение. Затем скопируйте и вставьте код, который мы сделали для карты, и продублируйте его до 4 карт.

Изменив название карточки на «Цветы» и «Иди куда-нибудь» на «Подробнее», вы получите такой же вывод в браузере, как показано выше.

— — — — — — — — — — — — — — — — —

Подписывайтесь на меня!

Если вам понравилось, не забудьте похлопать :)

— — — — — — — — — — — — — — — — —

::Связаться с моими социальными сетями::

ЛинкедИн

Идентификатор почты: [email protected]