Col xs: Bootstrap 4 система сеток, примеры использования

Bootstrap 4 система сеток, примеры использования

Система сеток Bootstrap 4 состоит из 12 столбцов.

Пример сетки Bootstrap 4:

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-2

.col-xs-3

.col-xs-7

.col-xs-4

.col-xs-4

.col-xs-4

Цифра в конце каждого класса определяет количество столбцов, которое займет блок. Класс .col-xs-1 определяет 1 столбец, .col-xs-8 — 8 столбцов. xs — означает, что сетка будет действовать на экранах с очень маленьким разрешением (например, телефоны). Для других разрешений есть классы sm, md, lg.

Код сетки из примера выше:

<div>
	<!-- Bootstrap Grid -->
	<div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	</div>
	<div>
	  <div>.col-xs-2</div>
	  <div>.col-xs-3</div>
	  <div>.col-xs-7</div>
	</div>
	<div>
	  <div>.col-xs-4</div>
	  <div>.col-xs-4</div>
	  <div>.col-xs-4</div>
	</div>
	<div>
	  <div>.col-xs-5</div>
	  <div>.col-xs-7</div>
	</div>
	<div>
	  <div>.="col"] {
	border: 1px solid white;
	background: #f5f5f5;
	text-align: center;
	padding-top: 8px;
	padding-bottom: 8px;
	}
</style>

Сетка, приведенная выше, будет выглядеть одинаково на всех устройствах.

В следующем примере мы используем такую же разметку, только используем сетку md. Это значит, что на экранах с разрешением меньше 992px все ячейки сетки вытянутся на всю ширину экрана и расположатся друг на другом.

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-2

.col-md-3

.col-md-7

.col-md-4

.col-md-4

.col-md-4

<div>
	<!-- Bootstrap Grid -->
	<div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	</div>
	<div>
	  <div>.col-md-2</div>
	  <div>.col-md-3</div>
	  <div>.col-md-7</div>
	</div>
	<div>
	  <div>.col-md-4</div>
	  <div>.col-md-4</div>
	  <div>.col-md-4</div>
	</div>
	<div>
	  <div>.col-md-5</div>
	  <div>.col-md-7</div>
	</div>
	<div>
	  <div>.col-md-6</div>
	  <div>.col-md-6</div>
	</div>
	<div>
	  <div>.col-md-12</div>
	</div>
</div>

Размеры сетки

Контейнеры

Сетка должна располагаться внутри контейнера .container (ширина 1170px) или .container-fluid (растягивается на всю ширину экрана).

Row

Колонки должны располагаться внутри строк .row. Только колонки могут быть непосредственными потомками строк.

Padding

У колонок есть отступы. Отступы крайних колонок компенсируются отрицательным margin строки .row.

Больше 12 колонок в ряд?

Если расположить больше 12 колонок в ряд, то колонки будут перемещаться на следующий ряд. Это значит, что если вы расположите, например, .col-md-10 и .col-md-3 в один ряд .row, то .col-md-3 переместится в следующий ряд.

Адаптивная верстка

Для создания адаптивной верстки используйте несколько классов, например, class="col-sm-10 col-md-6".

Значение чисел в «col-md-4″,» col-xs-1″, «col-lg-2» в Bootstrap

Применяется только к Bootstrap 3.

Игнорируя буквы (x s , sm , md , lg) , я начну только с цифр…

• числа (1-12) представляют собой часть общей ширины любого div
• все дивы разделены на 12 столбцов
• итак, col-*-6 охватывает 6 из 12 столбцов (половина ширины), col-*-12 охватывает 12 из 12 столбцов (вся ширина) и т. Д

Итак, если вы хотите, чтобы два одинаковых столбца охватывали div, напишите

<div>Column 1</div>
<div>Column 2</div>

Или, если вы хотите, чтобы три неравных столбца имели одинаковую ширину, вы можете написать:

<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>

Вы заметите, что число столбцов всегда увеличивается до 12. Это может быть меньше двенадцати, но будьте осторожны, если их больше 12 , так как ваши оскорбительные дивы столкнутся со следующей строкой (не .row, что совсем другая история).

Вы также можете вложить столбцы в столбцы (лучше всего с оберткой .row вокруг них), например:

<div>
  <div>
    <div>Column 1-a</div>
    <div>Column 1-b</div>
  </div>
</div>
<div>
  <div>
    <div>Column 2-a</div>
    <div>Column 2-b</div>
  </div>
</div>

Каждый набор вложенных div также охватывает до 12 столбцов родительского div. NOTE: Поскольку каждый класс .col имеет заполнение 15 пикселей с обеих сторон, вы обычно должны обернуть вложенные столбцы в .row , который имеет поля-15 пикселей. Это позволяет избежать дублирования заполнения и сохраняет содержимое выровненным между вложенными и не вложенными классами col.

