Компонент База : Base

Этот компонент предоставляет стили по умолчанию для всех элементов HTML.

Normalize.css

Компонент База использует стили знаменитого Normalize.css для одинакового отображения элементов во всех браузерах и применяет стили по умолчанию, такие как цвета, поля, размеры шрифтов и многое другое.

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

Превратите текст в гипертекст, используя элемент <a>. Вы также можете добавить класс .uk-link к <span> или подобному элементу, чтобы применить стиль ссылки по умолчанию.

Для дополнительных стилей ссылкам, посмотрите на компонент Ссылка.


Семантические элементы

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

Элемент Описание
<abbr> Аббревиатура. С помощью атрибута title дается расшифровка сокращения :
Элемент с заголовком.
<b> Создайте жирный текст с помощью элемента b.
<cite> Определите название работы, произведения с элементом cite
(например, книга, песня, фильм, телешоу, картина, скульптура и т. д.).
Пример: Название произведения. Влад Булка. Публикация 1759 года.
Имя человека не является названием произведения.
<code> Определите фрагменты встроенного кода, используя code element (элемент кода).
<del> Пометить изменения документа как удаленный текст с помощью элемента del.
<dfn> Создайте термин определения, используя элемент dfn с заголовком.
<em> Акцентируем внимание с использованием элемента em.
<i> Выделите часть текста с помощью элемента i; курсивное начертание шрифта.
<ins> Помечайте изменения документа как новый текст, используя элемент ins;
фрагмент текста, который был добавлен в документ.
<kbd> HTML элемент ввода с клавиатуры. Используйте пользовательский ввод с клавиатуры, голосовой ввод или ввод с использованием любого другого типа устройств ввода текста для отображения ввода в моноширинном шрифте браузера по умолчанию.
<mark> Выделенный текст в справочных целях, используйте элемент mark.
<q> Короткая цитата. Определите встроенные цитаты, используя текст внутри элемента q.
Для источника цитаты используется <cite>.
<s> Определите текст, который больше не является правильным или актуальным.
Элемент s отображает текст как перечеркнутый.
<samp> Отображают текст внутри HTML тега моноширинным шрифтом.
Текст, который является результатом вывода компьютерной программы или скрипта.
<small> Уменьшает размер шрифта по сравнению с обычным текстом.
Допускается применение вложенных элементов <small>.
<span> Элемент span предназначен для определения строчных элементов документа,
который, по существу, ничего не представляет.
<strong> Придайте значимости, используя элемент strong для акцентирования текста,
его содержание имеет большое значение.
<sub> Отображает шрифт в виде нижнего индекса.
sub element чаще используются для выделения отдельных символов, а не слов.
<sup> sup элемент отображает текст в виде верхнего индекса.
<u> Используя элемент u текст выделяется подчёркиванием.
<var> Для выделения переменных компьютерных программ используется элемент var.

Встроенный контент

Изображения и другие элементы, такие как <audio>, <canvas>, <img>, <svg> и <video> по умолчанию отзывчивы в UIkit 3. Если макет сужается, они корректируют свой размер и сохраняют свои пропорции. Чтобы предотвратить это (отменить адаптивность), добавьте к элементу или любому родительскому контейнеру класс .uk-preserve-width из компонента Утилиты : Полезные плюшки.

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

  • Image
  • <div class="uk-width-4-5">
        <img src="/demo/img/photo.jpg" alt="Image">
    </div>

Текстовый абзац

Создайте абзац, используя элемент <p>. Текстовый абзац является блочным элементом, всегда начинается с новой строки.

  • Как-то решил приколоться и в резюме, в графе положительные качества, написал - отсутствие совести. И тут же стали предлагать та-а-акие должности...

  • <p>Как-то решил приколоться и в резюме, в графе положительные качества, написал - отсутствие совести. И тут же стали предлагать та-а-акие должности...</p>

Заголовки

