Чтобы сделать изображение адаптивным с помощью Bootstrap, вы можете использовать классы img-fluid или img-responsive. Эти классы позволяют изображению автоматически подстраиваться под размер экрана и быть отзывчивым.
Прежде всего, убедитесь, что у вас есть подключен Bootstrap CSS. Это можно сделать, добавив следующий код в секцию <head> вашего HTML-документа:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
Когда CSS-файл Bootstrap подключен, вы можете добавлять классы img-fluid или img-responsive к своим изображениям.
Вот пример:
<img src="path/to/your/image.jpg" alt="Адаптивное изображение" class="img-fluid">
В этом примере img-fluid является классом Bootstrap, который делает изображение адаптивным. Если вы используете более старые версии Bootstrap, вы можете использовать класс img-responsive.
Вы также можете добавить другие стили к своим изображениям в сочетании с классами Bootstrap. Например, вы можете добавить класс rounded, чтобы сделать изображение круглым:
<img src="path/to/your/image.jpg" alt="Адаптивное изображение" class="img-fluid rounded">
Или вы можете добавить класс shadow, чтобы добавить тень к изображению:
<img src="path/to/your/image.jpg" alt="Адаптивное изображение" class="img-fluid shadow">
Используя эти примеры, вы можете создавать адаптивные изображения с различными стилями с помощью Bootstrap. Помните, что Bootstrap также предлагает множество других классов и компонентов для создания адаптивной веб-разработки, так что не стесняйтесь изучать документацию Bootstrap для большего понимания возможностей этого фреймворка.