English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap базовый курс

Bootstrap плагины

Изображения Bootstrap

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

  • .class-rounded：Добавьте border-radius:6px чтобы получить закругленные углы изображения.

  • .class-circle：Добавьте border-radius:50% чтобы сделать все изображение круглым.

  • .class-thumbnail：Добавьте внутренний отступ (padding) и серый край.

Смотрите примеры ниже:

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Пример - Изображение</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<img src="/run/images/download.png" class="class-rounded">
<img src="/run/images/download.png" class="class-circle">
<img src="/run/images/download.png" class="class-thumbnail">
</body>
</html>
Проверьте, пожалуйста ‹/›

Результат будет выглядеть так:

Класс <img>

Следующие классы можно использовать для любого изображения.

КлассОписаниеПример
.class-roundedДобавьте закругленные углы к изображению (не поддерживается IE8)Попробуйте
.class-circleСделайте изображение круглым (не поддерживается IE8)Попробуйте
.class-thumbnailФункция миниатюрыПопробуйте
.class-responsiveИзображения адаптивные (хорошо расширяются до родительского элемента)Попробуйте

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

Чтобы сделать изображения адаптивными, добавьте класс .class-responsive к тегу <img>. 　Изображения хорошо расширяются до родительского элемента.

.class-responsive applies styles max-width: 100%; и height: auto; к изображениям:

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Сайт основного руководства (oldtoolbag.com)</title>　
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<h2>Изображения</h2>
	<p>　.class-responsive позволяет изображениям поддерживать адаптивный дизайн и хорошо расширяться до родительского элемента (проверьте эффект, изменяя размер окна):</p>　　　　　　　　　　　　　　　　　　
	<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">　
</div>
</body>
</html>
Проверьте, пожалуйста ‹/›
Дополнительные классы BootstrapКнопки Bootstrap