— Вы специально не спрашивали об использовании xs, sm, md, lg , но они идут hand-in-hand, так что я не могу не коснуться этого…

Короче говоря, они используются для определения размера экрана , к которому должен применяться этот класс:

• xs = очень маленькие экраны (мобильные телефоны)
• sm = маленькие экраны (планшеты)
• md = средние экраны (некоторые рабочие столы)
• lg = большие экраны (остальные рабочие столы)

Прочитайте » Сетку
Дополнительные сведения см. в главе «Параметры»
официальной документации по начальной загрузке.

Обычно вы должны классифицировать div, используя несколько классов столбцов, чтобы он вел себя по-разному в зависимости от размера экрана (это основа того, что делает bootstrap отзывчивым). например: div с классами col-xs-6 и col-sm-4 будет занимать половину экрана на мобильном телефоне (xs) и 1/3 экрана на планшетах(sm).

<div>Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div>Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

NOTE: согласно комментарию ниже, классы сетки для заданного размера экрана применяются к этому размеру экрана и больше , если другое объявление не переопределяет его (т. е. col-xs-6 col-md-4 охватывает 6 столбцов в xs и sm и 4 столбца в md и lg , хотя sm и lg никогда не были явно объявлены)

NOTE: если вы не определяете xs , по умолчанию он будет равен col-xs-12 (т. е. col-sm-6 -это половина ширины на экранах sm , md и lg , но полная ширина на экранах xs ).

NOTE: на самом деле все в порядке, если ваш .row включает в себя более 12 колов, если вы знаете, как они отреагируют. —Это спорный вопрос, и не все с ним согласны.

`col-xs- *` не работает в Bootstrap 4

Я не сталкивался с этим раньше, и мне очень трудно найти решение. Если в начальной загрузке есть столбец, равный medium:

<h2>Hello, world!</h2>

  <div>
      <div>
          <div>
              <h2>vicki williams</h2>
          </div>
      </div>
  </div>

Выравнивание текста работает отлично:

Но при создании столбца, равного очень маленькому, вот так:

 <div>
      <div>
          <div>
              <h2>vicki williams</h2>
          </div>
      </div>
  </div>

Тогда выравнивание текста больше не работает:

Есть ли какая-то концепция начальной загрузки, которую я не понимаю, или это на самом деле ошибка, как мне кажется. У меня никогда не было этой проблемы, так как мой текст всегда выравнивался в прошлом с xs. Любая помощь будет принята с благодарностью. Вот мой полный код:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
    <h2>Hello, world!</h2>

      <div>
          <div>
              <div>
                  <h2>vicki williams</h2>
              </div>
          </div>
      </div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

Классы visible-** и hidden-** в Bootstrap 4 / Тяпк

Классы hidden-* и visible-* убраны в Bootstrap 4.

Чтобы скрыть элемент используйте d-none класс или d-{sm,md,lg,xl}-none класс для соответствующего брейкпоинта. Отдельного xs нет, так как он используется по-умолчанию.

Чтобы показать элемент но определённом брейкпоинте следует объеденить один из .d-*-none классов c .d-*-* классами, например .d-none .d-md-block .d-xl-none скроет элемент для всех размеров экрана, за исключением md и lg.

Соответствие классам из Bootstrap 3

Show/hide for breakpoint and down:

hidden-xs-down = d-none d-sm-block
hidden-sm-down = d-none d-md-block
hidden-md-down = d-none d-lg-block
hidden-lg-down = d-none d-xl-block

Show/hide for breakpoint and up:

