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

Bootstrap4 基础教程

Текстовое форматирование Bootstrap4

Bootstrap 4 默认设置

Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。

默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。

此外，所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

<h1> - <h6>

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

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Заголовок h1 Bootstrap (2.5rem = 40px)</h1>
　　<h2>Заголовок h2 Bootstrap (2rem = 32px)</h2>
　　<h2>Заголовок h2 Bootstrap (1.75rem = 28px)</h2>
　　<h4>Заголовок h4 Bootstrap (1.5rem = 24px)</h4>
　　<h5>Заголовок h5 Bootstrap (1.25rem = 20px)</h5>
　　<h6>Заголовок h6 Bootstrap (1rem = 16px)</h6>
</div>
</body>
</html>
Проверьте, работает ли это ‹/›

Класс заголовков Display

Bootstrap также предоставляет четыре класса Display для управления стилем заголовков: .display-1, .display-2, .display-3, .display-4。

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Заголовки Display</h1>
　　<p>Заголовки Display могут выводить больше и粗ее шрифта.</p>
　　<h1 class="display-1">Display 1</h1>
　　<h1 class="display-2">Display 2</h1>
　　<h1 class="display-3">Display 3</h1>
　　<h1 class="display-4">Display 4</h1>
</div>
</body>
</html>
Проверьте, работает ли это ‹/›

<small>

В Bootstrap 4 элемент HTML <small> используется для создания текста меньшего размера и более легкого цвета:

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Меньший текст заголовка</h1>
　　<p>Элемент small используется для текста меньшего размера и более легкого цвета:</p>　　　　　　　
　　<h1>Заголовок h1 <small>Подзаголовок</small></h1>
　　<h2>Заголовок h2 <small>Подзаголовок</small></h2>
　　<h2>Заголовок h2 <small>Подзаголовок</small></h2>
　　<h4>Заголовок h4 <small>Подзаголовок</small></h4>
　　<h5>Заголовок h5 <small>Подзаголовок</small></h5>
　　<h6>Заголовок h6 <small>Подзаголовок</small></h6>
</div>
</body>
</html>
Проверьте, работает ли это ‹/›

<mark>

Bootstrap 4 определяет <mark> как желтый фоновый цвет и имеет определенный отступ:

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Выделенный текст</h1>　　　　
　　<p>Использование элемента mark для <mark>выделения</mark> текста.</p>
</div>
</body>
</html>
Проверьте, работает ли это ‹/›

<abbr>

Bootstrap 4 определяет стиль HTML-элемента <abbr> как одну сплошную линию на нижней части текста:

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Сокращения</h1>
　　<p>Элемент abbr используется для обозначения сокращений или аббревиатур:</p>
　　<p><abbr title="World Health Organization">WHO</abbr> была основана в 1948 году.</p>
</div>
</body>
</html>
Проверьте, работает ли это ‹/›

<blockquote>

Для цитируемого контента можно добавить класс .blockquote на <blockquote>:

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Blockquotes</h1>
　　<p>Элемент blockquote используется для presentación контента из других источников:</p>
　　<blockquote class="blockquote">
　　　　<p>В течение 50 лет Всемирный фонд дикой природы защищает будущее природы. Всемирный фонд дикой природы (WWF) является ведущей организацией по охране природы, работающей в 100 странах/территориях,</p>
　　　　<p>Получила поддержку 1,2 миллиона членов в США и около 5 миллионов членов по всему миру.</p>
　　　　<footer class="blockquote-footer">Из веб-сайта WWF</footer>
　　</blockquote>
</div>
</body>
</html>
Проверьте, работает ли это ‹/›

<dl>

Bootstrap 4 определяет стиль HTML-элемента <dl> следующим образом:

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Описание списка</h1>　　　　
　　<p>Элемент dl represents the description list:</p>
　　<dl>
　　　　<dt>Кофе</dt>
　　　　<dd>-　Черный горячий напиток</dd>
　　　　<dt>Молоко</dt>
　　　　<dd>-　Белый холодный напиток</dd>
　　</dl>　　　　　
</div>
</body>
</html>
Проверьте, работает ли это ‹/›

<code>

Bootstrap 4 определяет стиль HTML-элемента <code> следующим образом:

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Фрагменты кода</h1>
　　<p>Некоторые элементы кода можно поместить внутри элемента <code>:</p>
　　<p>Следующие HTML-элементы: <code>span</code>, <code>section</code> и <code>div</code> используются для определения частей документа.</p>
</div>
</body>
</html>
Проверьте, работает ли это ‹/›

<kbd>

Bootstrap 4 определяет стиль HTML-элемента <kbd> следующим образом:

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Ввод с клавиатуры</h1>
　　<p>Чтобы указать ввод, обычно выполняемый с помощью клавиатуры, используйте элемент kbd:</p>
　　<p>Использование <kbd>ctrl + p</kbd> для открытия диалогового окна «Печать».</p>
</div>
</body>
</html>
Проверьте, работает ли это ‹/›

<pre>

Bootstrap 4 определяет стили HTML <pre> элемента следующим образом:

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Многострочный код</h1>
<p>Для многострочного кода используйте элемент pre:</p>
<pre>
Текст в前置енном элементе
Отображать с фиксированной шириной
шрифт, сохраняя
Пробел и
Перенос строки.
</pre>
</div>
</body>
</html>
Проверьте, работает ли это ‹/›

Более сложные стили排版

Ниже приведены примеры более сложных стилей Bootstrap4:

КлассОписаниеПример
.font-weight-boldЖирный текстПопробуйте
.font-weight-normalОбычный текстПопробуйте
.font-weight-lightТонкий текстПопробуйте
.font-italicКурсивный текстПопробуйте
.leadСделать абзац более заметнымПопробуйте
.smallУказать более мелкий текст (85% от родительского элемента)Попробуйте
.text-leftСлеваПопробуйте
.text-centerЦентрироватьПопробуйте
.text-rightВыравнивание по правому краюПопробуйте
.text-justifyУстановите выравнивание текста, текст, выходящий за пределы экрана, автоматически переведется на новую строкуПопробуйте
.text-nowrapНе переводить строки в段е, если часть текста выходит за пределы экранаПопробуйте
.text-lowercaseУстановите текст в нижний регистрПопробуйте
.text-uppercaseУстановите текст в верхний регистрПопробуйте
.text-capitalizeУстановите начальную букву слова с заглавной буквыПопробуйте
.initialismТекст, отображаемый в элементе <abbr>, отображается в малом шрифте и может преобразовывать строчные буквы в заглавныеПопробуйте
.list-unstyledУдалите стандартный стиль списка, элементы списка выравниваются слева (в <ul> и <ol>). Этот класс предназначен только для прямых подэлементов списка 　 　(Если нужно удалить вложенные элементы списка, вам нужно использовать этот стиль в вложенном списке)Попробуйте
.list-inlineРазместите все элементы списка в одну строкуПопробуйте
.pre-scrollableСделайте элемент <pre> скролируемым, максимальная высота области кода 340px, если высота exceeds этого значения, то появится полоса прокрутки по оси YПопробуйте
Цвета Bootstrap4Грид-система Bootstrap4