База

Обеспечивает стиль по умолчанию для всех элементов HTML.

Этот компонент определяет Основной вид своей страницы. К услугам гостей большой типографии, установив цвета по умолчанию, отступы, Размеры шрифта и многое другое для каждого HTML-элемента. На этой странице находится Краткое руководство по использованию основных элементов HTML и как UIkit стили их.

Примечание в основном UIkit использует знаменитый Normalize.css, а распределяется она между всеми компонентами. Только необходимые части приняты в базовый компонент держать без префикса CSS как можно меньше. Большинство нормализации сопутствующих CSS перемещается в Форма, Кнопка и Таблица компоненты. Это делает UIkit и его компоненты очень устойчива к конфликтам с другими CSS Основы, так что вам не придется беспокоиться о браузере нестыковки в ваших проектах.

Заголовки

Используйте <h1> для <h6> элементы для определения заголовков.

Пример

H1 Заголовок 1

Н2-Заголовок 2

Н3 Заголовок 3

Н4 разделу 4

н5 разделу 5

н6 разделу 6

Вы можете добавить .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5 или .uk-h6 класс для изменения размера разделов, например есть h1 выглядеть h3.

Пункты

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

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

Следующий список дает вам краткий обзор наиболее часто используемых текста на уровне семантики и как использовать их.

Элемент	Описание
`<a>`	Превратить текст в гипертекст с помощью директивы в элемент.
`<em>`	Подчеркнуть текст с помощью em element.
`<strong>`	Предполагает какого-либо дополнительного значения с помощью директивы сильный элемент.
`<code>`	Определять встроенные фрагменты кода с помощью директивы `code element`.
`<del>`	Марк документа изменения как удаленный текст с помощью директивы ~~дель элемент~~.
`<ins>`	Знак изменения документа как текст вставлен с помощью директивы модулей элемент.
`<mark>`	Выделите текст без семантического значения, используя марка элемента.
`<q>`	Определять встроенные котировок используя Q в элемент внутри Кью элемент.
`<abbr>`	Определить аббревиатуру из сокр элемент с заголовком.
`<dfn>`	Определение определение термина, используя элемент dfn с заголовком.
`<small>`	Де-подчеркнуть текст мелким шрифтом используя небольшой элемент.

Горизонтальная линейка

Для создания горизонтальной линии используйте тег <hr>

Пример

Цитаты

Для цитирования нескольких строк Контента из другого источника в вашем документе, используйте <blockquote> элемент.

Пример

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Кто-то известный

Разметки

<blockquote>
    <p>Quotation</p>
    <small>Source</small>
</blockquote>

Блоки кода

Для нескольких строк кода, используйте <pre> элемент, который определяет предварительно отформатированный текст. Он создает новый текстовый блок, который сохраняет пробелы, символы табуляции и разрывы строк. Вложить <code> элемент внутри определения блока кода.

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

Пример

<pre>
    <code>...</code>
</pre>

Примечание при желании можно добавить в .uk-scrollable-text класс Утилита компонент, который задаст максимальную высоту в 300 пикселей и обеспечит вертикальную прокрутку.

Списки

Создать неупорядоченный список с помощью директивы <ul> элемент и <ol> элемент для упорядоченных списков. В <li> элемент определяет элемент списка.

Пример

Пункт 1
Пункт 2
- Пункт 1
- Пункт 2
  - Пункт 1
  - Пункт 2
Пункт 3
Пункт 4

Пункт 1
Пункт 2
1. Пункт 1
2. Пункт 2
  1. Пункт 1
  2. Пункт 2
Пункт 3
Пункт 4

Разметки

<ul>
    <li>...</li>
    <li>...
        <ul>
            <li>...</li>
        </ul>
    </li>
</ul>

<ol>
    <li>...</li>
    <li>...
        <ol>
            <li>...</li>
        </ol>
    </li>
</ol>

Описание списков

Создать описание списка с помощью директивы <dl> элемент. Используйте <dt> Определить этот термин и <dd> для описания.

Пример

Описание списков: Описание определяет список терминов и их соответствующие описания.
Этот термин: Это описание.
Этот термин: Это описание.

Разметки

<dl>
    <dt>...</dt>
    <dd>...</dd>
</dl>

Адаптивные изображения

Все изображения в UIkit aдаптивны по умолчанию. Если разметка сужается, изображения изменяют размер с сохранением пропорций.

Пример

Измените размер окна браузера, чтобы увидеть aдаптивное поведение изображения.

Примечание чтобы избежать aдаптивного поведения и сохранить оригинальные размеры изображения, добавьте класс .uk-img-preserve к дному из ваших одиночных изображений. Если у вас есть более одного изображения, вы можете также добавить класс к родительскому контейнеру. Это не требуется для карт Google.