hidden-xl-down = d-none (same as hidden)
hidden-xs-up = d-none (same as hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up = d-xl-none

Show/hide only for a single breakpoint:

hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
hidden-sm (only) = d-block d-sm-none d-md-block
hidden-md (only) = d-block d-md-none d-lg-block
hidden-lg (only) = d-block d-lg-none d-xl-block
hidden-xl (only) = d-block d-xl-none
visible-xs (only) = d-block d-sm-none
visible-sm (only) = d-none d-sm-block d-md-none
visible-md (only) = d-none d-md-block d-lg-none
visible-lg (only) = d-none d-lg-block d-xl-none
visible-xl (only) = d-none d-xl-block

Сетка в Bootstrap 4. Подробное руководство | by Stas Bagretsov

Понимание сеток в Bootstrap — это самый важный момент работы с этим замечательным фреймворком, понимая сетки, вы сможете делать на нем без препятствий буквально всё, что захотите. Советую почитать статьи Узнаем Bootstrap 4 за 30 минут, создавая лендинг и Самые полезные хитрости в Bootstrap

Перевод статьи How the Bootstrap 4 Grid Works

👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️

Система сеток в Bootstrap используется для создания раскладок, а в частности для создания их адаптивности. Понимание того, как это работает — является жизненно важным моментом при работе с Bootstrap. Сетка сделана из группирования строк и колонок внутри одного или нескольких контейнеров.

Сетки на Bootstrap могут использоваться отдельно, без Bootstrap JavaScript и других CSS компонентов. Вам надо только скачать и сослаться на "bootstrap-grid.css", который включает в себя flexbox классы и классы для сетки. Вообще, более подробно для этого есть отдельная документация на официальном сайте.

Вот самый простой пример применения сетки:

<divks da">container"> 
<divks da">row"> 
<divks da">col">I'm your content inside the grid!</div> 
</div> 
</div>

Этот код выдаст нам одну большую колонку на всю ширину вьюпорта.

А вот уже две колонки:

<divks da">container"> 
<divks da">row"> 
<divks da">col">Left column</div>
<divks da">col">Right column</div> 
</div> 
</div>

И вот на три колонки:

<divks da">container"> 
<divks da">row"> 
<divks da">col">Left column</div>
<divks da">col">Center column</div>
<divks da">col">Right column</div> 
</div> 
</div>

Обратите внимание, что светлые серые линии границ вокруг колонок в примере были добавлены, чтобы вы визуально могли выделить каждую колонку. Вот рабочие шаблоны на Codeply.

Простые концепты сетки очень быстро можно понять, но вы уже наверное начинаете удивляться, почему вся эта HTML разметка так необходима. У вас уже возможно есть несколько вопросов, таких как: Зачем мне нужен контейнер? Могу ли я сделать один контейнер шире, чем другие?

Я коснусь этих вопросов немного позже. Но сначала, я хочу сделать шаг назад и объяснить кое-что важное, по поводу использования сеток.

Поверьте мне. Понимание “Правил сетки” сэкономит вам кучу времени и нервов. Прочитайте их очень внимательно.

Правила сетки:

Колонки должны быть прямыми потомками Row

Row используются только для того, чтобы включать в себя колонки и не для ничего больше.

Row должны быть помещены внутри контейнера

Эти правила ОЧЕНЬ ВАЖНЫ. Строки и колонки всегда работают вместе и вам надо смотреть за тем, что один не оставался без другого.

Ждите косяка, если вы не будете соблюдать эти три простые правила. Я ответил на бесчисленное количество вопросов на Stack Overflow, просто применяя эти правила. По началу, это может быть довольно сложным, но всё последующее реально станет доступным для понимания, после того, как вы поймете то, как работает сетка.

Как использовать сетку Bootstrap. Правильный подход.

Контейнер

В простом примере до этого, вы возможно подметили, что я использовал .container, чтобы обернуть .row. Контейнер это вообще ключевой элемент сетки в Bootstrap.

<divks da">container"> 
<divks da">row"> 
<divks da">col">I'm content inside the grid!</div> 
</div> 
</div>

Контейнер может использоваться для хранения любых элементов и самого контента. Он используется не только для строк и колонок сетки. Для примера, вот идеальная и правильная разметка Bootstrap:

<div>
<h3>My Heading</h3> 
<div> 
<div>I'm content inside the grid!</div> 
</div> 
</div>

Не игнорируйте контейнер

С первого взгляда, контейнер может показаться пустяковым и не сильно уж нужным, но он очень важен для контроля ширины шаблона. Контейнер также используется для равномерного выравнивания граней шаблона внутри вьюпорта браузера. Контейнер используется, чтобы противодействовать отрицательным внешним отступам row, о чем я расскажу немного позже.

У Bootstrap 4 есть 2 типа контейнера. В моих примерах я использовал .container, но также есть и полноэкранный .container-fluid. Вы можете использовать любой из них:

1 — Контейнер с фиксированной шириной, для центровки контейнера по середине шаблона.

<div></div>

2 — Контейнер с шириной во весь экран.

<div></div>

.container масштабируется адаптивно по ширине экрана, так что в конце концов он может стать шириной на весь экран, как и .container-fluid, но на маленьких устройствах.

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

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

У строк (rows) есть отрицательные левые/правые внешние отступы в -15px. Внутренний отступ контейнера в 15px используется для пресечения срабатывания отрицательных внешних отступов в строке контейнера. Это делается для равномерного выравнивания по граням в шаблоне. Если вы не поместите строку (row) в контейнер, то она будет выходить за пределы своего контейнера, вызывая нежелательные горизонтальные прокрутки.

Строки (Rows) и Колонки (Columns)

Сейчас, я бы хотел, чтобы .row в Bootstrap не были на самом деле именованы как “строки” (row). Название “строка”, зачастую запутывающее и скрывает настоящее предназначение .row.

Когда вы думаете о строке, вы возможно думаете о горизонтальной линии, что вполне ОК, НО, лучше думать о строке, как о родителе для колонок.

Думайте о строках, как о группе колонок (Columns)

Это потому, что колонки внутри .row не всегда располагаются горизонтально вдоль вьюпорта. Иногда нам надо, чтобы колонки в шаблоне были горизотальны, а иногда нам надо, чтобы они располагались вертикально. Концепция горизонтального vs. Вертикального шаблона является сущностью адаптивного дизайна. Единственным предназначением “строки”, является содержание одной или более “колонки”.

Не вставляйте контент прямо в “строку”!

Так делать нельзя:

<div>
This is very bad, wrong way, no bueno!!
</div><div>
<p>This is also very bad, the wrong way!!</p>
</div><div>
<h3>No headings either! This is the wrong way!!</h3>
</div>

“колонки” и только колонки, размещаются внутри “строк”.

А контент размещается уже внутри “колонок”.

<div>
<div>Happy :-) This is the right way.</div>
</div>

