Сначала нам нужно настроить файлы 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]