Bootstrap 4 css style

Основные элементы HTML. Улучшенное управление стилями с помощью классов.

• Оформление
• Код
• Таблицы
• Формы
• Кнопки
• Изображения
• Иконки от Glyphicons

Заголовки

Доступны все HTML заголовки, от

h2. Заголовок 2

h3. Заголовок 3

h4. Заголовок 4

h5. Заголовок 5

h6. Заголовок 6

Размеры Body

В Bootstrap основной размер шрифта font-size по умолчанию 14px, с высотой строки line-height в 20px. Это применимо к и всем остальным абзацам. Дополнительно

(абзац) имеет нижний отступ, равный половине высоты его строки (по умолчанию 10px).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Класс Lead body

Выделяйте абзац путем добавления .lead .

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Форматирование Less

Все шрифты и размеры основаны на двух переменных LESS в variables.less: @baseFontSize и @baseLineHeight . Первая — это основной размер шрифта, используемый во всем документе, вторая — это основная высота строки. Мы используем эти переменные и немного вычислений, чтобы создать отступы, поля, высоту строк разного типа и многое другое. Настраивайте Bootstrap для себя.

Выделение

Используя простые стили Bootstrap, применяйте HTML теги для выделения.

Для выделения блоков текста мелким шрифтом используйте тег small.

Эта строка текста предназначена для того, чтобы показать, как выглядит мелкий шрифт

Полужирный

Выделение фрагмента текста с помощью important

Следующий фрагмент текста набран полужирным шрифтом.

Курсив

Выделение фрагмента текста с помощью stress

Следующий фрагмент текста выделен курсивом.

Внимание! Смело используйте и в HTML5. Но предназначен для выделения слова или фразы, которое не выражает особой важности, в то время как используется для выделения разговорной речи, технических терминов и т.д.

Классы выделения

Выделение цветом с помощью нескольких вспомогательных классов.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

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

Чтобы показать расшифровку аббревиатуры при длительном наведении курсора, добавьте атрибут title .

Аббревиатура слова «attribute» — attr .

Добавьте .initialism , чтобы немного уменьшить размер шрифта.

Адреса

Представьте или только основную или полную контактную информацию.

Сохраните форматирование, ставя в конце всех строк тег
.

Цитаты

Цитирование фрагментов текста из других источников.

Цитаты по умолчанию

. Для однострочных цитат используйте тег

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Опции цитирования

Простые изменения стиля и содержания в стандартных цитатах.

Указание источника

Добавьте тег для указания на источник. Поместите название источника внутрь тега .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Кто-то очень известный в Названии источника

Альтернативное отображение

Используйте .pull-right для выравнивания текста по правую сторону.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Кто-то очень известный в Названии источника

Списки

Неупорядоченный

Список, в котором порядок явно не обозначен.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit

• Phasellus iaculis neque
• Purus sodales ultricies
• Vestibulum laoreet porttitor sem
• Ac tristique libero volutpat at

Faucibus porta lacus fringilla vel

Aenean sit amet erat nunc

Eget porttitor lorem

Упорядоченный

Список, в котором порядок четко определен.

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Не стилизованный

Список без стиля или без дополнительного левого поля.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit

• Phasellus iaculis neque
• Purus sodales ultricies
• Vestibulum laoreet porttitor sem
• Ac tristique libero volutpat at

Faucibus porta lacus fringilla vel

Aenean sit amet erat nunc

Eget porttitor lorem

Описание

Список терминов с их сопутствующими описаниями.

Горизонтальный список описания

Выстраивает термины и описания в одну линию.

Внимание! В горизонтальных списках описания слишком длинные термины будут обрезаться с помощью text-overflow . На малых дисплеях размеры списков будут изменяться в соответствии с сеткой шаблона.

Строковое выделение кода

Поместите строковый код внутрь тега .

Блочное выделение

Внимание! Всегда используйте теги