Так же очень важно упомянуть, что .row имеет display: flex. А как потомок в Flexbox, “колонка” в каждой строке одной и той же высоты.

Благодаря Flexbox, горизонтальное и вертикальное выравнивание легко делается с использованием рабочих классов Bootstrap 4 — flex и auto-margin.

А теперь настало время углубиться в строки и колонки и то, как они на самом деле взаимодействуют. Есть разные типы колонок и разные способы использования их в шаблоне. Они как магия.

Счастье в колонках!

Создают горизонтальные разделители по вьюпорту.

Могут иметь разную ширину.

Раскладку горизонтально слева направо, вертикально сверху вниз.

Могут изменять позицию (порядок) относительно родственных элементов в той же строке.

Имеют ту же высоту, что и другие родственные элементы в той же строке.

Могут “расти” или “урезаться” по ширине.

Могут автоматически врапиться или вертикально “слепляться” при необходимости или при нужной ширине экрана.

Могут содержать больше строк и колонок при вложении.

Всё что нужно знать о колонках Bootstrap

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

И так, колонки создают горизонтальные деления по вьюпорту. Пространство между колонками называется “gutter”.

Классическая сетка Bootstrap имеет 12 колонок:

Таким образом, колонки могут быть равномерно разделены на 12 частей. Вот пример, 6 колонок (12/6=2) :

И дальше уже дело простой математики:

Колонки могут быть разделены с использованием любой части из 12 элементов. И это нормально — использовать меньше 12. И также, это нормально — использовать больше 12-ти, но это я покажу вам дальше.

Учитывая такую гибкость, возможности шаблона кажутся бесконечными.

Но сетка не всегда может быть из 12 элементов. Спасибо flexbox, у Bootstrap 4 есть новые “auto-layout” колонки. Такие безразмерные колонки дают вам больше гибкости при разработке шаблонов.

Модульные сетки | WebReference

Bootstrap характерен своей продуманной и гибкой системой модульных сеток, в основе которой лежит 12-колоночный макет.

Колонки одинаковой ширины

Сами колонки не обязательно должны иметь одинаковую ширину, можно комбинировать любое число колонок, главное, чтобы они в сумме давали 12.

Колонки разной ширины

Создание колонок

Так, чтобы создать макет из трёх колонок используем <div> с классом container, внутри которого будут располагаться наши колонки. Сами колонки находятся внутри <div> с классом row и содержат имена вида col-xs-N, где N — число колонок от 1 до 12 (пример 1).

Пример 1. Макет с тремя колонками

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Трёхколоночный макет</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <style>
   [class*="col-"] {
    background-color: #eee;
    border-right: 2px solid #fff;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 2rem;
   }
  </style>
 </head>
 <body>
  <div>
   <div>
    <div>3 колонки</div>
    <div>7 колонок</div>
    <div>2 колонки</div>
   </div>
  </div>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
 </body>
</html>

Стиль добавлен лишь для наглядного выделения колонок.

Класс container создаёт макет фиксированной ширины, значение которой зависит от размера устройства. Для мониторов максимальная ширина составляет 1170 пикселей, для смартфонов макет будет занимать всю доступную ширину. Если вам не требуется ограничивать ширину макета, то вместо класса container следует использовать container-fluid (пример 2).

Пример 2. Резиновый макет

<div>
 <div>
  <div>4 колонки</div>
  <div>6 колонок</div>
  <div>2 колонки</div>
 </div>
</div>

Отступы между колонок

Колонки изначально плотно прилегают друг к другу, что не всегда полезно для макета. Для добавления пустого пространства между колонками предназначен класс col-xs-offset-N, где N изменяется от 0 до 12. Отступ добавляется слева от текущей колонки (пример 3).

Пример 3. Добавление отступов

