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

Основной учебник Bootstrap

Bootstrap плагины

Well Bootstrap

Well - это контейнер, который создает эффект углубления или иллюстрации содержимого <div>. Для создания Well достаточно просто поместить содержимое в элемент с классом .well в <div>. Ниже приведен пример по умолчанию Well:

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap пример - По умолчанию Well</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="well">Здравствуйте, я в Well!</div>
</body>
</html>
Проверьте, ›/›

Результат показан ниже:

Размер

Вы можете использовать опциональные классы well-lg или well-sm для изменения размера Well. Эти два класса связаны с .well Эти два класса влияют на отступы (padding), и в зависимости от используемого класса, Well будет показываться больше или меньше.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap пример - Размеры Well</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="well well-lg">Привет, я в большом Well!</div>
<div class="well well-sm">Привет, я в маленьком Well!</div>
</body>
</html>
Проверьте, ›/›

Результат показан ниже:

Создание веб-страницы BootstrapПанели Bootstrap