База

Обеспечивает стиль по умолчанию для всех элементов 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. Пункт 1
  2. Пункт 2
    1. Пункт 1
    2. Пункт 2
      1. Пункт 1
      2. Пункт 2
  3. Пункт 3
  4. Пункт 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.