В современных реалиях существует проблема, что информацию, которую вы отображаете на страницах сайта, должна по-разному отображаться например на 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>