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

модули Bootstrap

Значки Glyphicons Bootstrap Дополнительные классы Bootstrap

Утилиты адаптивности Bootstrap

Bootstrap предоставляет некоторые вспомогательные классы для более быстрого достижения разработки, дружелюбной к мобильным устройствам. Это можно сделать с помощью медиа-запросов, комбинируя крупные, малые и средние устройства, чтобы реализовать отображение и скрытие контента на устройствах.

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

	сверхмаленькие экраны мобильные устройства (<768px)	маленькие экраны планшеты (≥768px)	средние экраны десктоп (≥992px)	большие экраны десктоп (≥1200px)
.visible-xs-*	Видимый	Скрытый	Скрытый	Скрытый
.visible-sm-*	Скрытый	Видимый	Скрытый	Скрытый
.visible-md-*	Скрытый	Скрытый	Видимый	Скрытый
.visible-lg-*	Скрытый	Скрытый	Скрытый	Видимый
.hidden-xs	Скрытый	Видимый	Видимый	Видимый
.hidden-sm	Видимый	Скрытый	Видимый	Видимый
.hidden-md	Видимый	Видимый	Скрытый	Видимый
.hidden-lg	Видимый	Видимый	Видимый	Скрытый

С версии v3.2.0 классы в виде .visible-*-* существуют для каждого размера экрана в трех вариантах, каждый из которых предназначен для различных свойств display в CSS. Вот список:

группы классов	CSS display
.visible-*-block	display: block;
.visible-*-inline	display: inline;
.visible-*-inline-block	display: inline-block;

Таким образом, например, для сверхмаленьких экранов (xs) доступные классы .visible-*-* включают: .visible-xs-block, .visible-xs-inline и .visible-xs-inline-block.

классы .visible-xs, .visible-sm, .visible-md и .visible-lg также существуют. Но с версии v3.2.0 их использование не рекомендуется. За исключением特殊情况 элементов, связанных с <table>, они в основном идентичны .visible-*-block.

классы для печати

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

класс	браузер	принтер
.visible-print-block .visible-print-inline .visible-print-inline-block	Скрытый	Видимый
.hidden-print	Видимый	Скрытый

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

Следующие примеры демонстрируют использование перечисленных помощников классов. Уменьшите размер окна браузера или загрузите пример на различных устройствах, чтобы проверить-reactive утилиты классов.

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

Пример

<!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>
<div　class="container"　style="padding:　40px;">
	<div　class="row　visible-on">
		<div　class="col-xs-6　col-sm-3"　style="background-color:　#dedef8;box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444;">
			<span　class="hidden-xs">Особо маленький</span>
			<span　class="visible-xs">✔　Виден на особенно маленьких устройствах</span>
		</div>
		<div　class="col-xs-6　col-sm-3"　style="background-color:　#dedef8;box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444;">
			<span　class="hidden-sm">Маленький</span>
			<span　class="visible-sm">✔　Виден на маленьких устройствах</span>
		</div>
		<div　class="clearfix　visible-xs"></div>
		<div　class="col-xs-6　col-sm-3"　style="background-color:　#dedef8;box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444;">
			<span　class="hidden-md">Средний</span>
			<span　class="visible-md">✔　Виден на средних устройствах</span>
		</div>
		<div　class="col-xs-6　col-sm-3"　style="background-color:　#dedef8;box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444;">
			<span class="hidden-lg">Крупный</span>
			<span class="visible-lg">✔ Виден на больших устройствах</span>
		</div>
	</div>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

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

Крестики (✔) Показывает, что элемент виден в текущем поле зрения.

Значки Glyphicons Bootstrap Дополнительные классы Bootstrap