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

Основные элементы HTML. Компонент предоставляет стили по умолчанию для всех элементов HTML. Используются стили знаменитого Normalize.css.

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 из компонента Утилиты : Полезные плюшки.

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

  • Картинка
  • <div class="uk-width-4-5">
        <img src="/demo/img/photo.jpg" width="660" height="440" alt="Картинка" loading="lazy">
    </div>

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

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

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

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

Заголовки

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

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

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

    h3 Заголовок как h2

    h3 Заголовок 3

    h4 Заголовок 4

    h5 Заголовок 5
    h6 Заголовок 6
  • <h3 class="uk-h1">h3 Заголовок как h1</h3>
    <h3 class="uk-h2">h3 Заголовок как h2</h3><!-- Заголовок H3 выглядит как H2 -->
    <h3>h3 Заголовок 3</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> внутрь, чтобы определить блок с кодом.

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