ОСНОВНОЕ

WORDPRESS

Операционные системы

Базы данных

Фреймворк Bootstrap

Чем короче формулировка теоремы, тем труднее ее доказательство (Неизв.).

Bootstrap – Типографика

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Bootstrap - Типографика
Bootstrap использует Helvetica Neue, Helvetica, Arial, и sans-serif как шрифты по умолчанию. При использовании типографики в Bootstrap вы можете создать заголовки, абзацы, списки и другие встроенные элементы. Рассмотрим каждый элемент в следующих разделах.

Заголовки

Все HTML-заголовки (h1 до h6) оформлены в Bootstrap. Пример показан ниже:

 

Сегмент кода Bootstrap выше выведет следующий результат:

Встроенные подзаголовки

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

 

Сегмент кода выше выведет следующий результат:

Lead Body Copy

Для того, чтобы добавить акцент к абзацу, добавить класс = «lead». Это придаст больший размер шрифта, легкий вес и более высокую высоту строки, как показан в следующем примере:

 

Акцент

Акцент по умолчанию тег HTML, такой как <small> устанавливает текст на 85% размер родителя, <strong> подчеркивает текст с более тяжелым весом шрифта, и <em> подчеркивает текст курсивом.

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

 

Сокращения

HTML элемент <abbr> обеспечивает разметку для сокращений или аббревиатур, как WWW или HTTP. элементы Bootstrap стилей <abbr> с легким пунктиром границы вдоль дна и показывает полный текст. Для того, чтобы получить немного меньший размер шрифта добавить .initialism к <abbr>.

 

Адреса

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

 

Цитаты

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

 

Списки

Bootstrap поддерживает упорядоченные списки, неупорядоченные списки и списки определений.

  • Упорядоченные списки: Упорядоченный список является списком, который индексируется в какой-то последовательности чисел.
  • Неупорядоченные списки: Неупорядоченный список является списком, который не имеет никакого определенного порядка и оформлен в традиционном стиле с точкой. Если вы не хотите чтобы появлялись точки, то вы можете удалить стиль, используя класс .list-unstyled. Вы также можете поместить все элементы списка на одной линии с использованием класса .list-inline.
  • Списки определений: В этом типе списка, каждый элемент списка может состоять как из <dt> так и элементов <dd>. <dt> обозначает термин определения, и как словарь, это термин (или словосочетание). Впоследствии, <dd> является определение <dt>. Вы можете сделать термины и описания в <dt> выстраиваются в линию бок о бок, используя класс dl-horizontal.

Следующий пример демонстрирует, каждый из этих типов:

 

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close