Основной курс Bootstrap4

Формы и изображения Bootstrap4

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

Используя встроенные классы Bootstrap, вы можете легко устанавливать стили изображений, например, создавать эллиптические или круглые изображения, или придавать им эффект miniature.

Изображения с закругленными углами

.rounded класс позволяет изображениям отображаться с закругленными углами:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Изображения с закругленными углами</h2>
　　<p>.rounded класс позволяет изображениям отображаться с закругленными углами:</p>　　　　　　　　　　　　
　　<img src="https://ru.oldtoolbag.com/run/images/cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">　
</div>
</body>
</html>

Проверьте, что ‹/›

Эллиптические изображения

.rounded-circle класс может устанавливать эллиптические изображения:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Эллиптические изображения</h2>
　　<p>.rounded-circle класс может устанавливать эллиптические изображения:</p>　　　　　　　　　　　　
　　<img src="https://ru.oldtoolbag.com/run/images/cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">　
</div>
</body>
</html>

Проверьте, что ‹/›

Эскиз

Класс .img-thumbnail используется для создания эскиза изображения (изображение с рамкой):

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Эскиз</h2>
　　<p>Класс .img-thumbnail используется для создания эскиза изображения (изображение с рамкой):</p>　　　　　　　　　　　　
　　<img src="https://ru.oldtoolbag.com/run/images/cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
</div>
</body>
</html>

Проверьте, что ‹/›

Способы выравнивания изображений

Используйте класс .float-right для выравнивания изображения вправо, и класс .float-left для выравнивания влево:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Способы выравнивания изображений</h2>
　　<p>Используйте класс .float-right для выравнивания изображения вправо, и класс .float-left для выравнивания влево:</p>
　　<img src="https://ru.oldtoolbag.com/run/images/paris.jpg" class="float-left">　
　　<img src="https://ru.oldtoolbag.com/run/images/cinqueterre.jpg" class="float-right">
</div>
</body>
</html>

Проверьте, что ‹/›

Адаптивные изображения

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

Мы можем установить адаптивное изображение, добавив класс .img-fluid в тег <img> .

.img-fluid класс устанавливает max-width: 100%; 、 height: auto; :

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Адаптивное изображение</h2>
　　<p>Класс .img-fluid может установить адаптивное изображение, измените размер браузера, чтобы увидеть эффект:</p>
　　<img src="https://ru.oldtoolbag.com/run/images/paris.jpg" class="img-fluid">
</div>
</body>
</html>

Проверьте, что ‹/›

Jumbotron Bootstrap4 Таблицы Bootstrap4