Зачем еще нужен блок с классом row в bootstrap?
Посмотрел в devtools и увидел, что элемент с классом row имеет margin-left: -15px; margin-right: -15px; , которые позволяют компенсировать padding-left: 15px; у левого элемента и padding-right: 15px; у правого элемента, которые имеют класс, например, col-md-4 : 
В данном примере в container лежит блок row , в котором ВСЕ ТРИ параграфа плавающие. Чтобы блок row не «схлопнулся», у него создан псевдоэлемент:
.row:after, .row:before
- Зачем у каждого псевдоэлемента задано display: table ?Зачем еще нужен блок с классом row ?
- Зачем блоку с классом container заданы псевдоэлементы before и after ?
Отслеживать
653 5 5 серебряных знаков 19 19 бронзовых знаков
Система сеток Bootstrap 4
Система сеток позволяют создавать продвинутые макеты с использованием рядов и колонок. Сетка Bootstrap может содержать до 12 колонок, и вы можете указать, как эти колонки будут масштабироваться для разных размеров области просмотра.
Вот пример сетки Bootstrap.
Числа в конце каждого имени класса означают количество занимаемых колонок. Так, .col-sm-1 занимает одну колонку, а .col-sm-8 — восемь. sm (от слова small — маленький) означает, что колонка применяется к небольшим устройствам и всему выше. Вы также можете использовать md (от medium — средний), lg (large — большой) и xl (extra large — очень большой) для средних, больших и очень больших размеров.
Для сверхмалых устройств средняя часть в имени опускается. Например, .col-8 занимает восемь колонок на очень маленьких устройствах и выше (другими словами, на всех устройствах).
Размещение по горизонтали
В следующем примере используется та же самая разметка, но в этот раз мы используем md для «средних». Это означает, что если область просмотра меньше «среднего» (то есть меньше 768 пикселей), то ячейки в сетке будут располагаться друг под другом, а каждая ячейка будет занимать всю ширину.
Если вы просматриваете пример на широком экране, то пример может не отличаться от предыдущего. Однако, если вы уменьшите размер своего браузера, ячейки в конечном итоге разместятся друг под другом (предыдущий пример останется без изменений).
Размеры сетки
В следующей таблице показано, как различные параметры сетки работают с разными размерами области просмотра.
| Сверхмалая | Малая ≥576px |
Средняя ≥768px |
Большая ≥992px |
Сверхбольшая ≥1200px |
|
|---|---|---|---|---|---|
| Максимальная ширина контейнера | Нет (auto) | 540px | 720px | 960px | 1140px |
| Префикс класса | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| Число колонок | 12 | ||||
| Межколоночный интервал | 30px (по 15px с каждой стороны колонки) | ||||
| Вложенность | Да | ||||
| Порядок колонок | Да | ||||
Обратите внимание, что Bootstrap 4 теперь использует пятиуровневую систему сетки (в отличие от четырёхуровневой в Bootstrap 3).
Что надо знать про сетки
Контейнеры
Сетки должны размещаться в контейнере (с помощью класса .container или .container-fluid ) для правильных отступов и выравнивания.
Ряды и колонки
Ряды содержат один или несколько колонок, в колонах хранится содержимое. Только колонки могут быть непосредственными потомками рядов.
padding
Колонки содержат padding , однако для первой и последней колонок padding компенсируется отрицательным margin для ряда. Вот почему вышеприведённые примеры содержат изъян — содержимое внутри сетки выравнивается с содержимым вне сетки.
Более 12 колонок на строку?
Если в ряду размещается более 12 колонок, то они переносятся на новую строку, при этом колонки переносятся группой. Например, если ряд содержит col-md-10 и col-md-3 , то весь col-md-3 будет перенесён на новую строку.
Менее 12 столбцов на строку?
Вам не нужно задействовать все 12 столбцов, можете использовать любое количество колонок, вплоть до 12. К примеру, у вас может быть ряд, в которой общее число колонок равно трём.
Классы сетки
Классы сетки применяются к устройствам с шириной экрана, больше или равной размерам точек останова, и переопределяют классы сетки, предназначенных для небольших устройств. Поэтому использование любого класса .col-sm- * повлияет не только на маленькие области просмотра, но и на средние, большие и очень большие (кроме случаев, когда также присутствует col-md-* , col-lg-* , col-xl-* ).
Несколько классов
Вы можете включить несколько классов размера для данного элемента. Например, вы можете использовать class=»col-sm-10 col-md-6″ , тем самым указать 10 колонок для маленьких экранов и 6 колонок для средних и больших экранов.
Автор: Йен Диксон
Последнее изменение: 21.10.2023
- Что такое Bootstrap?
- Начало работы с Bootstrap 4
- Контейнеры Bootstrap 4
- Система сеток Bootstrap 4
- Типографика в Bootstrap 4
- Таблицы в Bootstrap 4
- Формы в Bootstrap 4
- Пользовательские формы
- Кнопки в Bootstrap 4
- Изображения в Bootstrap 4
- Выпадающее меню
- Группа кнопок
- Группа ввода
- Сворачивание содержимого
- Навигация
- Панель навигации
- Хлебные крошки
- Нумерация страниц
- Значки
- Джамботрон
- Уведомления
- Модальное диалоговое окно
- Шкала прогресса
- Медиа-объекты
- Группа списков
- Карточки
- Адаптивное встраивание
- Карусель
- Всплывающие подсказки
- Информеры
- Отслеживание прокрутки
Div class row что это
Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core
Последнее обновление: 31.10.2015
При использовании Bootstrap очень удобно позиционировать интерфейс в виде таблицы или сетки, используя строки и столбцы. Так, если мы посмотрим в браузере на стандартное представление Index.cshtml, которое идет по умолчанию, то мы увидим подобное позиционирование: элементы под заголовком расположены как бы в три столбца и составляют одну строку:
Если мы откроем код представления, то мы можем увидеть использование классов bootstrap:
Getting started
.
Get more libraries
.
Web Hosting
.
Класс row задает расположение отдельных блоков в виде одной строки. Строка в Bootstrap может иметь до 12 столбцов. Строк может быть сколько угодно, но в данном случае у нас одна строка.
Для создания отдельного столбца строки используется класс col-md-4 . col , как ясно из названия, обозначает столбец.
Дальше идет md — идентификатор устройства. Как мы увидели в прошлой теме, bootstrap делит все устройства условно на четыре группы в зависимости от ширины экрана. md, в частности, соотносится со средними устройствами (то есть которые имеют ширину от 992 пикселя и выше). А число 4 указывает, сколько условных единиц в строке будет занимать данный блок. Таким образом, получается, что класс col-md-4 означает, что данный блок будет занимать 4 условных единицы из 12 в строке, то есть треть ширины экрана устройства с экраном шириной от 992 пикселей.
И поскольку у нас есть четыре группы, то для каждой группы имеются свои классы. Например, для очень маленьких устройств с экраном меньше 768 пикселей (то есть мобильных телефонов), подобный класс мог бы быть таким col-xs-4 .
Все типы классов:
- col-xs-* : для устройств с шириной экрана меньше 768 пикселей
- col-sm-* : для устройств с шириной экрана от 768 пикселей и выше
- col-md-* : для устройств с шириной экрана от 992 пикселя и выше
- col-lg-* : для устройств с шириной экрана от 1200 пикселей и выше
Хотя даже на мобильных устройствах блок с классом col-md-4 будет выглядеть вполне неплохо, но мы можем установить сразу два класса, чтобы еще больше детализировать отображение на различных устройствах, например:
И хотя в представлении Index.cshtml по умолчанию все три блока имеют относительную ширину в 4 единицы, составляя в целом 12 единиц, мы можем задать любую другую ширину, позиционируя их по собственному усмотрению. Например:
Отступы
Специальные классы col-md(sm|lg)-offset-* позволяют задать смещение относительно левого блока или начала строки в условных единицах. Например, у нас есть такая строка:
Левый блок
.
Правый блок
.
Класс col-md-offset-4 будет смещать правый блок на 4 условных единицы вправо:
Некоторые примеры по использованию смещения:
Порядок столбцов
С помощью классов col-md(sm|lg)-push-* и col-md(sm|lg)-pull-* мы можем переопределить порядок блоков в строке. Например, класс col-md-push-4 сдвигает блок на четыре единицы вправо от текущего положения. И наоборот, класс col-md-pull-4 сдвигает блок влево от текущей позиции. Так, предыдущий пример со смещением мы могли бы переписать следующим образом:
Левый блок
.
Правый блок
.
И у нас был бы тот же эффект. Но мы можем также полностью переупорядочить порядок следования блоков:
Левый блок
.
Правый блок
.
Теперь правый блок сместится влево на четыре единицы, а левый блок — вправо на 8 единиц:
Таким образом, используя класс row и классы столбцов, мы можем задать общее расположение элементов, а адаптивность bootstrap гарантирует, что на любых устройствах подобная сетка элементов будет выглядеть вполне нормально. Теперь рассмотрим некоторые компоненты, которые предлагает нам Bootstrap.
Сетка в Bootstrap 4. Подробное руководство
Понимание сеток в Bootstrap — это самый важный момент работы с этим замечательным фреймворком, понимая сетки, вы сможете делать на нем без препятствий буквально всё, что захотите. Советую почитать статьи Узнаем Bootstrap 4 за 30 минут, создавая лендинг и Самые полезные хитрости в Bootstrap
��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️
Что такое система сеток в Bootstrap?
Система сеток в Bootstrap используется для создания раскладок, а в частности для создания их адаптивности. Понимание того, как это работает — является жизненно важным моментом при работе с Bootstrap. Сетка сделана из группирования строк и колонок внутри одного или нескольких контейнеров.
Сетки на Bootstrap могут использоваться отдельно, без Bootstrap JavaScript и других CSS компонентов. Вам надо только скачать и сослаться на «bootstrap-grid.css» , который включает в себя flexbox классы и классы для сетки. Вообще, более подробно для этого есть отдельная документация на официальном сайте.
Вот самый простой пример применения сетки:
container">
row">
col">I'm your content inside the grid!
Этот код выдаст нам одну большую колонку на всю ширину вьюпорта.
А вот уже две колонки:
container">
row">
col">Left column
col">Right column
И вот на три колонки:
container">
row">
col">Left column
col">Center column
col">Right column
Обратите внимание, что светлые серые линии границ вокруг колонок в примере были добавлены, чтобы вы визуально могли выделить каждую колонку. Вот рабочие шаблоны на Codeply.
Простые концепты сетки очень быстро можно понять, но вы уже наверное начинаете удивляться, почему вся эта HTML разметка так необходима. У вас уже возможно есть несколько вопросов, таких как: Зачем мне нужен контейнер? Могу ли я сделать один контейнер шире, чем другие?
Я коснусь этих вопросов немного позже. Но сначала, я хочу сделать шаг назад и объяснить кое-что важное, по поводу использования сеток.
Поверьте мне. Понимание “Правил сетки” сэкономит вам кучу времени и нервов. Прочитайте их очень внимательно.
Правила сетки:
Колонки должны быть прямыми потомками Row
Row используются только для того, чтобы включать в себя колонки и не для ничего больше.
Row должны быть помещены внутри контейнера
Эти правила ОЧЕНЬ ВАЖНЫ. Строки и колонки всегда работают вместе и вам надо смотреть за тем, что один не оставался без другого.
Ждите косяка, если вы не будете соблюдать эти три простые правила. Я ответил на бесчисленное количество вопросов на Stack Overflow, просто применяя эти правила. По началу, это может быть довольно сложным, но всё последующее реально станет доступным для понимания, после того, как вы поймете то, как работает сетка.
Как использовать сетку Bootstrap. Правильный подход.
Контейнер
В простом примере до этого, вы возможно подметили, что я использовал .container , чтобы обернуть .row . Контейнер это вообще ключевой элемент сетки в Bootstrap.
container">
row">
col">I'm content inside the grid!
Контейнер может использоваться для хранения любых элементов и самого контента. Он используется не только для строк и колонок сетки. Для примера, вот идеальная и правильная разметка Bootstrap:
My Heading
Не игнорируйте контейнер
С первого взгляда, контейнер может показаться пустяковым и не сильно уж нужным, но он очень важен для контроля ширины шаблона. Контейнер также используется для равномерного выравнивания граней шаблона внутри вьюпорта браузера. Контейнер используется, чтобы противодействовать отрицательным внешним отступам row, о чем я расскажу немного позже.
У Bootstrap 4 есть 2 типа контейнера. В моих примерах я использовал .container , но также есть и полноэкранный .container-fluid . Вы можете использовать любой из них:
1 — Контейнер с фиксированной шириной, для центровки контейнера по середине шаблона.
2 — Контейнер с шириной во весь экран.
.container масштабируется адаптивно по ширине экрана, так что в конце концов он может стать шириной на весь экран, как и .container-fluid , но на маленьких устройствах.
Помните, что контейнер может использоваться для любого контента, а не только строк и колонок сетки. Но! Если вы используете последние два элемента, то строки сетки должны быть размещены внутри контейнера. Посмотрите демо для контейнера.
Применяя сетку, более одной строки может быть помещено внутри контейнера. Вы можете иметь их сколько угодно в самом контейнере и вы также можете иметь сколько хотите контейнеров на странице. Все зависит от того, какой шаблон вы пытаетесь сверстать, но пока что не сильно заморачивайтесь по этому поводу.
У строк (rows) есть отрицательные левые/правые внешние отступы в -15px . Внутренний отступ контейнера в 15px используется для пресечения срабатывания отрицательных внешних отступов в строке контейнера. Это делается для равномерного выравнивания по граням в шаблоне. Если вы не поместите строку (row) в контейнер, то она будет выходить за пределы своего контейнера, вызывая нежелательные горизонтальные прокрутки.
Строки (Rows) и Колонки (Columns)
Сейчас, я бы хотел, чтобы .row в Bootstrap не были на самом деле именованы как “строки” (row). Название “строка”, зачастую запутывающее и скрывает настоящее предназначение .row .
Когда вы думаете о строке, вы возможно думаете о горизонтальной линии, что вполне ОК, НО, лучше думать о строке, как о родителе для колонок.
Думайте о строках, как о группе колонок (Columns)
Это потому, что колонки внутри .row не всегда располагаются горизонтально вдоль вьюпорта. Иногда нам надо, чтобы колонки в шаблоне были горизотальны, а иногда нам надо, чтобы они располагались вертикально. Концепция горизонтального vs. Вертикального шаблона является сущностью адаптивного дизайна. Единственным предназначением “строки”, является содержание одной или более “колонки”.
Не вставляйте контент прямо в “строку”!
Так делать нельзя:
No headings either! This is the wrong way!!
“колонки” и только колонки, размещаются внутри “строк”.
А контент размещается уже внутри “колонок”.
Так же очень важно упомянуть, что .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 ” колонки. Такие безразмерные колонки дают вам больше гибкости при разработке шаблонов.
А вы знали, что ширина колонки может изменяться в зависимости от ширины экрана?
Это называется адаптивным дизайном и я расскажу вам как это на самом деле работает.
Но все по порядку, мне нужно закончить рассказывать вам о колонках. Помните я говорил вам до этого, что можно использовать больше 12-ти колонок в строке?
Колонки в одной строке располагаются вдоль горизонтально, а затем встают вертикально вниз. Это вертикальное сталкивание или “обертывание”, происходит когда элементы колонок в одном ряду превышают количество двенадцати. Этот процесс известен как “враппинг колонок”
Колонки в одной строке переходят на следующую строку, через каждые 12 элементов:
Ширина колонки и “обертывание” может контролироваться, используя разные ряды адаптивной сетки. (a.k.a “Grid Breakpoints”)
Колонки могут менять позицию относительно потомков в том же ряду:
Колонки могут содержать других потомков Rows & Columns. Это называется вложением:
Колонки могут “расти” и “урезаться” по ширине. Это auto-layout колонки:
Как делать адаптивный дизайн с Bootstrap.
Ряды сетки, медиа запросы и брейкпоинты, ю-хууу!
Я еще не прекратил говорить о рядах и колонках, так как они звезды нашего шоу, когда речь заходит об адаптивном дизайне.
Всё из-за ширины.
В Bootstrap 4 есть 5 адаптивных рядов (ну или брейкпоинтов), которые вы возможно заметили в предыдущем примере. (ie; col-lg-4 , col-md ).
Адаптивные брейкпоинты, основаны на ширине экрана:
sm — ширина экрана ≥ 576px
md — ширина экрана ≥ 768px
lg — ширина экрана ≥ 992px
xl — ширина экрана ≥ 1200px
Почему я заключил ( xs ) в скобки, а не сделал как с другими брейкпоинтами? Так как xs это дефолтное прерывание, -xs инфикс, который использовался в Bootstrap 3, больше не используется в Bootstrap 4. Так что вместо col-xs-6 , просто col-6 .
Bootstrap использует медиа запросы из CSS, что установить адаптивные точки прерываний. Они дают вам возможность контролировать поведение колонок при разных размерах экрана.
Для примера: вот 2 колонки, каждая шириной 50%:
container">
row">
col-sm-6">Column 1
col-sm-6">Column 2
сol-sm-6 означает использование 6 колонок из 12, то есть 50% ширины на типичных маленьких размерах экранов. Которые больше или равны 768px:
На экранах меньше, чем 768px, 2 колонки станут шириной 100% и встанут вертикально:
Это происходит, потому что (xs) по дефолту или подразумевает брейкпоинт. Так как я не указывал дефолтную ширину колонки, 50% ширина была применена только на 768px и шире для sm брейкпоинта.
Mobile-first!
Так как (xs) это дефолтный брейкпоинт, то подразумевает col-12 . Следовательно:
Работает так же, как и:
xs (default) > переписывает sm > переписывает md > переписывает lg > переписывает xl
Или в обратном порядке… xl > переписывает lg > переписывает md > переписывает sm > переписывает (xs)
Следовательно, col-sm-6 реально означает 50% ширины на мелких и выше дисплеях. Для одинаковой ширины колонок на всех брейкпоинтах, просто выставите ширину для самого маленького ряда как хотите:
Для разной ширины колонки на разных уровнях, используйте подходящие брейкпоинты для перезаписи мелких прерываний. Для примера, 3 колоночная ширина на sm и 4 колоночная ширина на md и выше:
Auto-layout колонки в Bootstrap 4 также работают адаптивно. Из-за их простоты, теперь я предпочитаю использовать их, а не классические элементы 12 колонок. Auto-layout колонки идеальны для любых сценариев шаблонов, где необходима равная ширина колонок. Но не забудьте, что 12-ти колоночные юниты могут быть смешаны при необходимости.
Давайте посмотрим на auto-layout сетку.
Итак, 3 равные колонки. ‘ col ’ остаются горизонтальным на всей широте и не встают вертикально, так как xs прерывание дефолтно:
container">
row">
col">1
col">2
col">3
3 равные колонки, адаптивные. В этом примере, ‘ col ’ остаются горизонтальным до прерывания sm на 576px, а затем они становятся вертикальными. Помните, что вы можете заменять sm на каком угодно брейкпоинте( md , lg , xl ), если нужно:
container">
row">
col-sm">1
col-sm">2
col-sm">3
2 колонки, левый сайдбар. А вот пример комбинирования классически определнной ширины колонок с колонками auto-layout. Правая колонка будет автоматически расти, чтобы занять ширину, так как мы используем auto-layout .col . Сайдбар будет 16.6% ширины на больших экранах и затем встанет над контентом при sm брейкпоинте с 576px:
container">
row">
col-sm-2">sidebar
col">main content
3 колонки, правый сайдбар (сокращение, чтобы уместиться): В этом примере есть левый сайдбар, центральная область контента и правый сайдбар, который сокращается по ширине, чтобы подстроиться под свой контент.
container">
row">
col-sm-2">left
col">main content
col-auto">right
Ключевые моменты адаптивного дизайна используемые в сетке Bootstrap 4:
Колонки встанут вертикально и станут шириной во весь экран на устройствах с маленьким разрешением, если вы не используете col-* класс в HTML разметке. Используйте col-* для предотвращения такого вертикального выстраивания.
Классы сеток поменьше, также применяются на больших экранах, пока не перепишутся конкретно под ширину большего экрана. Следовательно, в сущности тоже самое, что и . Следовательно, вам только надо использовать класс для самых маленьких разрешений, которые вам нужно поддерживать.
Строки (row) —имеют display: flex и следовательно колонки имеют равную высоту в одном и том же ряду. Используйте auto-margin или Flexbox align-item и justify-content для горизонтального или вертикального выравнивания.