• Гость
For-Web
  • Главная
  • Вебмастеру
    • Блог
    • SQL
    • PHP
    • JavaScript
    • CSS
    • HTML
    • Литература
  • Скрипты, Soft, APP
    • Bitcoin
    • Соц сети
    • Реклама, Буксы
    • Интернет магагзин
    • Браузерные игры
    • Скрипты хостинга
    • Мобильные приложения
    • Программы
  • Data Life Eingine
    • Модули
    • Хаки
    • DLE шаблоны
  • Bootstrap
    • Шаблоны
    • Плагины
    • Сниппеты
    • Пособие Bootstrap
  • Дизайн и Графика
    • PSD макеты
    • Mocups Free
    • Иконки, Кнопки
    • Шрифты,Текст
    • Текстуры, Фон
    • Анимация
    • Формы
    • Палитра
    • Галерея
    • Раскладка
    • Модальное окно
    • Элементы загрузки
    • Меню и навигация
    • Таблицы
    • Украшения для сайта
    • Фотошоп
  • Шаблоны сайтов
    • WAP шаблоны
    • HTML 5 шаблоны
    • Админка
    • Автомобили
    • Аниме
    • Блоги
    • Бизнес и Финансы
    • Игровые
    • Женские
    • Заглушки
    • Кинопорталы
    • Кулинарные
    • Лендинг
    • Мобильные
    • Музыкальные
    • Новостные
    • ПО, IT
    • Портфолио
    • Природа
    • Строительство
    • Спорт
    • Хостинг
    • Адалт
    • Страницы 404
  • Инфо
    • О проекте
    • Обратная связь
    • Уроки
    • Статистика
    • Privacy Policy
главная » Учебник Bootstrap » Система сеток Bootstrap 4

Система сеток Bootstrap 4



Grid System (Грид-система) или система сеток Bootstrap 4 это одно из важных понятий в Bootstrap, Система сетки позволяет распределить  компоненты на пользовательском  интерфейсе. а так же как ваш вебсайт будет отображаться на различных устройствах. о Грид-система (Grid System) у Bootstrap имеет много строк, но они имеют 12 фиксированных столбцов. В ячейках (cell) вы можете расположить компоненты интерфейса. Система сеток Bootstrap позволяет создавать продвинутые макеты с использованием рядов и колонок.
Bootstrap 4 имеет 5 разных Css-class для отображения на различных экранах:

Css Class PrefixОписание
.col-Для очень маленьких устройств (Extra Small), с шириной менее 576px
.col-sm-Для маленьких устройств (Small), с шириной более или равной 567px.
.col-md-Для средних устройств (Medium), с шириной более или равной 768px
.col-lg-Для больших устройств (Large), с шириной более или равной 992px
.col-xl-Для очень больших устройств (Extra Large), с шириной более или равной 1200px.

Простой пример сетки Bootstrap 4:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
  crossorigin="anonymous">
<!-- Стили (чтобы мы видели сетку) -->
<style>
.bs-example  div[class^="col"] {
  border: 1px solid white;
  background: #f5f5f5;
  text-align: center;
  padding-top: 8px;
  padding-bottom: 8px;
}
</style>

<div class="bs-example">
  <!-- Сетка Bootstrap -->
  <div class="row">
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
  </div>
  <div class="row">
    <div class="col-sm-2">.col-sm-2</div>
    <div class="col-sm-3">.col-sm-3</div>
    <div class="col-sm-7">.col-sm-7</div>
  </div>
  <div class="row">
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm-5">.col-sm-5</div>
    <div class="col-sm-7">.col-sm-7</div>
  </div>
  <div class="row">
    <div class="col-sm-6">.col-sm-6</div>
    <div class="col-sm-6">.col-sm-6</div>
  </div>
  <div class="row">
    <div class="col-sm-12">.col-sm-12</div>
  </div> 
</div>
Числа в конце каждого имени класса означают количество занимаемых колонок.
Так, .col-sm-1 занимает одну колонку, а .col-sm-8 — восемь.
sm (от слова small — маленький) означает, что колонка применяется к небольшим устройствам и всему выше. Вы также можете использовать
md (от medium — средний),
lg (large — большой) и
xl (extra large — очень большой) для средних, больших и очень больших размеров.
Для сверхмалых устройств средняя часть в имени опускается.
 Например, .col-8 занимает восемь колонок на очень маленьких устройствах и выше (другими словами, на всех устройствах).
{banner_google}