Используйте теги <h1>, ... , <h6>, чтобы определить свои заголовки. Заголовки очень любят поисковики, они повышают ценность текста на веб-странице, который располагается внутри этих тегов.

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

  • h1 Заголовок 1

    h2 Заголовок 2

    h3 Заголовок 3

    - h1 Заголовок как h3 -

    h4 Заголовок 4

    h5 Заголовок 5
    h6 Заголовок 6
  • <h1>h1 Заголовок 1</h1>
    <h2>h2 Заголовок 2</h2>
    <h3>h3 Заголовок 3</h3>
    <h1 class="uk-h3">- h1 Заголовок как h3 -</h1> <!-- Заголовок H1 выглядит как H3 -->
    <h4>h4 Заголовок 4</h4>
    <h5>h5 Заголовок 5</h5>
    <h6>h6 Заголовок 6</h6>

Списки

Создайте неупорядоченный список (маркированный), используя блочный элемент <ul> и элемент <ol> для упорядоченных списков (нумерованный список). Для формирования элементов списка используется тег <li>.

    • Маниловка
    • Заманиловка
      • Петрушка
      • Заманиловка
        • Маниловка
        • Душенька
    • Алкида
    • Фемистоклюс
  • <ul>
        <li>Маниловка</li>
        <li>Заманиловка
            <ul>
                <li>Петрушка</li>
                <li>Заманиловка
                    <ul>
                        <li>Маниловка</li>
                        <li>Душенька</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Алкида</li>
        <li>Фемистоклюс</li>
    </ul>

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


Список описаний / определений

Создайте список описания, используя тройку элементов <dl>, <dt> и <dd>, предназначенных для создания списка определений. Элемент <dl> служит контейнером для списка пар терминов и их описаний. Используйте элемент <dt> для определения термина и <dd> для описания.

  • Списки описания
    Список описания определяет термины и их соответствующие описания.
    Это термин
    Это описание термина.
    Это ещё один какой-то термин.
    А это ещё какое-то определение термина.
  • <dl>
        <dt>Списки описания</dt>
        <dd>Список описания определяет термины и их соответствующие описания.</dd>
        <dt>Это термин</dt>
        <dd>Это описание термина.</dd>
        <dt>Это ещё один какой-то термин.</dt>
        <dd>А это ещё какое-то определение термина.</dd>
    </dl>

Для получения дополнительных опций стиля, посмотрите на компонент Список описания.


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

Создайте горизонтальную линию, которая вставляет разрыв строки (отступы) до и после себя, используя элемент <hr>.

  • Блин, каждое утро один и тот же замкнутый круг: чтобы сварить кофе - нужно проснуться, а чтобы проснуться - нужно выпить кофе.


    Возможно, для многих юных пользователей Интернета это будет новостью, но лайки - это собаки. Не на то надо смотреть, где человек родился, а каковы его нравы, не в какой земле, а по каким принципам решил он прожить свою жизнь.

  • <p>Блин, каждое утро один и тот же замкнутый круг: чтобы сварить кофе - нужно проснуться, а чтобы проснуться - нужно выпить кофе.</p>
    
    <hr> <!-- Горизонтальная линия -->
    
    <p>Возможно, для многих юных пользователей Интернета это будет новостью, но лайки - это собаки. Не на то надо смотреть, где человек родился, а каковы его нравы, не в какой земле, а по каким принципам решил он прожить свою жизнь.</p>

Для дополнительных стилей разделителю, посмотрите на компонент Разделитель.


Цитаты

Чтобы процитировать в документе несколько строк содержимого из другого источника (использование длинных цитат внутри документа), используйте элемент <blockquote>. HTML-элемент blockquote указывает на то, что заключенный в нем текст является развернутой цитатой. URL адрес на источник цитаты можно указать в атрибуте cite.

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

  • <blockquote cite="#">
        <p class="uk-margin-small-bottom">Праздность и ничегонеделание влекут за собой порочность и нездоровье - напротив того, устремление ума к чему-либо приносит за собой бодрость, вечно направленную к укреплению жизни.</p>
        <footer>Кто-то известный <cite><a href="#">Источник цитаты</a></cite></footer> <!-- URI на источник цитаты можно указать в атрибуте cite -->
    </blockquote>

Предварительно отформатированный текст

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

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

Документация
Компоненты