Как работать с наполнением сайта в системе OKsoft часть 3
Как управлять отображением информации на больших экранах и маленьких (то есть адаптивная верстка)
В современных реалиях существует проблема, что информацию, которую вы отображаете на страницах сайта, должна по-разному отображаться например на 24-дюймовом экране компьютера и 7 дюймовом экране мобильного телефона
Для этого существуют определенные приемы верстки страниц сайтов, которые позволяют добиться нужного поведения вашего контента
Возьмем для примера блок текста, в котором вы хотите чтобы слева у вас была картинка а справа ее описание. На большом экране это без проблем отобразится потому что там много места по ширине, а на мобильном все это просто не поместится в экран.
Вид на большом экране:
А на мобильном хотим вот так (картинка сверху а текст снизу):
Вставка для такого блока:
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<img src="/ok-content/uploads/images/slider-3.jpg" class="d-block mx-lg-auto img-fluid">
</div>
<div class="col-lg-6">
<h1> Привет! это попугай </h1>
<p> Пожалуй, самые красочные птицы на планете. Живут в тропиках и субтропиках. Ещё в древности говорящих попугаев привозили в качестве экзотических подарков из тропических стран. Первым это сделал спутник Александра Македонского в его индийском походе Онесикрит. Многие виды попугаев, особенно говорящих, издавна содержат в неволе, продают в зоомагазинах, а также разводят в домашних условиях. </p>
<a class="btn btn-secondary my-3" href="/popugai"> Еще про попугая </a>
</div>
</div>
</div>
Вот живая верстка. В зависимости от того, на каком экране вы просматриваете данную статью, ее блоки автоматически подстроятся под ваш монитор:
Привет! это попугай
Пожалуй, самые красочные птицы на планете. Живут в тропиках и субтропиках. Ещё в древности говорящих попугаев привозили в качестве экзотических подарков из тропических стран. Первым это сделал спутник Александра Македонского в его индийском походе Онесикрит. Многие виды попугаев, особенно говорящих, издавна содержат в неволе, продают в зоомагазинах, а также разводят в домашних условиях.
Вот как это работает. Внешний контейнер container создает невидимую рамку, внутри нее row сделает горизонтальный блок, а уже внутри него кубики col- и все что внутри них, расположатся слева направо, а в мобильном размере - сверзу вниз. В нашем примере внутри горизонтального блока row фото попугая расположено в первом блоке col-lg-6, а заголовок, текст и кнопка - во втором col-lg-6. Обозначение col-lg-6 означает, что этот блок из 12 условных частей занимает 6, то есть половину экрана по горизонтали. Почему именно 12? В Bootstrap устроено так, что условно экран любого устройства состоит на 12 частей, это 100% ширины. Код col-md-6 делает блок 50% ширины экрана Вот тут постарались понятнее объяснить, посмотрите, это несложно
Покажем другой пример. Центрированный укрупненный текст с заголовком и иконкой вверху с кнопками внизу
Заголовок текста по центру
Небольшой текст, который можно разместить в лендинге или на внутренней странице вашего сайта. Такой текст должен быть не слишком длинным, и служить для обращения внимания пользователя, побудить кликнуть на одну из кнопок ниже. Такие блоки называются "призыв к действию" или Callback
Вставка для такого блока:
<div class="px-4 text-center">
<img class=" mx-auto mb-4" src="/ok-content/uploads/images/girl.png" width="72">
<h2> Заголовок текста по центру </h2>
<div class="col-lg-8 mx-auto">
<p class="lead mb-4"> Небольшой текст, который можно разместить в лендинге или на внутренней странице вашего сайта. Такой текст должен быть не слишком длинным, и служить для обращения внимания пользователя, побудить кликнуть на одну из кнопок ниже. Такие блоки называются "призыв к действию" или Callback </p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button class="btn btn-danger btn-lg px-4 me-sm-3"> Клик </button>
<button class="btn btn-outline-secondary btn-lg px-4"> Другой клик </button>
</div>
</div>
</div>
Вид на десктопе и на мобильном:
Три блока с иконками, заголовками и текстом
Наш первый плюс
Абзац текста под заголовком для пояснения заголовка. В чем преимущество этого плюса?
Еще один
Опишем наш второй бенефит для клиентов, чем мы отличаемся кратко и по сути, чтобы заинтересовать
И еще!
Наши преимущества яркие и заметные! Об остальном можно написать на страницу, но тут мы выделили главное
Вставка для такого блока:
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3 p-2">
<i class="bi bi-airplane-engines"></i>
</div>
<h3> Наш первый плюс </h3>
<p> Абзац текста под заголовком для пояснения заголовка. В чем преимущество этого плюса? </p>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3 p-2">
<i class="bi bi-boxes"></i>
</div>
<h3> Еще один </h3>
<p> Опишем наш второй бенефит для клиентов, чем мы отличаемся кратко и по сути, чтобы заинтересовать </p>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3 p-2">
<i class="bi bi-cake2"></i>
</div>
<h3> И еще! </h3>
<p> Наши преимущества яркие и заметные! Об остальном можно написать на страницу, но тут мы выделили главное </p>
</div>
</div>
Вид на десктопе и на мобильном:
Карточки с фоновыми изображениями - красота и простота!
Вставка для такого блока:
<div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
<div class="col">
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('/ok-content/uploads/images/bg_abs.jpg');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
<h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold"> Короткий заголовок </h3>
<p> Небольшой текст если нужно, но и без него красиво </p>
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
<i> i class="bi bi-airplane-engines me-2"</i>
<p> Иконки и <a class="underline">ссылки</a> внизу</p>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('/ok-content/uploads/images/bg_abs.jpg');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
<h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold"> Более длинный заголовок, без текста </h3>
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
<i> i class="bi bi-airplane-engines me-2"</i>
<p> Иконки и <a class="underline">ссылки</a> внизу</p>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('/ok-content/uploads/images/bg_abs.jpg');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
<h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold"> Еще более длинный заголовок мы покажем здесь, эта карточка самая высокая из трех </h3>
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
<i> i class="bi bi-airplane-engines me-2"</i>
<p> Иконки и <a class="underline">ссылки</a> внизу</p>
</div>
</div>
</div>
</div>
</div>
Вид на десктопе и на мобильном:
Основные принципы верстки
Классы в Bootstrap делятся на 3 большие группы:
- для создания сетки — адаптивного макета страницы;
- для стилизации контента — текста, изображений, таблиц, форм и прочей информации;
- служебные — для решения популярных вспомогательных задач, таких как отображение и скрытие элементов в зависимости от размера экрана пользователя, выравнивание текста на странице, настройка цвета, фона, отступов, закруглений, прозрачности и пр.
Кроме классов, в Bootstrap есть компоненты (готовые объекты интерфейса) - формы, карточки, кнопки и бэйджи, выпадающие списки, вкладки, подсказки, модальные окна, навигационные меню - мобильные и десктопные, всплывающие панели и пр. Кроме использования уже включенных в систему компонентов и классов, ничего не мешает создавать собственные классы и подключать сторонние компоненты, и тем самым легко адаптировать Bootstrap под свои потребности. Движок OKsoft имеет для этих целей отдельный файл для внесения собственных стилей.
Полная документация Bootstrap размещена здесьАдаптивные механизмы - сетка или разметка
Для начала необходимо понять как Bootstrap обеспечивает адаптивное отображение различных блоков вашего сайта.
Внешний блок - это контейнер, в котором размещаются другие элементы. Есть 2 контейнера:
<div class="container"> ... </div>
<div class="container-fluid"> ... </div>
Оба эти контейнера обеспечивают механику адаптивности и работают абсолютно одинаково, различие лишь в том, что container-fluid использует всю ширину экрана
Как работает адаптивная сетка
Система сеток Bootstrap использует серию контейнеров, строк и колонок для компоновки и выравнивания содержимого для полной адаптивности.
Принцип работы такой сетки прост - экран по ширине условно уже разделен на 12 частей, а сколько частей из этих 12 должно быть занято блоком, верстальщик указывает в названии класса. Например, для того, чтобы расположить контент на половину ширины экрана, нужен класс col-6, а для четверти - col-3. Для адаптивности нужно использовать классы с указанием ширины, например col-md-6 - тогда для экранов меньше размера md (ширина 768px - это планшеты, небольшие ноутбуки), сайт расположит контент на половине ширины экрана, а при меньшем экране - на всю ширину. Посмотрите пример ниже.
Вот так будет выглядеть пример на мониторе компьютера:
А вот так на мобильном:
Поскольку страница сайта обычно состоит не из одного, а из нескольких горизонтальных блоков, где расположен контент разной ширины, нужен класс строки row
Вот такой код нужно сделать на вашей страничке для такого поведения. Внешний контейнер - container, внутри него горизонтальный блок row , который в свою очередь разделен на ячейки (столбцы) - col
<div class="container">
<div class="row">
<div class="col-md-1"> ... </div>
<div class="col-md-2"> ... </div>
<div class="col-md-3"> ... </div>
<div class="col-md-6"> ... </div>
</div>
</div>
Если все ячейки нужно сделать одинаковой ширины, то задача упрощается, просто количество колонок, на которые должен разделиться экран, указывается сразу в классе строки, например для 4 равных столбцов row-cols-4, а для автоматического распределения просто row а внутри нее col. Столько, сколько нужно. Система сама выстроит равные кубики внутри горизонтального блока.
<div class="container">
<div class="row">
<div class="col"> ... </div>
<div class="col"> ... </div>
</div>
</div>