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

Normalize.css

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

Ссылки

Стиль ссылки по умолчанию

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

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

Изображения и другие элементы, такие как <audio>, <canvas>, <img>, <svg> и <video> по умолчанию отзывчивы в UIkit 3. Если макет сужается, элементы корректируют свой размер и сохраняют свои пропорции.

Отменить адаптивность

Чтобы предотвратить адаптивное поведение по умолчанию и отменить адаптивность, добавьте к элементу или любому родительскому контейнеру класс .uk-preserve-width из компонента Утилиты : Полезные плюшки.

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

• Результат
• Разметка

<div class="uk-width-4-5">
    <img src="images/photo.webp" 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> внутрь, чтобы определить блок с кодом.