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

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

Bootstrap плагины

Экраны большого размера Bootstrap

Эта глава объясняет другую функцию Bootstrap,超大屏幕(Jumbotron). Как следует из названия, этот компонент может увеличить размер заголовка и добавить больше внешнего поля (margin) для контента страницы входа. Шаги использования超大屏幕(Jumbotron):

  • Создайте контейнер с классом .jumbotroncontainers <div>.

  • Кроме больших <h1>, толщина шрифта font-weight уменьшен до 200.

Следующий пример демонстрирует это:

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

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　пример　-　в超大ном экране(Jumbotron)</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">
	<div　class="jumbotron">
		<h1>Добро пожаловать на страницу входа!</h1>
		<p>Это пример超大屏幕 (Jumbotron).</p>
		<p><a class="btn btn-primary btn-lg" role="button">
			Узнайте больше</a>
		</p>
	</div>
</div>
</body>
</html>
Проверьте ‹/›

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

Чтобы получить超大屏幕， которое занимало всю ширину и не имело закругленных углов, пожалуйста, в всех .container класс используется вне .jumbotron Класс, как показано в следующем примере:

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

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　пример　-　в超大ном экране(Jumbotron)</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="jumbotron">
	<div　class="container">
		<h1>Добро пожаловать на страницу входа!</h1>
		<p>Это пример超大屏幕 (Jumbotron).</p>
		<p><a class="btn btn-primary btn-lg" role="button">
			Узнайте больше</a>
		</p>
	</div>
</div>
</body>
</html>
Проверьте ‹/›

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

Заголовки страниц BootstrapЗнаки Bootstrap