Варианты карты Semantic-UI

Опубликовано: 17 Сентября, 2022

Semantic UI — это платформа с открытым исходным кодом, которая использует CSS и jQuery для создания отличных пользовательских интерфейсов. Это то же самое, что и загрузчик для использования, и имеет множество различных элементов, которые можно использовать, чтобы сделать ваш сайт более удивительным.

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

Варианты карты Semantic-UI:

  • Fluid : используется для того, чтобы заставить элемент карты занимать всю ширину контейнера.
  • Centered : вся карта должна быть заключена в класс .centered, чтобы центрировать карту.
  • Поднятый : все должно быть заключено в этот класс, чтобы можно было поднять карту над страницей.
  • Ссылка : активирует поднятую карту, которая перемещается при наведении курсора.
  • Floated : используется для перемещения содержимого влево/вправо.
  • Выравнивание текста : используется для выравнивания текста внутри карточки.
  • Colored : используется для установки цвета карты.
  • Количество столбцов : используется для установки количества карточек в ряду.
  • Stackable : используется для автоматической укладки группы карточек рядами в один столбец на мобильных телефонах.
  • Удвоение : это используется для принудительного размещения группы карточек в столбцах с шириной карточки, удвоенной по сравнению с исходной, как только ширина окна пересекает контрольную точку ширины менее 990 пикселей. Этот класс помогает создать группу карточек, которые могут удвоить ширину столбца для мобильных устройств.

Синтаксис:

<div class="ui Card-Variations card">
  <div class="image">
    ...
  </div>
  
  <div class="content">
    ...
  </div>
</div>

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

Выход:

Пример 2. Ниже приведен код, демонстрирующий использование вариантов Semantic-UI, ориентированных на карты.

Выход:

Пример 3. Ниже приведен код, демонстрирующий использование поднятых вариаций Semantic-UI Card.

Выход:

Пример 4. Ниже приведен код, демонстрирующий использование вариантов ссылок Semantic-UI Card.

Выход:

Пример 5. Ниже приведен код, демонстрирующий использование вариантов плавающего содержимого Semantic-UI Card.

Выход:

Пример 6. Ниже приведен код, демонстрирующий использование вариантов выравнивания текста Semantic-UI Card.

Выход:

Пример 7. Ниже приведен код, демонстрирующий использование цветных вариаций карты Semantic-UI.

Выход:

Пример 8. Ниже приведен код, демонстрирующий использование вариантов количества столбцов Semantic-UI Card.

Выход:

Пример 9. Ниже приведен код, демонстрирующий использование стекируемых вариантов карты семантического пользовательского интерфейса.

Выход:

Пример 10. Ниже приведен код, демонстрирующий использование вариантов дублирования карты Semantic-UI.

Выход:

Ссылка: https://semantic-ui.com/views/card.html#fluid-card