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

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

Bootstrap плагины

Типография Bootstrap

Bootstrap использует Helvetica Neue, Helvetica, Arial и sans-serif в качестве своего стандартного набора шрифтов.

Используя排版ные возможности Bootstrap, вы можете создавать заголовки, абзацы, списки и другие внутриполосные элементы.

заголовок

Bootstrap определяет стили всех HTML заголовков (h1 до h6). См. следующий пример:

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

внутриполосный подзаголовок

Если нужно добавить внутриполосный подзаголовок к любому заголовку, достаточно просто добавить <small> с обеих сторон элемента, или добавить .small class, и вы получите текст меньшего размера и более светлого цвета, как показано в следующем примере:

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

<!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>
	<h1>Я заголовок 1 h1. <small>Я подзаголовок 1 h1</small></h1>　
	<h2>Я заголовок 2 h2. <small>Я подзаголовок 2 h2</small></h2>
	<h2>Я заголовок 3 h2. <small>Я подзаголовок 3 h2</small></h2>
	<h4>Я заголовок 4 h4. <small>Я подзаголовок 4 h4</small></h4>
	<h5>Я заголовок 5 h5. <small>Я подзаголовок 5 h5</small></h5>
	<h6>Я заголовок 6 h6. <small>Я подзаголовок 6 h6</small></h6>
</body>
</html>
Проверьте, <‹/›>

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

Ведущий текст

Чтобы добавить подчеркивающий текст к абзацу, можно добавить, что даст больший и толще текст с более высоким интервалом, как показано в следующем примере:

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

<!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>
<h2>Ведущий текст</h2>
<p　class="lead">Это пример использования ведущего текста. Это пример использования ведущего текста. Это пример использования ведущего текста. Это пример использования ведущего текста. Это пример использования ведущего текста. Это пример использования ведущего текста. Это пример использования ведущего текста. Это пример использования ведущего текста.</p>
</body>
</html>
Проверьте, <‹/›>

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

Подчеркивание

Стандартные теги подчеркивания HTML <small>（установленный размер текста в 85% от размера родительского текста）、<strong>（толстый текст）、<em>（курсив）.

Bootstrap предоставляет некоторые классы для подчеркивания текста, как показано в следующем примере:

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

<!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>
<small>Этот текст находится в теге</small><br>
<strong>Этот текст находится в теге</strong><br>
<em>Этот текст находится в теге и отображается курсивом</em><br>
<p　class="text-left">Текст выравнивается направо</p>
<p　class="text-center">Текст выравнивается по центру</p>
<p　class="text-right">Текст выравнивается направо</p>
<p class="text-muted">Этот абзац имеет уменьшенный вид</p>
<p class="text-primary">Этот абзац содержит класс primary</p>
<p class="text-success">Этот абзац содержит класс success</p>
<p class="text-info">Этот абзац содержит класс info</p>
<p class="text-warning">Этот абзац содержит класс warning</p>
<p class="text-danger">Этот абзац содержит класс danger</p>
</body>
</html>
Проверьте, <‹/›>

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

Аббревиатуры

Элемент HTML предоставляет маркеры для аббревиатур, таких как WWW или HTTP. Bootstrap определяет стиль тега <abbr> как тонкую пунктирную рамку внизу текста, которая появляется при наведении мыши (если вы добавите текст в атрибут title тега <abbr>). Для получения текста в более мелком шрифте добавьте .initialism к <abbr>.

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

<!DOCTYPE　html>
<html>
<head>
　　　<title>Пример Bootstrap - Аббревиатуры</title>
　　　<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
　　　<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
</body>
</html>
Проверьте, <‹/›>

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

Адрес (Адрес)

Используя тег <address>, вы можете отображать контактную информацию на веб-странице. Поскольку по умолчанию <address> устанавливает display:block;, вам нужно использовать тег <br> для добавления строки с адресом.

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

<!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>
<address>
	<strong>Некая Компания, ООО</strong><br>
	007 улица<br>
	Some City, State XXXXX<br>
	<abbr title="Телефон">P:</abbr> (123) 456-7890
</address>
<address>
	<strong>Полное имя</strong><br>
	<a href="mailto:#">[email protected]</a>
</address>
</body>
</html>
Проверьте, <‹/›>

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

Цитата (Blockquote)

Вы можете использовать стандартный <blockquote> около любого HTML-текста. Другие опции включают добавление тега <small> для обозначения источника цитаты, использование класса .pull-right Цитата, выровненная вправо. Ниже приведен пример, демонстрирующий эти характеристики:

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

