Как работать с наполнением сайта в системе OKsoft часть 2
Изображения
Ни один современный сайт не обходится без красивых изображений. Сейчас обязательным параметром является адаптивность, то есть правильное и полное отображение на всех размерах экранов. В платформе OKsoft есть нужные механизмы чтобы картинки умели сжиматься или увеличиваться в зависимости от размера экрана, на котором пользователь смотрит сайт. Это работает очень просто. Необходимо для изображения указать команду img-fluid. Можно закруглить края или использовать бордер и наложить тень
Полное описание и примеры можно посмотреть здесь
Вот коды картинок из примера выше. Указываем ссылку на размещение нашего изображения и добавляем class="img img-fluid". Картинка сама будет подстраиваться под размер монитора пользователя. Добавим rounded-4 и края картинки станут закругленными, img-thumbnail добавит рамочку, а shadow-lg - тень
<img src="/ok-content/uploads/images/slider-3.jpg" class="img img-fluid">
<img src="/ok-content/uploads/images/slider-2.jpg" class="img img-fluid rounded-4">
<img src="/ok-content/uploads/images/slider-1.jpg" class="img img-fluid img-thumbnail shadow-lg">
Закругления
Неповторимый стиль сайту могут придать закругления для различных бордеров и изображений. Можно сделать небольшое мягкое закругление для того чтобы страницы смотрелись законченными, можно размещать изображения в круглой рамочке, или вовсе придать закругление одного или нескольких углов.
Различные варианты закруглений здесь
Изображения с таким оформлением размещаются абсолютно таким же образом что и обычные, всю работу сделает нужный код. Ниже несколько примеров, а по ссылке можно найти все варианты и забрать для своего сайта нужный.
<img src="/ok-content/uploads/images/slider-5.jpg" class="img img-fluid rounded-circle">
<img src="/ok-content/uploads/images/slider-4.jpg" class="img img-fluid rounded-start-2 ">
<img src="/ok-content/uploads/images/slider-2.jpg" class="img img-fluid rounded-start-pill">
<img src="/ok-content/uploads/images/slider-1.jpg" class="img img-fluid rounded-5 rounded-top-0">
Карусель (слайдер)
Множество различных вариантов слайдера, который прекрасно работает как на компьютере и ноутбуке, так и на мобильных, управляется с помощью пальца (свайп), можно установить автоматическую прокрутку, разместить надписи.
Полное описание и примеры можно посмотреть здесь
Заголовок первого слайда
Текст для первого слайда
Заголовок второго слайда
Текст для второго слайда
Заголовок третьего слайда
Текст для третьего слайда
Такой слайдер очень прост в использовании, его легко установть и редактировать в дальнейшем. Вот такой код нам понадобится:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/ok-content/uploads/images/slider-1.jpg" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="/ok-content/uploads/images/slider-2.jpg" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="/ok-content/uploads/images/slider-3.jpg" class="d-block w-100">
</div>
</div>
</div>
Кнопки
Для оформления сайта используются различные кнопки. Важно, чтобы они были в едином стиле, с одинаковыми закруглениями и отступами. Главная кнопка может иметь собственный стиль чтобы обращать на себя максимальное внимание и обеспечивать наибольший отклик. Используйте уже созданные классы для кнопок. Кнопка станет нужного вида если применить класс btn- и название нужного стиля, например btn-primary. При наведении или клике такая кнопка будет отзываться общим для всего сайта эффектом, например затемняться и отбрасывать тень.
Вот так можно поставить кнопку нужного нам цвета:
<button type="button" class="btn btn-primary"> Название кнопки </button>
<button type="button" class="btn btn-secondary"> Название кнопки </button>
<button type="button" class="btn btn-success"> Название кнопки </button>
<button type="button" class="btn btn-danger"> Название кнопки </button>
<button type="button" class="btn btn-warning"> Название кнопки </button>
<button type="button" class="btn btn-info"> Название кнопки </button>
<button type="button" class="btn btn-light"> Название кнопки </button>
<button type="button" class="btn btn-dark"> Название кнопки </button>
<button type="button" class="btn btn-link"> Название кнопки </button>
Контурные кнопки
Варианты для контурных кнопок также включены в системе, их очень просто использовать.
Все об использовании кнопок можно увидеть здесьКонтурные кнопки могут использоваться вместе с обычными, создавая индивидуальный визуальный характер вашего сайта.
<button type="button" class="btn btn-outline-primary"> Название кнопки </button>
<button type="button" class="btn btn-outline-secondary"> Название кнопки </button>
<button type="button" class="btn btn-outline-success"> Название кнопки </button>
<button type="button" class="btn btn-outline-danger"> Название кнопки </button>
<button type="button" class="btn btn-outline-warning"> Название кнопки </button>
<button type="button" class="btn btn-outline-info"> Название кнопки </button>
<button type="button" class="btn btn-outline-light"> Название кнопки </button>
<button type="button" class="btn btn-outline-dark">< Название кнопки </button>
Значки (Бэйджи)
Довольно часто при верстке используются различные значки или бэйджи.
Все о бейджах тутВставка бэйджей в страничку выглядит так:
<span class="badge rounded-pill text-bg-primary"> Название бэйджа </span>
<span class="badge rounded-pill text-bg-secondary"> Название бэйджа </span>
<span class="badge rounded-pill text-bg-success"> Название бэйджа </span>
<span class="badge rounded-pill text-bg-danger"> Название бэйджа </span>
<span class="badge rounded-pill text-bg-warning"> Название бэйджа </span>
<span class="badge rounded-pill text-bg-info"> Название бэйджа </span>
<span class="badge rounded-pill text-bg-light"> Название бэйджа </span>
<span class="badge rounded-pill text-bg-dark"> Название бэйджа </span>
Аккордеон
Красивый элемент для оформления вашего сайта. При клике на заголовок открывается содержание. Часто можно видеть такое оформление раздела "Вопрос-ответ", когда на странице при переходе пользователь видит вопросы, а после клика на нужный вопрос читает ответ. Позволяет эффективно использовать экран, поскольку экономит место, что важно для мобильного отображения.
Варианты аккордеона смотрите тут.accordion-flush class. This is the first item's accordion body..accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content..accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.Этот элемент чуть сложнее, вот так будет выглядеть вставка на вашем сайте:
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne"> Название элемента аккордеона 1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"> Текст элемента аккордеона 1 (открывается при нажатии на название элемента аккордеона 1)
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseTwo"> Название элемента аккордеона 2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"> Текст элемента аккордеона 2 (открывается при нажатии на название элемента аккордеона 2)
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseThree"> Название элемента аккордеона 3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"> Текст элемента аккордеона 3 (открывается при нажатии на название элемента аккордеона 3)
</div>
</div>
</div>
Ссылки
В сайтах часто используются ссылки на различные странички или на другие ресурсы. интуитивно пользователь привык что ссылка имеет подчеркивание и выделена цветом. По умолчанию в сайте настроен цвет и вид ссылки, но для оформления разных страниц можно использовать разные внешние эффекты, такие как цвет, непрозрачность и отступ подчеркивания, и другие.
Варианты оформления ссылок смотрите в документацииОформляем ссылки для страничек сайта:
<a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover"> Текст ссылки </a>
<a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover"> Текст ссылки </a>
<a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover"> Текст ссылки </a>
<a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover"> Текст ссылки </a>
<a href="#" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover"> Текст ссылки </a>
<a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover"> Текст ссылки </a>
<a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover"> Текст ссылки </a>
<a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover"> Текст ссылки </a>
Карточки
Прекрасный элемент оформления. Упорядочивает элементы внутри себя, имеет обводку, тени, можно разделить на части, что позволяет производить ровное построение элементов внутри.
Посмотрите сколько различных элементов можно сделать с помощью карточек
Это котик
Такой котик точно живет где-то рядом с вами. Он любит покушать и весьма пушист
- Элемент
- Второй элемент
- Третий элемент
Пример карточки
<div class="card text-bg-dark">
<img src="/ok-content/uploads/images/slider-3.jpg" class="card-img">
<div class="card-img-overlay ">
<h5 class="card-title"> Заголовок карточки </h5>
<p class="card-text"> Текст карточки </p>
</div>
</div>
Видео
Можно вставлять видео в страничку вашего сайта с возможностью просмотра не переходя с вашего сайта на другой. Такое видео подстраивается под размер монитора, на котором пользоватль просматривает ваш сайт, а также сохраняет свои пропорции
Документация здесьКак сделать? Вставляем такой код в нашу страничку сайта:
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/I46IZ1QsUdM?si=pUqdBhCJdPV3G9Cs" title="YouTube video" allowfullscreen> </iframe>
</div>
Ссылка для вставки видео можно найти так: Youtube - зайдите на страничку с видео, нажмите "поделиться" и далее "встроить". Rutube - зайдите на страничку с видео, нажмите "поделиться" и далее "код для плеера". Скопируйте url и вставьте в ваш сайт.