Дополнительные классы

Добавьте любой из следующих классов к основному классу .table .

.table-striped

Добавить светло-серый фон к нечетным строкам внутри

можно посредством CSS селектора :nth-child (в IE7-IE8 не поддерживается).

#	Имя	Фамилия	Имя пользователя
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

.table-bordered

Добавляет рамки и закругляет углы таблицы.

#	Имя	Фамилия	Имя пользователя
1	Mark	Otto	@mdo
	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

.table-hover

Делает активным наведение курсора внутри.

#	Имя	Фамилия	Имя пользователя
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

.table-condensed

Делает таблицы более компактными, наполовину сокращая отступы.

#	Имя	Фамилия	Имя пользователя
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Дополнительные классы строк

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

Класс	Описание
.success	Указывает на успешно выполненное действие.
.error	Указывает на опасное или негативное действие..
.warning	Указывает на предупреждение, на которое следует обратить внимание.
.info	Используется как альтернатива стилям по умолчанию.

#	Продукт	Платеж	Статус
1	TB — Ежемесячно	01/04/2012	Подтвержден
2	TB — Ежемесячно	02/04/2012	Отклонен
3	TB — Ежемесячно	03/04/2012	Задержка
4	TB — Ежемесячно	04/04/2012	Позвонить для подтверждения

Поддерживаемая разметка таблиц

Список поддерживаемых элементов HTML и указания для их использования.

) Озаглавливает колонки таблицы. )