Класс col-sm-*

sm: это аббревиатура  "Small", которая имеет в виду устройства с маленькими экранами, с шириной экрана более или равной  567px. (Для устройств с шириной экрана менее 567px называется очень маленький (extra small)).
Теперь взглянем на конкретный пример:
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col-sm-3 bg-primary">
               <p>col-sm-3</p>
            </div>
            <div class ="col-sm-9 bg-success">
               <p>col-sm-9</p>
            </div>
         </div>
      </div>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>
Как ведёт себя сетка в браузере при масштабировании:
Если  ".container" (контейнер) имеет ширину  >= 567px, элементы  ".col-sm-*" будут расположены в ряд (row), и заполнят (fill) ширину  .container.
Но если ширина  .container меньше  567px, элементы  ".col-sm-*" будут расположены на разных рядах, и все равно заполнят (fill) ширину  .container. Заключаем, что  567px имеет особенное значение элементов  ".col-sm-*":


Класс col-md-*

md: Это аббревиатура  "Medium", которая говорит о том, что устройство имеет среднюю ширину, более или равно  768px, это размер планшетов (Tablet).Давайте взглянем на пример:
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col-md-2 bg-primary">
              <p>col-md-2</p>
            </div>
            <div class ="col-md-3 bg-secondary">
               <p>col-md-3</p>
            </div>
            <div class ="col-md-7 bg-success">
               <p>col-md-7</p>
            </div>
         </div>
      </div>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>
То как отображается класс col-md в браузере:
Значение в 768px особенно для элементов  ".col-md-*". Это так называемая точка останова, при которой меняется отображение интерфейса.{banner_google}

Класс col-lg-*, col-xl-*

lg: Это аббревиатура  "Large", говорит об устройствах с шириной экрана более или равной  992px.
xl: Это аббревиатура"Extra Large", говорит об устройствах с шириной экрана более или равной1200px.Принцип работы  ".col-lg-*"& ".col-xl-*" похож на  ".col-sm-*", ".col-md-*".


Класс col-*

С устройствами с шириной менее  567px, называются очень маленькими устройствами (extra small).Взглянем на пример:
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col-2 bg-primary">
              <p>col-2</p>
            </div>
            <div class ="col-3 bg-secondary">
               <p>col-3</p>
            </div>
            <div class ="col-7 bg-success">
               <p>col-7</p>
            </div>
         </div>
      </div>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>
Пример в окне браузера;
Элементы  ".col-*" все еще расположены в ряд (row), несмотря на то, что вы уменьшили ширину  ".container". Но вы не можете сделать ширину ".container" менее  320px.

Сочетание col-sm-*,col-md-*, ..

Элемент (element) может использовать сочетание классов  col-*, col-sm-*, col-md-*... друг с другом. Ниже вы видите способ как в Bootstrap 4 применяются  эти классы.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col-md-2 col-sm-6 bg-primary">
              <p style="font-style:italic;">col-md-2</p>
              <p style="font-weight:bold;">col-sm-6</p>
            </div>
            <div class ="col-md-10 col-sm-6 bg-success">
               <p style="font-style:italic;">col-md-10</p>
               <p style="font-weight:bold;">col-sm-6</p>
            </div>
         </div>
      </div>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>



Сочетание col, col-sm, col-md, col-lg, col-xl

Примеры выше показывают Вам как использовать классы col-*, col-sm-*, col-md-*, col-lg-*, col-xl-* (определяя ширину). Пример ниже показывает способ использования классов  col, col-sm, col-md, col-lg, col-xl(не определяя ширину):
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col bg-primary">
              <p>col</p>
            </div>
            <div class ="col bg-secondary">
               <p>col</p>
            </div>
            <div class ="col bg-success">
               <p>col</p>
            </div>
         </div>
 
         <hr>
 
         <div class= "row">
            <div class ="col bg-primary">
              <p>col</p>
            </div>
            <div class ="col bg-secondary">
               <p>col</p>
            </div>
            <div class ="col-2 bg-success">
               <p>col-2</p>
            </div>
         </div>
      </div>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>


Сочетание col-auto, col-sm-auto, col-md-auto, col-lg-auto, col-xl-auto