<!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>
<blockquote>
	<p>
		Это пример цитаты по умолчанию. Это пример цитаты по умолчанию. Это пример цитаты по умолчанию. Это пример цитаты по умолчанию. Это пример цитаты по умолчанию. Это пример цитаты по умолчанию. Это пример цитаты по умолчанию. Это пример цитаты по умолчанию.
	</p>
</blockquote>
<blockquote>
	Это цитата с названием источника.
	<small>Известный человек в <cite title="Название источника">Название источника</cite></small>
</blockquote>
<blockquote class="pull-right">
	Это цитата, выровненная вправо.
	<small>Известный человек в <cite title="Название источника">Название источника</cite></small>
</blockquote>
</body>
</html>
Проверьте, <‹/›>

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

списки

Bootstrap поддерживает списки с порядковыми номерами, несписки и определительные списки.

  • список с порядковыми номерами: Список с порядковыми номерами - это список, начинающийся с чисел или других упорядоченных символов.

  • несписок: Несписок - это список без определенного порядка, начинающийся с традиционного стиля акцентных знаков. Если вы не хотите отображать эти акцентные знаки, вы можете использовать класс .list-unstyled для удаления стилей. Вы также можете использовать класс .list-inline разместить все элементы списка на одной строке.

  • Определительный список: В этом типе списка каждый список может содержать элементы <dt> и <dd>. <dt>代表着 Определение терминовнапример, словарь. Далее, <dd> является описанием <dt>. Класс .dl-horizontal позволяет短语 и их описание в <dl> быть выровненными в одну строку. Сначала они начинаются как по умолчанию стили <dl>, которые堆积аются, а затем, когда навигационная панель постепенно разворачивается, они выстраиваются в одну строку.

Ниже приведен пример, демонстрирующий эти типы списков:

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

<!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>
<h4>Нумерованный список</h4>
<ol>
	<li>Элемент 1</li>
	<li>Элемент 2</li>
	<li>Элемент 3</li>
	<li>Элемент 4</li>
</ol>
<h4>Ненумерованный список</h4>
<ul>
	<li>Элемент 1</li>
	<li>Элемент 2</li>
	<li>Элемент 3</li>
	<li>Элемент 4</li>
</ul>
<h4>Ненормированный список</h4>
<ul class="list-unstyled">
	<li>Элемент 1</li>
	<li>Элемент 2</li>
	<li>Элемент 3</li>
	<li>Элемент 4</li>
</ul>
<h4>Внутренний список</h4>
<ul class="list-inline">
	<li>Элемент 1</li>
	<li>Элемент 2</li>
	<li>Элемент 3</li>
	<li>Элемент 4</li>
</ul>
<h4>Список определений</h4>
<dl>
	<dt>Описание 1</dt>
	<dd>Элемент 1</dd>
	<dt>Описание 2</dt>
	<dd>Элемент 2</dd>
</dl>
<h4>Горизонтальный список определений</h4>
<dl class="dl-horizontal">
	　<dt>Описание 1</dt>
	　<dd>Элемент 1</dd>
	　<dt>Описание 2</dt>
	　<dd>Элемент 2</dd>
</dl>
</body>
</html>
Проверьте, <‹/›>

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

Более многообразные排版ные классы

В таблице ниже приведены примеры дополнительных排版ных классов Bootstrap:

КлассОписаниеПример
.leadВыделить абзацПопробуйте!
.text-leftУстановить текст по левому краюПопробуйте!
.text-rightУстановить текст по правому краюПопробуйте!
.text-nowrapЧасть абзаца, выходящая за пределы экрана, не переворачивается на новую строкуПопробуйте!
.text-uppercaseУстановить текст в верхний регистрПопробуйте!
.initialismТекст, показанный в элементе <abbr>, отображается мелким шрифтом и может быть преобразован в верхний регистрПопробуйте!
.list-unstyledУдалить стандартные стили списка, выравнивание левых элементов списка (в <ul> и <ol>). Этот класс применяется только к прямым подэлементам списков 　 　(Если нужно удалить вложенные элементы списка, вам нужно использовать этот стиль в вложенных списках)Попробуйте!
.dl-horizontalЭтот класс устанавливает плавание и смещение, применяется к элементам <dl> и <dt>, конкретная реализация можно увидеть в примереПопробуйте!
Код BootstrapСистема сетки Bootstrap