<div>
 <div>
  <div>3 колонки</div>
  <div>5 колонок</div>
  <div>2 колонки</div>
 </div>
</div>

Результат данного примера в браузере показан на рис. 3.

Рис. 3. Колонки с отступами между ними

Помните, что отступы добавляются к общему числу колонок, сумма которых не должна превышать 12, в противном случае колонки начнут перемещаться на другую строку.

Сдвиг колонок

Каждую колонку можно сдвигать влево или вправо на указанное число колонок. Опять же это делается с помощью классов. col-xs-pull-N — сдвигает колонку влево на заданное число, а col-xs-push-N сдвигает вправо (пример 4). Здесь N может меняться от 0 до 12.

Пример 4. Сдвиг колонок вправо

<div>
 <div>
  <div>3 колонки</div>
  <div>5 колонок</div>
  <div>2 колонки</div>
 </div>
</div>

Заметьте, что сдвиг это не дополнительная колонка как при использовании offset, так что суммировать все значения не нужно. Ещё надо следить за тем, чтобы колонки не накладывались друг на друга.

Вложенные колонки

При вёрстке сложных макетов двенадцати колонок может не хватить, к тому же в одной колонке могут встречаться ещё дополнительные. Так что нам потребуются вложения одних колонок в другие. Делается это похожим образом (пример 5).

Пример 5. Вложенные колонки

<div>
 <div>
  <div>Заголовок</div>
  <div>
   <div>
    <div>Колонка 1</div>
    <div>Колонка 1-1</div>
    <div>Колонка 1-2</div>
   </div>
  </div>
  <div>Колонка 2</div>
 </div>
</div>

Чтобы создать вложенные колонки опять добавляем <div> с классом row, который содержит желаемую структуру вложенных колонок. Таким образом можно сверстать какие угодно сложные макеты.

Заметьте, что заголовок заполняет всю ширину макета, потому что он занимает все 12 колонок. Дополнительный контейнер row для подобных вещей вводить не обязательно, перенос остальных колонок на другую строку произойдет автоматически (рис. 4).

Рис. 4. Вложенные колонки

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

Делаем сами: адаптивный сайт

Вре­мя для ново­го про­ек­та! Сего­дня мы сде­ла­ем осно­ву для адап­тив­но­го сай­та. В резуль­та­те полу­чит­ся веб-страница с коти­ка­ми, а в сле­ду­ю­щий раз сде­ла­ем вашу адап­тив­ную лич­ную стра­ни­цу на HTML. Но пока — котики. 

Адап­тив­ный сайт — это такой сайт, кото­рый под­стра­и­ва­ет­ся под раз­мер экра­на и хоро­шо выгля­дит как на боль­шом ком­пью­те­ре, так и на малень­ком телефоне.

В нача­ле двух­ты­сяч­ных сай­ты были неадап­тив­ны­ми: они были свёр­ста­ны под боль­шие экра­ны, и если бы вы сей­час попро­бо­ва­ли их открыть на мобиль­ни­ке, вы бы уди­ви­лись, как там всё неудоб­но. Текст мел­кий, стро­ки широ­кие, в интер­фейс нуж­но «зумить­ся». Это не адаптивность.

Если бы вы откры­ли Яндекс в 1999 году с мобил­ки, при­шлось бы зумиться 

Вме­сте с появ­ле­ни­ем Айфо­нов появи­лась идея адап­ти­ро­вать сай­ты под узкие экра­ны мобиль­ни­ков. Текст дол­жен читать­ся, кар­тин­ки долж­ны поме­щать­ся, а что­бы поль­зо­вать­ся сай­том, не нуж­но нику­да зумиться.

То ли дело сей­час: стра­ни­ца Яндек­са выгля­дит по-разному на ком­пью­те­ре и мобиль­ном, что­бы было удобно 

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

Вы може­те вруч­ную про­пи­сать пра­ви­ла адап­тив­но­сти для сво­е­го сай­та. Поищи­те в Яндек­се css media-queries, там нет ниче­го слож­но­го, про­сто мутор­но: таких пра­вил нуж­ны десятки.

Дру­гой спо­соб — вос­поль­зо­вать­ся гото­вым набо­ром инстру­мен­тов для созда­ния адап­тив­ных сай­тов. Их мно­го раз­ных, но мы в этой ста­тье вос­поль­зу­ем­ся фрейм­вор­ком Bootstrap. О фрейм­вор­ках мы недав­но писа­ли: в нашем слу­чае это будет как бы фун­да­мент наше­го сайта. 

Цель это­го тек­ста — дать началь­ные зна­ния о том, как мож­но про­сто свер­стать любой адап­тив­ный сайт. Мы пони­ма­ем, что полу­чит­ся про­стой сайт, но все­му осталь­но­му мож­но научить­ся, если вы пони­ма­е­те осно­вы. Поз­же вы смо­же­те свер­стать более слож­ные сай­ты, если эти осно­вы вам понятны. 