Элементы(element) использующие класс  *-autoбудут иметь много ширин автоматически основываясь на длине его содержания. 
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <style>
         p  {
           font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div class= "container-fluid">
 
        <div class= "row">
           <div class ="col bg-primary">
             <p>col</p>
             Long content .... .... .. .. .. ...... .....
           </div>
           <div class ="col bg-secondary">
              <p>col</p>
              Short Content
           </div>
           <div class ="col-2 bg-success">
              <p>col-2</p>
           </div>
        </div>
 
        <hr>
 
        <div class= "row">
           <div class ="col-auto bg-primary">
             <p>col-auto</p>
             Long content .... .... .. .. .. ...... .....
           </div>
           <div class ="col-auto bg-secondary">
              <p>col-auto</p>
              Short Content
           </div>
           <div class ="col-2 bg-success">
              <p>col-2</p>
           </div>
        </div>
 
        <hr>
 
         <div class= "row">
            <div class ="col-auto bg-primary">
              <p>col-auto</p>
              Long content .... .... .. .. .. ...... ..... Long content .... .... .. .. .. ...... .....
            </div>
            <div class ="col-auto bg-secondary">
               <p>col-auto</p>
               Short Content
            </div>
            <div class ="col-2 bg-success">
               <p>col-2</p>
            </div>
         </div>
 
      </div>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
 
</html>



col-sm-auto

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <style>
         p  {
           font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div class= "container-fluid">
 
        <div class= "row">
           <div class ="col-sm bg-primary">
             <p>col-sm</p>
             Long content .... .... .. .. .. ...... .....
           </div>
           <div class ="col-sm bg-secondary">
              <p>col-sm</p>
              Short Content
           </div>
           <div class ="col-sm-2 bg-success">
              <p>col-sm-2</p>
           </div>
        </div>
 
        <hr>
 
        <div class= "row">
           <div class ="col-sm-auto bg-primary">
             <p>col-sm-auto</p>
             Long content .... .... .. .. .. ...... .....
           </div>
           <div class ="col-sm-auto bg-secondary">
              <p>col-sm-auto</p>
              Short Content
           </div>
           <div class ="col-sm-2 bg-success">
              <p>col-sm-2</p>
           </div>
        </div>
 
        <hr>
 
         <div class= "row">
            <div class ="col-sm-auto bg-primary">
              <p>col-sm-auto</p>
              Long content .... .... .. .. .. ...... ..... Long content .... .... .. .. .. ...... .....
            </div>
            <div class ="col-sm-auto bg-secondary">
               <p>col-sm-auto</p>
               Short Content
            </div>
            <div class ="col-sm-2 bg-success">
               <p>col-sm-2</p>
            </div>
         </div>
 
      </div>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
 
</html>


Как создать Gallery используя Grid систему


Например у вас есть элемент  ".row", и 2 подэлемента  ".col-**" с общим количеством столбцов более  12, что произойдет в этом случае?
  • Ответ: 2 подэлемента будут отображены на 2 разных строках.
<!-- 5 + 8 > 12 -->
<div class= "row">
   <div class ="col-5 bg-primary">
      <p>col-5</p>
   </div>
   <div class ="col-8 bg-secondary">
      <p>col-8</p>
   </div>
</div>


<div class= "container-fluid">
   <h4>(col-sm-*) 5 + 8 > 12</h4>
 
   <!-- (col-sm-*) 5 + 8 > 12 -->
   <div class= "row">
      <div class ="col-6 col-sm-5 bg-primary">
         <p>.col-6 <b>.col-sm-5</b></p>
      </div>
      <div class ="col-6 col-sm-8 bg-secondary">
         <p>.col-6 <b>.col-sm-8</b></p>
      </div>
   </div>
 
</div>



col-12, col-*-12

Например у вас есть элемент  ".row"и некоторые подэлементы, подэлемент имеет количество столбцов равное 12. Что произойдет?
  • Ответ: подэлемент с количеством столбцов 12 будет отображено на одной строке, он заполнит ширину строки.

<div class= "container-fluid">
   <h4>Element with 12 columns</h4>
     
   <div class= "row">
      <div class ="col-2 bg-primary">
         <p>.col-2</p>
      </div>
      <div class ="col-12 bg-secondary">
         <p>.col-12</p>
      </div>
      <div class ="col-5 bg-danger">
         <p>.col-5</p>
      </div>
   </div>
</div>

Gallery. Галерея с использованием сетки Bootstrap 4

Используя свойства  Grid выше, поможет вам создать красивую  Gallery(Галлерею), которая меняется на основании размера устройства.
<div class= "container-fluid">
   <h4>Gallery</h4>
 
   <div class= "row">
      <div class ="col-12 col-sm-6 col-md-4 bg-primary">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-secondary">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-danger">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-success">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-info">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-dark">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
   </div>
</div>

Более сложный пример использования  Grid для создания  Gallery.
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Grid</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <style>
         .height100 {
         height: 100%;
         }
      </style>
   </head>
   <body>
      <div class= "container-fluid">
         <h4>Complex Gallery</h4>
         <div class= "row d-inline-flex">
            <!-- Gallery Item 1 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal1.png"/>
                  </div>
                  <h2>Sheep</h2>
                  <p>Info..</p>
               </div>
            </div>
            <!-- Gallery Item 2 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal2.png"/>
                  </div>
                  <h2>Horse</h2>
               </div>
            </div>
            <!-- Gallery Item 3 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal3.png"/>
                  </div>
                  <h2>Duck</h2>
               </div>
            </div>
            <!-- Gallery Item 4 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal4.png"/>
                  </div>
                  <h2>Goat</h2>
               </div>
            </div>
            <!-- Gallery Item 5 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal5.png"/>
                  </div>
                  <h2>Chicken</h2>
               </div>
            </div>
            <!-- Gallery Item 6 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal6.png"/>
                  </div>
                  <h2>Cow</h2>
               </div>
            </div>
         </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>
В примере использованы  некоторые утилитарные классы Bootstrap. такие как: .d-flex, .flex-column .p-2

В Bootstrap 4, класс  w-100 делает элемент (element) с заполняемой шириной  .container (width = 100%), он делит элементы слева и справа на 2 разные строки (row). Но в основном все эти элементы имеют один родительский элемент ( .row)
<div class= "container-fluid">
   <div class= "row">
      <div class ="col bg-primary">
         col (1)
      </div>
      <div class ="col bg-secondary">
         col (2)
      </div>
       
      <div class ="w-100"></div>
       
      <div class ="col bg-success">
         col (3)
      </div>
      <div class ="col-3 bg-danger">
         col-3 (4)
      </div>
   </div>
</div>

Почему  Bootstrap создает классы  .w-100, почему не использует 2 класса  .row для получения тех же результатов?
1. С классом  .w-100 вы можете поменять элементы изображенные на 2 строках в 1 строку, и обратно. Например у вас есть 5 элементов (element) расположены в одном  .container. И вы хотите, чтобы если ширина была  .container < 567px,то они изображались на 2 строках. Если наоборот, то чтобы они изображались на одной строке.
<div class= "container-fluid">
   <div class= "row">
 
      <div class ="col bg-primary">
         <p>col (1)</p>
      </div>
      <div class ="col bg-secondary">
         <p>col (2)</p>
      </div>
 
      <!-- d-sm-none: display sm none -->
      <div class ="w-100 d-sm-none"></div>
 
      <div class ="col bg-success">
         <p>col (3)</p>
      </div>
      <div class ="col-3 bg-danger">
         <p>col-3 (4)</p>
      </div>
      <div class ="col bg-warning">
         <p>col (5)</p>
      </div>
   </div>
 
</div>

2. Вы можете поменять порядок элементов если они принадлежат одному  ".row". Вы не можете поменять порядок элементов, если они расположены на 2 разных  ".row".
<div class= "container-fluid">
 
   <div class= "row">
      <div class ="col order-sm-12 bg-primary">
         <p>col (1)</p>
         <p>order-sm-12</p>
      </div>
      <div class ="col order-sm-11 bg-secondary">
         <p>col (2)</p>
         <p>order-sm-11</p>
      </div>
 
      <!-- d-sm-none: display sm none -->
      <div class ="w-100 d-sm-none"></div>
 
      <div class ="col order-sm-2 bg-success">
         <p>col (3)</p>
         <p>order-sm-2</p>
      </div>
      <div class ="col-3 order-sm-3 bg-danger">
         <p>col-3 (4)</p>
         <p>order-sm-3</p>
      </div>
      <div class ="col  order-sm-1 bg-warning">
         <p>col (5)</p>
         <p>order-sm-1</p>
      </div>
   </div>
 
</div>

{banner_google}

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

В следующей таблице показано, как различные параметры сетки работают с разными размерами области просмотра. Обратите внимание, что Bootstrap 4 теперь использует пятиуровневую систему сетки(в отличие от четырёхуровневой в Bootstrap 3).

Обратите внимание, что 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 колонок для средних и больших экранов.

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

Система сеток Bootstrap 4

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

Реклама - на страницах сайта, а также на странице загрузки файлов - это вынужденная мера для поддержания проекта на плаву. Я не принуждаю Вас кликать по рекламе, если конечно она вас не заинтересовала.

Да и самое важное, все материалы носят ознакомительный характер, все файлы взяты из открытых источников, соответственно Вы их используете на свой страх и риск. За риски связанные с утечкой данных, хищение средств и прочее при использовании скриптов администрация сайта ответственность не несёт!



  • Комментарии
  • О статье
  • Похожие новости
У данной публикации нет комментариев.

admin

Автор

18-01-2020, 22:22

Дата

Учебник Bootstrap

Категория
  • Комментариев: 0
  • Просмотров: 1 295
Bootstrap шаблоны
Шаблон начальной загрузки на Bootstrap 4
Блог
DataLife Engine v.15.0 Press Release
Учебник Bootstrap
Руководство Bootstrap Card
Анимация / Bootstrap сниппеты
Parallax эффект перемещение логотипа на Bootstrap
Учебник Bootstrap
Руководство Bootstrap Form
Учебник Bootstrap
Контейнеры Bootstrap 4
Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Чат
  • nika
    4 фев 2023, 18:26
    hvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
    • revapro100
      6 ноя 2022, 08:55
      скинул в лс п
      • nika
        4 ноя 2022, 17:44
        Всем здрасьте))
        • admin
          4 ноя 2022, 11:06
          Сайт приобретён новым владельцем для развития и расширения другими скриптами и модулями)
          • admin
            4 ноя 2022, 11:05
            @revapro100, Давайте
            • revapro100
              3 ноя 2022, 17:47
              Привет! Могу закинуть парочку хороших программ вам
              • wapstyle
                30 окт 2022, 09:01
                для связи admin@wapstyle.ru
                • wapstyle
                  30 окт 2022, 09:01
                  Приму в дар или размещу у себя, если у тебя проблемы с оплатой хостинга
                  • blablacar
                    28 окт 2022, 20:39
                    Админ, спасибо тебе за старания!
                    • blablacar
                      28 окт 2022, 20:38
                      жаль, крутой сайт
                      • admin
                        7 сен 2022, 17:55
                        чат в комплекте , чат платный с ключём
                        • admin
                          4 сен 2022, 13:09
                          Всем привет ! Продам этот сайт. Нет времени заниматься по вопросам можно тут или в л.с
                          • Nissan Flow
                            27 авг 2022, 08:55
                            А как установить приложение Web2App v3.5 - многофункциональное приложения Webview для Android чет не пойму через что открывать подскажите
                            • revapro100
                              20 авг 2022, 07:32
                              только прочитал, извиняюсь. Лето - осень в деревне куча суеты. ох! уж эти хостеры!
                              • admin
                                21 июл 2022, 20:55
                                @Rocky,
                                • Rocky
                                  21 июл 2022, 11:30
                                  Всем привет
                                  • admin
                                    20 июл 2022, 20:52
                                    @revapro100, тихо тихо)) Чуть акк не забанили хостеры))
                                    • revapro100
                                      20 июл 2022, 20:14
                                      Всем привет!) Что то так тихо в чате)
                                      Чтобы оставлять сообщения - зарегистрируйтесь
                                      x
                                      Закрыть Сохранить настройки Сохранить изменения Разбанить Удалить все
                                        Вставить Отмена
                                        Комментарии
                                        Дмитрий Николаев, Уже нет , этот я продал , не хотел , но устал . Так как админ хороший (она) не стала удалять права на
                                        28 декабря 2022 20:07

                                        nika

                                        Дмитрий Николаев, Не за что , с наступающим Вас
                                        28 декабря 2022 20:01

                                        nika

                                        как установить и зайти в админку. Нет файла install.php
                                        26 декабря 2022 23:09

                                        povar

                                        nika, У вас два сайта?
                                        24 декабря 2022 15:24

                                        Дмитрий Николаев

                                        nika,Спасибо! Вроде работает. 
                                        24 декабря 2022 12:31

                                        Дмитрий Николаев

                                        Сколько часов ,Вы проводите за компьютером

                                        • For-WEb.Ru 2018 - 2022  

                                        Авторизация


                                        Регистрация Забыл пароль