Тег	Описание
	Вставляет элемент для отображения данных в табличной форме.
	Элемент контейнера предназначен для хранения одной или нескольких строк таблицы. (
	Элемент контейнера для создания строк в теле таблицы (
	Элемент контейнера для настройки ячеек таблицы. (	or	) Создает отдельную строку.
	Ячейка таблицы по умолчанию
	Специальная ячейка для названий столбцов таблицы (или строк — зависит от расположения). Следует использовать с кодом
Краткое описание в таблице, которое очень удобно для мобильных устройств.

Стили по умолчанию

Отдельные элементы формы имеют свой стиль, но без обязательного класса

Дополнительные шаблоны

В Bootstrap есть три дополнительных шаблона форм для общего пользования.

Форма поиска

Добавьте .form-search в форму и .search-query в элемент для построения закругленной рамки.

Линейная форма

Добавьте класс .form-inline для компактного расположения выровненного по левому краю текста и строк.

Горизонтальная форма

Выровняйте текст по правой стороне, ставя обтекание слева, чтобы он находился на одной линии с элементами формы:

• Добавьте .form-horizontal в форму
• Добавьте текст и элементы управления внутрь .control-group
• Добавьте .control-label в текст
• Добавьте любой подходящий элемент управления .controls для точной настройки

Поддерживаемые элементы формы

Примеры стандартных поддерживаемых элементов формы.

Поле ввода

Самый простой элемент формы с текстовыми полями ввода. Поддерживает все типы HTML5: текст, пароль, text, password, время и дата, региональные настройки времени и даты, дата, месяц, время, неделя, номер, электронная почта, URL, поиск, номер телефона и цвет.

Всякий раз обязательно используйте нужный тип type .

Многострочный текст

Для элементов формы, которые позволяют использовать многострочный текст. Измените атрибут rows в случае необходимости.

Флажки и радио-кнопки

Элементы «флажки» (чек-боксы) используются для выбора одной или нескольких опций в списке, а радио-кнопки предназначены только для выбора одной опции из нескольких.

По умолчанию (вертикально)

Флажки в одной строке

Добавьте класс .inline к нескольким флажкам или радио-кнопкам, чтобы разместить их на одной линии.

Список выбора

Используйте опцию по умолчанию или укажите multiple="multiple" , чтобы отобразить сразу несколько опций.

Дополнения к формам

В Bootstrap имеются также другие полезные компоненты формы, которые могут встраиваться в панель браузера.

Пред-идущие и Пост-идущие элементы

Добавьте текст или кнопки до или после поля текстового ввода. Обратите внимание, что элементы select при этом не поддерживаются.

Настройки по умолчанию

Добавьте один или два класса внутрь тегов .add-on и input , чтобы отобразить текст до или после поля ввода.

Комбинирование

Используйте оба класса и дважды — .add-on , чтобы отобразить текст впереди или позади.

Кнопки вместо текста

Используйте с текстом вместо класс .btn , чтобы к вводу подключить кнопку.

Форма поиска

Настройка размеров

Используйте соответствующие классы, такие как .input-large или согласуйте ваше поле ввода с сеткой размеров, используя классы .span* .

Взаимосвязанные размеры

Внимание! В дальнейших версиях мы изменим использование этих взаимосвязанных классов ввода, чтобы согласовать размер кнопок. Например, .input-large будет увеличивать отступ и размер шрифта в поле ввода.

Сетка размеров

Используйте от .span1 до .span12 , чтобы задать одинаковые размеры в поле ввода и в сетке столбцов.

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

Неформатируемые поля

Представьте данные в форме, которая не редактируется без использования фактической разметки.

Формы для действий

Добавьте в конец формы действие (кнопки). Расположенные внутри класса .form-horizontal , кнопки автоматически получат отступ, соответствующий форме.

Вспомогательный текст

Поддержка строчного и блокового текста, который отображается около управления формы.

Строчный вспомогательный текст

Блоковый вспомогательный текст

Настройки состояния элементов формы

Обеспечивают обратную связь с пользователями или посетителями.

Фокус ввода

Мы удалили стили по умолчанию outline в настройках некоторых форм и поставили на их место box-shadow для фокуса :focus .

Отключенное состояние

Добавьте атрибут disabled в поле ввода для того, чтобы предотвратить ввод. Внешний вид поля при этом немного изменится.

Состояния валидации

В Bootstrap имеются стили валидации для ошибок, предупреждений, информации и успешных действий. Для использования добавьте подходящий класс к ближайшему классу .control-group .

Кнопки по умолчанию

Стили кнопок могут применяться к любым элементам посредством класса .btn . Однако, обычно применяйте их только к элементам and для лучшего отображения.

Кнопка	>	Описание
Default	btn	Стандартная серая кнопка с градиентом
Главная кнопка	btn btn-primary	Обеспечивает дополнительную визуальную ширину и указывает на первичное действие в наборе кнопок
Информация	btn btn-info	Используется как альтернатива стилям по умолчанию
Успешное действие	btn btn-success	Указывает на успешное или положительное действие
Предупреждение	btn btn-warning	Указывает на то, что действие должно совершаться с предусмотрительностью
Опасность	btn btn-danger	Указывает на опасное или потенциально негативное действие
Инверсия	btn btn-inverse	Чередующиеся темно-серые кнопки, не связанные с определенным действием
Ссылка	btn btn-link	Отмена выделения кнопки. Кнопка получает вид ссылки, сохраняя при этом свои функции

Кросс-браузерная совместимость

Поскольку IE9 не подгоняет градиент заднего плана к закругленным углам, мы его удалили. Кроме того, IE9 искажает элементы кнопки отключения button отображая текст в сером цвете с ужасной тенью, которую мы не можем исправить.

Размеры кнопок

Желаете кнопки побольше или поменьше? Добавьте класс .btn-large , .btn-small , или .btn-mini для установки дополнительных размеров.

Большая кнопка Большая кнопка

Кнопка по умолчанию Кнопка по умолчанию

Маленькая кнопка Маленькая кнопка

Создайте вложенный блок кнопок, который размещается по всей ширине родительских кнопок. Для этого добавьте класс .btn-block .

Отключенное состояние

Отмените нажатие кнопок, уменьшив их четкость на 50%.

Анкерный элемент

Добавьте класс .disabled к кнопкам .

Внимание!
Мы используем класс .disabled как дополнение к классу, подобно общему классу .active , так что никакой префикс не требуется. Также этот класс по сути только для внешнего вида — для того, чтобы сделать ссылку неактивной, используйте JavaScript.

Элемент кнопки

Добавьте атрибут disabled к кнопкам .

Главная кнопка Кнопка

Один класс, множественные теги

Используйте класс .btn в элементах , или .

Для наилучшей совместимости с браузерами, используйте элементы, подходящие для всех браузеров. Используйте input как кнопку .

Добавьте классы к элементу , чтобы легко настроить стили изображений.

Внимание! .img-rounded и .img-circle не работают в IE7-8 из-за недостаточной поддержки border-radius .

Иконки glyphs

140 иконок в едином файле, по умолчанию в темно-сером и белом цвете. Предоставлены Glyphicons.

icon-glass icon-music icon-search icon-envelope icon-heart icon-star icon-star-empty icon-user icon-film icon-th-large icon-th icon-th-list icon-ok icon-remove icon-zoom-in icon-zoom-out icon-off icon-signal icon-cog icon-trash icon-home icon-file icon-time icon-road icon-download-alt icon-download icon-upload icon-inbox icon-play-circle icon-repeat icon-refresh icon-list-alt icon-lock icon-flag icon-headphones icon-volume-off icon-volume-down icon-volume-up icon-qrcode icon-barcode icon-tag icon-tags icon-book icon-bookmark icon-print icon-camera icon-font icon-bold icon-italic icon-text-height icon-text-w > icon-align-left icon-align-center icon-align-right icon-align-justify icon-list icon-indent-left icon-indent-right icon-facetime-v > icon-picture icon-pencil icon-map-marker icon-adjust icon-tint icon-edit icon-share icon-check icon-move icon-step-backward icon-fast-backward icon-backward icon-play icon-pause icon-stop icon-forward icon-fast-forward icon-step-forward icon-eject icon-chevron-left icon-chevron-right icon-plus-sign icon-minus-sign icon-remove-sign icon-ok-sign icon-question-sign icon-info-sign icon-screenshot icon-remove-circle icon-ok-circle icon-ban-circle icon-arrow-left icon-arrow-right icon-arrow-up icon-arrow-down icon-share-alt icon-resize-full icon-resize-small icon-plus icon-minus icon-asterisk icon-exclamation-sign icon-gift icon-leaf icon-fire icon-eye-open icon-eye-close icon-warning-sign icon-plane icon-calendar icon-random icon-comment icon-magnet icon-chevron-up icon-chevron-down icon-retweet icon-shopping-cart icon-folder-close icon-folder-open icon-resize-vertical icon-resize-horizontal icon-hdd icon-bullhorn icon-bell icon-certificate icon-thumbs-up icon-thumbs-down icon-hand-right icon-hand-left icon-hand-up icon-hand-down icon-circle-arrow-right icon-circle-arrow-left icon-circle-arrow-up icon-circle-arrow-down icon-globe icon-wrench icon-tasks icon-filter icon-briefcase icon-fullscreen

Авторство Glyphicons

Набор иконок Glyphicons Halflings не является бесплатным, но по соглашению между Bootstrap и Glyphicons разработчики имеют возможность использовать его без дополнительной платы. В знак благодарности мы просим вас разместить ссылку на оригинал проекта Glyphicons.

Как использовать

Все иконки требуют использования тега с уникальным классом и префиксом icon- . Для использования поместите код с примера ниже в нужное место:

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

Внимание! При использовании с текстом, кнопками, ссылками или навигацией не забудьте оставить пробел после тега для корректного расположения элемента.

Примеры иконок

Используйте иконки для кнопок, пунктов меню, навигации или присоедините к формам ввода.

Получите подробную информацию о ключевых элементах структурной базы Bootstrap, включая наш подход к лучшей, более быстрой и эффективной веб-разработке.

Тип документа HTML5

В Bootstrap используются некоторые HTML элементы и CSS свойства, которые требуют использования типа документа HTML5. Включайте его в начале всех проектов.

Ориентированный в первую очередь на мобильные устройства

В Bootstrap 2 мы внедряли возможности адаптирования сайтов для мобильных устройств. Приложение Bootstrap 3 изначально рассчитано на работу с мобильными устройствами. Вместо того чтобы добавлять дополнительные шаблоны для мобильных устройств, мы встроили их в ядро программы. Bootstrap в первую очередь рассчитан на мобильные устройства. Макеты для мобильных устройств хранятся в библиотеке, а не отдельными файлами.

Для обеспечения правильной визуализации и сенсорного масштабирования, добавьте метатег viewport в ваш .

Вы можете ограничить возможности масштабирования на мобильных устройствах добавляя user-scalable=no в метатег viewport. Это ограничит масштабирование, это означает что пользователи смогут только листать, в результат ваш сайт будет чувствоваться как нативное приложение (без возможности изменения). В любом случае, мы не рекомендуем это, используйте с осторожностью.

Шрифты и ссылки

Bootstrap стандартно устанавливает масштабы отображения элементов, шрифты и стили ссылок. В частности, мы:

• Задали background-color: #fff; на body
• Используем @font-family-base , @font-size-base и @line-height-base атрибуты как нашу базу шрифтов.
• Задали цвет всех ссылок через @link-color и применили подчеркивание ссылок только при :hover .

Эти стили можно найти в scaffolding.less .

Normalize.css

Для улучшения кросс-браузерного отображения, мы используем Normalize.css, проект от Николас Галлахер и Джонатан Нил.

Контейнеры (хранилища)

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

Используйте .container для отзывчивого контейнера с фиксированной шириной.

Используйте .container-fluid для всей ширины контейнера, охватывающий всю ширину вашего просмотра.

Bootstrap включает в себя отзывчивую, mobilefirst систему разметки, которая соответствующим образом масштабирует до 12 столбцов при увеличении размера устройства или экрана просмотра. Она включает в себя предопределенные классы для упрощенной компоновки разметки, а также мощный класс-примесь для генерации более осмысленных (семантических) макетов.

Введение

Система разметки (сетка) используется для создания макетов страниц через группы строк и столбцов в которых размещается ваш контент. Вот как система разметки работает:

• Строки должны быть помещены внутрь .container (fixed-width) или .container-fluid (full-width) для правильного выравнивания и заполнения.
• Используйте строки (row) для создания горизонтальных групп столбцов (col).
• Содержимое должно быть помещено в столбцы (col), и только столбцы могут быть непосредственными дочерними элементами строк (row).
• Для быстрого создания схем сетки доступны предопределенные классы сетки, такие как .row и .col-xs-4 . Less смешивания также может быть использован для более осмысленных (семантических) схем.
• Столбцы (col) создают внутренние поля (промежутки между содержанием столбцов (col)) с помощью padding . Тогда padding смещается в строках (row) для первого и последнего столбца с помощью отрицательного поля на .row .
• Отрицательный отступ это потому, что ниже примеры неактуальны. Это значит, что контент внутри столбцов (col) сетки выровнен с содержимым без сетки.
• Столбцы сетки (col) создаются путем указания количества доступных двенадцати столбцов, которые вы хотите развернуть. Например, три равных столбца будут использовать три .col-xs-4 .
• Если более чем 12 столбцов (col) помещено в одну строку (row), то каждая группа дополнительных столбцов (col) будут объединятся в блок и переноситься на новую строку.
• Сетка классов применяется к устройствам с шириной экрана, большими или равными размерам контрольным точкам и переопределяют классы сетки, ориентированные на более мелкие устройства. Поэтому, например, применение какого-либо класса .col-md-* к элементу не только повлияет на его стиль на средних устройствах, но и на большие устройства, если класс .col-lg-* отсутствует.

Посмотрите на примеры применения этих принципов к вашему коду.

Мультимедийные запросы

Мы используем следующие медиа-запросы в наших файлах Less для создания ключевых точек разрыва в нашей сетке.

Мы иногда расширяем эти медиа-запросы, что включают max-width для ограничения CSS до более узкого набора устройств.

Параметры разметки

Посмотрите, как особенности сетки Bootstrap работают на нескольких устройствах с помощью удобной таблицы.

97px

Очень маленькие устройство Телефоны ( .col-xs-	.col-sm-	.col-md-	.col-lg-
# колонок	12
Ширина колонки	Auto
Промежуточная ширина	30px (15px on each side of a column)
Вкладка	Да
Отступ	Да
Выравнивание колонок	Да

Пример: Сложенные по горизонтали

Используя единственный набор классов сетки .col-md-* вы можете создать базовую сетчатую систему, которая приспосабливается под экран на мобильных и планшетных устройствах (экстра малый в небольшом диапазоне), прежде чем стать горизонтальной на десктопных (средних) устройствах. Поместите столбцы сетки в любой .row .

В этой статье рассмотрим, как в Bootstrap 3 и 4 осуществляется оформление и работа с текстовой информацией.

Шрифты в Bootstrap

В Bootstrap 3 по умолчанию для основного содержимого используется следующие шрифты:

В Bootstrap 4 стек шрифтов был изменён на следующий:

Это изменение позволило отображать текстовый контент на различных устройствах и операционных системах с помощью "родных" шрифтов.

При желании данный набор шрифтов можно установить и для Bootstrap 3. Для этого необходимо собрать свою сборку (например, на странице Customize and download), в которой в качестве переменной @font-family-sans-serif задать стек шрифтов Bootstrap 4.

Если вариант использование данной возможности и без создания пользовательской сборки, посредством добавления данной инструкции в свой файл CSS.

Подключение своего шрифта к странице

При необходимости вы можете также подключить нестандартный шрифт к странице. Для этого, например можно воспользоваться сервисом Google Font или другим способом (например, использовать какой-то скачанный шрифт).

1. Подключаем шрифт (например, Roboto) с помощью элемента link :

2. Определяем область его использования, т.е. выбираем элементы, внутри которых текстовый контент будет отображаться с помощью этого шрифта. Данный шрифт (например, Roboto) при этом должен стоять в свойстве font-family перед всеми другими шрифтами:

Оформление заголовков

В Bootstrap 3 и 4 HTML-заголовкам

задано уже некоторое оформление по умолчанию (например, размер шрифта, margin отступы снизу и сверху, толщина шрифта и т.д.).

Пример создания HTML заголовков:

Стилизация заголовков в Bootstrap

Классы h1, h2, h3, h4, h5 и h6

Bootstrap, кроме CSS стилей для заголовков содержит ещё классы h1 , h2 , h3 , h4 , h5 и h6 . Они предназначены для стилизации некоторого контента как заголовка или изменения оформления заголовочных элементов h1 . h6 .

Отображение второстепенного контента в заголовках

Для того чтобы в заголовок добавить дополнительный текст, который должен отличаться размером и цветом от остального контента этого заголовка можно воспользоваться элементом small .

Классы display для заголовков

Фреймворк Bootstrap 4 в файле bootstrap.css содержит дополнительные классы display-1 , display-2 , display-3 и display-4 , предназначенные для альтернативного оформления заголовков. Эти классы в отличие от традиционного оформления, позволяют сделать их более выделяемыми (они задают большее значение font-size и меньшее свойству font-weight ).

Класс page-header для оформления h1

В Bootstrap 3 имеется класс page-header , который предназначен для оформления заголовка h1 на странице. Он задаёт более "высокие" значения отступам и добавляет линию под названием заголовка.

Синтаксис данного класса:

Пример использования класса page-header :

Так на Bootstrap 3 выглядит заголовок h1 с page-title

Размер шрифта и высота строки

В Bootstrap 3 в качестве размера шрифта ( font-size ) по умолчанию используется фиксированная величина, равная 14px. Высота строки ( line-height ) имеет значение 1.428. Эти CSS-свойства применяются к элементу страницы body .

В Bootstrap 4 изменился подход к заданию размера шрифта. Она перестала быть фиксированной, теперь она задаётся с помощью единицы измерения rem .

1rem равен размеру шрифта, который установлен для элемента html . Данная единица измерения является относительной, т.к. она зависит от размера шрифта, который установлен для всего документа.

В данном случае 1rem будет равен 16px .

Но так как в стилях Bootstrap 4 элементу html явно не устанавливается размер шрифта, то данное значение будет браться из браузера.

Например, в десктопной версии браузера Chrome настройка размера шрифтов осуществляется на странице "Настройки" в разделе "Вид страниц". По умолчанию данное значение равно 16px. Если данное значение, например, увеличить до 18px, то 1rem в Bootstrap 4 будет уже равен 18px.

Изменение размера шрифта

Если вы хотите изменить размер шрифта, т.е. сделать его для некоторого блока больше или меньше, то можете воспользоваться CSS. Для этого необходимо открыть свой файл CSS и написать инструкцию (выбрать элементы и указать им свойство font-size с необходимым значением):

Если же вы хотите сделать размер шрифта на разных устройствах разным, то можно воспользоваться медиа запросами:

Сделать резиновый (масштабируемый) размер шрифта можно не только с помощью медиа запросов, но и с помощью таких единиц измерения как vw , vh , vmin и vmax .

Данные единицы зависят от ширины или высоты viewport. 1vw = 1% от ширины viewport, 1vh — 1% от высоты viewport, 1vmin — 1% от ширины или высоты, а именно от того значения, которое меньше, 1vmax — 1% от ширины или высоты, а именно от того значения, которое больше.

Если какое-то CSS свойство не работает, то вы можете усилить его, добавив к нему !important :

Эти варианты можно использовать для создания адаптивных заголовков и текста.

Кроме вышеперечисленных единиц есть ещё % (проценты) и em . При установке этих единиц нужно быть осторожными, т.к. они устанавливают размер шрифта относительно размера шрифта своего родителя.

Кроме этого, бывают ситуации, когда вы задаёте блоку фиксированную высоту, а контент, который содержит данный блок, в него не помещается.

Контент не помещается в блок фиксированной высоты

В этом случае можно блоку задать CSS свойство overflow со значением hidden . Данное CSS-свойство будет скрывать контент, который не помещается в данный блок.

Но можно поступить и по-другому, а именно показать пользователю, что это не весь контент, добавив после него три точки.

Для этого можно скачать js-плагин dotdotdot. Подключить его к странице и назначить необходимым элементам.

Варианты обрезки контента, который не помещается в блок фиксированной высоты

Ещё одна очень частая задача — это когда текст необходимо расположить в одну строку. Это осуществляется с помощью CSS-свойство white-space со значением nowrap .

Расположение контента в одну строку

Для скрытия контента, который не помещается в блок, также можно использовать CSS-свойство oveflow со значением hidden . Если необходимо добавить троеточие после текста, то нужно дополнительно ещё добавить CSS-свойство text-overflow со значением ellipsis .

Возможен, конечно, и другой вариант решения данной проблемы в зависимости от задачи. Можно, например, сделать не скрытие контента, а дать возможность его прокрутки.

Отображение контента с прокрутками

Кроме этого, это можно сделать не по 2 направлением, а по какому-то одному. Для этого предназначены CSS-свойства overflow-x и overflow-y . Действия по другому направлению можно выполнить одним из вышеприведённых способов.