Что такое Bootstrap

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

Самое полез­ное для нас сей­час — адап­тив­ная мно­го­ко­ло­ноч­ная вёрст­ка Бут­стра­па. Что она нам даёт: 

• Мож­но кра­си­во свер­стать сайт, что­бы сле­ва было меню, по цен­тру основ­ная колон­ка, спра­ва ещё поле для рекла­мы. Или сде­лать сайт из трёх, четы­рёх, шести коло­нок — как Pinterest. 
• Мож­но научить колон­ки сай­та скры­вать­ся или менять раз­мер в зави­си­мо­сти от раз­ме­ра экра­на. Напри­мер, на боль­шом экране выво­дить боко­вые колон­ки, а на малень­ком — нет. 
• Мож­но не осо­бо думать о шриф­тах, раз­ме­рах и отсту­пах: даже стан­дарт­ная настрой­ка Бут­стра­па уже рабо­та­ет доволь­но неплохо. 
• Не нуж­но думать, как всё это будет вести себя на мобиль­ных устрой­ствах, — всё адап­ти­ру­ет­ся само.

Как его подключить к сайту

Что­бы исполь­зо­вать Бут­страп на стра­ни­це, нуж­но напи­сать такую коман­ду, её реко­мен­ду­ет исполь­зо­вать офи­ци­аль­ный сайт движка:

<link rel=»stylesheet» href=»https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css» integrity=»sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T» crossorigin=»anonymous»>

Эта коман­да загру­жа­ет базо­вую вер­сию Бут­стра­па со внеш­не­го сер­ве­ра, где этот код офи­ци­аль­но хра­нит­ся. Мож­но, конеч­но, ска­чать соб­ствен­ную вер­сию Бут­стра­па и посе­лить на свой сайт, но поль­зо­вать­ся внеш­ним сай­том в нашем слу­чае удоб­нее. Коман­ду нуж­но вста­вить в раз­де­ле <head>, напри­мер, после мета-свойств. Общий код шаб­ло­на стра­ни­цы будет выгля­деть так:

<!DOCTYPE html>
<html>
<!-- служебная часть -->

<head>
  <!-- заголовок страницы -->
  <title>Адаптивная вёрстка на Бутстрапе</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- загружаем Бутстрап -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style type="text/css">
  </style>
  <!-- закрываем служебную часть страницы -->
</head>

<body>
  <!-- тут будет наша страница -->
</body>
<!-- конец всей страницы -->

</html>

Сетка и колонки

Бут­страп для себя делит экран на 12 коло­нок, неза­ви­си­мо от раз­ме­ра экра­на. Даже малень­кий экран ста­ро­го теле­фо­на Бут­страп разо­бьёт на 12 коло­нок и будет ими управ­лять. На этом хол­сте вы може­те созда­вать бло­ки шири­ной с какое-то коли­че­ство коло­нок. Напри­мер, что­бы напи­сать текст на поло­ви­ну шири­ны экра­на, нуж­но создать блок шири­ной 6 колонок.

Бло­ки живут не сами по себе, а как бы в таб­ли­цах. Вы гово­ри­те Бут­стра­пу: «Создай мне кон­тей­нер для бло­ка, в кон­тей­не­ре — стро­ку, внут­ри стро­ки — колон­ку, а внутрь колон­ки — поло­жи этот текст». Сей­час это выгля­дит стран­но, но поз­же вы привыкнете.

Стро­ка запол­ня­ет­ся ячей­ка­ми сле­ва напра­во. Когда кон­ча­ет­ся стро­ка, мож­но создать новую стро­ку и сно­ва запол­нить её ячей­ка­ми раз­ной шири­ны. Шири­на яче­ек выра­жа­ет­ся в колон­ках. Ячей­ка шири­ной на весь экран будет иметь шири­ну 12 коло­нок, на пол-экрана — 6 коло­нок. Что­бы раз­бить экран на три части по гори­зон­та­ли, нуж­но 3 ячей­ки шири­ной по 4 колон­ки. Что­бы сде­лать сет­ку, как у обыч­но­го трёх­ко­ло­ноч­но­го сай­та, попро­буй­те три ячей­ки: 2 колон­ки, 8 коло­нок, 2 колонки. 

Мож­но ска­зать Бут­стра­пу: «Когда экран малень­кий, эту колон­ку выво­ди на всю шири­ну, а ту вооб­ще прячь». Напри­мер, у нас в левой колон­ке было меню сай­та, в цен­траль­ной — основ­ной текст, а в пра­вой — вся­кие вспо­мо­га­тель­ные ссыл­ки. Тогда гово­рим левой колон­ке на мобил­ке выве­стись на всю шири­ну, основ­ной колон­ке — тоже на всю шири­ну, а пра­вой — скрыть­ся. Полу­чит­ся мобиль­ная вер­сия сайта.

И так мож­но дол­го кура­жить­ся. Если инте­рес­но, про­чи­тай­те доку­мен­та­цию по сет­кам Бут­стра­па — там всё понят­но по кар­тин­кам. 

Заголовок

Нач­нём с про­сто­го. Пер­вое, что нам нуж­но, — заго­ло­вок всей стра­ни­цы. Мы его сде­ла­ем отдель­ным бло­ком, что­бы ниче­го ему не меша­ло. Весь код раз­ме­стим внут­ри раз­де­ла <body>:

<div >     <div>

      <h3>Адаптивная вёрстка</h3>

    </div> </div>

Помни­те, выше мы писа­ли про вло­жен­ность? Вот она пошла, родимая: 

Пер­вый блок — «container» — гово­рит Бут­стра­пу, что здесь сей­час будет про­ис­хо­дить вёрст­ка сай­та. Кон­тей­не­ров на сай­те может быть сколь­ко угод­но, они будут сто­ять один под другим. 

Вто­рой блок — «row» — озна­ча­ет, что нача­лась стро­ка из 12 коло­нок. В кон­тей­нер нуж­но обя­за­тель­но вло­жить такой row, мож­но несколь­ко. Пред­ставь­те, что это стро­ка таблицы. 

Тре­тий блок отве­ча­ет за ячей­ки в стро­ке. Сей­час мы ска­за­ли бра­у­зе­ру, что неза­ви­си­мо от раз­ме­ра экра­на заго­лов­ку нуж­но выде­лить 12 яче­ек. При этом заго­ло­вок не рас­тя­нет­ся на всю шири­ну — он зай­мёт столь­ко места, сколь­ко бы занял при обыч­ной вёрстке.

Добавляем котиков

Мы доба­вим в ста­тью изоб­ра­же­ния коти­ков и посмот­рим, как дви­жок сам будет ими управ­лять в зави­си­мо­сти от раз­ме­ра экрана.

Сна­ча­ла код, кото­рый мы поме­стим тоже в новый контейнер:

<div>
  <div>
    <div>
      <img src="http://thecode.local/wp-content/uploads/2019/06/cat1.jpg">
    </div>
    <div>
      <img src="http://thecode.local/wp-content/uploads/2019/06/cat2.jpg">
    </div>
    <div>
      <img src="http://thecode.local/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg">
    </div>
  </div>
</div>

Если мы вста­вим это в наш шаб­лон стра­ни­цы, вме­сте с пер­вой частью кода, то уви­дим, что кар­тин­ки рас­полз­лись и зани­ма­ют слиш­ком мно­го места. Дело в том, что для бра­у­зе­ра раз­мер кар­ти­нок сей­час важ­нее, чем раз­ме­ры сет­ки Бут­стра­па — коти­ки как бы раз­ры­ва­ют нашу стра­ни­цу. Нуж­но это исправить:

Что­бы коти­ки ува­жа­ли шири­ну яче­ек, в кото­рые их засо­вы­ва­ют, про­пи­шем в CSS-стилях спе­ци­аль­ную коман­ду для тега <img>. Коман­да долж­на ска­зать, что­бы шири­на кар­тин­ки была не боль­ше, чем мак­си­маль­ный раз­мер бло­ка, кото­рый под неё выделили:

img{       max-width: 100%;    } 

Этот код нуж­но вста­вить в нача­ло стра­ни­цы меж­ду тега­ми <style> и </style>.

Теперь всё нор­маль­но: кар­тин­ка зани­ма­ет мак­си­маль­ную шири­ну, кото­рую ей даёт занять сет­ка Бут­стра­па. Давай­те посмот­рим, что про­изой­дёт при изме­не­нии раз­ме­ров браузера:

Настраиваем размеры картинок

Что­бы на раз­ных экра­нах кар­тин­ки выгля­де­ли хоро­шо, давай­те сде­ла­ем так, что­бы на сред­них экра­нах все коты были одно­го раз­ме­ра, а на малень­ких — выстра­и­ва­лись одни под дру­ги­ми. Для это­го изме­ним наш про­шлый блок таким образом:

</div>
<div>
  <div>
    <img src="http://thecode.local/wp-content/uploads/2019/06/cat1.jpg">
  </div>
  <div>
    <img src="http://thecode.local/wp-content/uploads/2019/06/cat2.jpg">
  </div>
  <div>
    <img src="http://thecode.local/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg">
  </div>
</div>

Мы для каж­дой кар­тин­ки доба­ви­ли опи­са­ние раз­ме­ров бло­ка для каж­до­го раз­ме­ра экра­на и раз­бе­рём его на при­ме­ре пер­вой кар­тин­ки. Теперь, если экран очень малень­кий (col) или про­сто малень­кий (col-sm), то пер­вый блок с коти­ком зай­мёт все 12 яче­ек, то есть всю шири­ну. Если экран сред­не­го раз­ме­ра (col-md) — то 4 ячей­ки, а если боль­шой (col-lg) или очень боль­шой (col-xl) — то пусть кот зани­ма­ет по 2 ячейки.

Для вто­рой кар­тин­ки дей­ству­ют те же самые пра­ви­ла, но раз­мер кота на боль­ших и очень боль­ших экра­нах дру­гой — 8 яче­ек. Тре­тья кар­тин­ка настра­и­ва­ет­ся точ­но так же, как и пер­вая. Обра­ти­те вни­ма­ние: что­бы на сред­них экра­нах полу­чить оди­на­ко­вый раз­мер кар­ти­нок, мы в опи­са­ние каж­дой из них доба­ви­ли одну и ту же коман­ду col-md-4, кото­рая каж­до­му коту даёт 4 колон­ки, что­бы все были одно­го размера. 

Вот что полу­чи­лось в ито­ге — мы никак не про­грам­ми­ро­ва­ли все вычис­ле­ния раз­ме­ра экра­на, под­гон­ку под них изоб­ра­же­ний, не запра­ши­ва­ли посто­ян­но, поме­нял­ся ли раз­мер — за нас всё делал Бут­страп. Мы про­сто ска­за­ли ему, како­го раз­ме­ра хотим видеть каж­дый блок, и всё — даль­ше рабо­та­ла магия фреймворка!

Полный код страницы

<!DOCTYPE html>
<html>
<!-- служебная часть -->

<head>
  <!-- заголовок страницы -->
  <title>Адаптивная вёрстка на Бутстрапе</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->
  <style type="text/css">
    img {
      max-width: 100%;
    }
  </style>
  <!-- закрываем служебную часть страницы -->
</head>

<body>
  <div>
    <div>
      <div>
        <h2>Адаптивная вёрстка</h2>
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        <img src="http://thecode.local/wp-content/uploads/2019/06/cat1.jpg">
      </div>
      <div>
        <img src="http://thecode.local/wp-content/uploads/2019/06/cat2.jpg">
      </div>
      <div>
        <img src="http://thecode.local/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg">
      </div>
    </div>
  </div>
</body>
<!-- конец всей страницы -->

</html>

Что дальше

Это лишь самые про­стые вещи, кото­рые мож­но делать на Бут­стра­пе. Если вам понра­ви­лось, как стра­ни­ца реа­ги­ру­ет на изме­не­ния экра­на, — зай­ди­те на getbootstrap.ru и почи­тай­те осталь­ные воз­мож­но­сти фрейм­вор­ка. В дру­гих ста­тьях мы ещё вер­нём­ся к это­му движ­ку и рас­ска­жем о его дру­гих возможностях.

Примеры сеток начальной загрузки

Ниже мы собрали несколько примеров базовых макетов сетки Bootstrap.

Три равных столбца

.col-sm-4

.col-sm-4

.col-sm-4

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

Пример

Попробуй сам »

Три неравных колонны

.col-sm-3

.col-sm-6

.col-sm-3

В следующем примере показано, как получить три столбца различной ширины, начиная с
планшеты и масштабирование до больших компьютеров:

Пример

Попробуй сам »

Две неравные колонны

В следующем примере показано, как получить два столбца разной ширины, начиная с
планшеты и масштабирование до больших компьютеров:

Пример

Попробуй сам »

Без желобов

Используйте .row-no-gutters класс для удаления желобов из строки и ее столбцов:

Пример

Попробуй сам »

Две колонки с двумя вложенными колонками

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

Пример

Попробуй сам »

Смешанный: мобильный и настольный

Сетка Bootstrap имеет четыре класса: xs (телефоны), sm (планшеты), md (рабочие столы) и lg (большие рабочие столы).
Классы можно комбинировать для создания более динамичных и гибких макетов.

Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для xs и sm, вам нужно только указать xs.

Пример

.col-xs-9 .col-md-7
.col-xs-3 .col-md-5

Попробуй сам »

Совет: Помните, что сумма столбцов сетки должна составлять двенадцать для
строка. Более того, столбцы будут складываться независимо от области просмотра.

Смешанное: мобильный, планшетный и настольный

Пример

.col-xs-7 .col-sm-6 .col-lg-8
.col-xs-5 .col-sm-6 .col-lg-4

Попробуй сам »

Очистить поплавки

Очистить числа с плавающей запятой (с классом .clearfix ) в определенных точках останова, чтобы предотвратить странное обертывание с неравномерным
содержание:

Пример