Bootstrap 4 координатна мрежа

Използва се за създаване на адаптивен дизайн на страниците (responsive layouts). Адаптивния дизайн представя начина, по който елементите се подреждат на страницата при различни резолюции.

Критично важно е да бъде разбрана координатната мрежа на bootstrap преди изучаването на всеки друг негов елемент. Това е така, защото който и елемент да се използва в последствие, той трябва да бъде поставен някъде на екрана.

Bootstrap 4 Containers

Bootstrap 4 контейнера е елемент от клас .container.

Контейнерът е коренът (root) на мрежата Bootstrap 4 и се използва за управление на ширината на оформлението. Той съдържа всички елементи в дадена страница. Това означава, че страницата трябва да има следната структура: първо тялото на HTML документа, в нея добавяте контейнера и всички други елементи вътре в контейнера.

<body>
    <div class="container">
    ...
    </div>
</body>

Разполагаме с два варианта за клас .container:

  • Простият клас .container определя ширината на оформлението в зависимост от ширината на екрана. Той поставя съдържанието в средата на страницата, като го подравнява хоризонтално. Има равно разстояние между контейнера за Bootstrap 4 и левия и десния край на страницата. Контейнерът мащабира ширината, като ширината на екрана става пълна ширина на мобилния телефон. Ширината на контейнера е определена в библиотеката Bootstrap 4 за всеки размер на екрана.
  • full-width container (контейнер с пълна ширина). Той заема 100% от размера на екрана, независимо от ширината на екрана. За да го използвате, трябва да добавите клас .container-fluid.

Пример:

<!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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  
    <title>Hello, world!</title>
    <style>
      body {
        background-color: #AFC2BE;
        padding: 4rem 0rem;
      }

      .container,
      .container-fluid {
        background-color: #FFF;
        padding: 2em;
      }

      .container-fluid {
        margin-top: 4em;
      }
    </style>
  </head>
  <body>
    <div class="container">
      Hello! I am in a simple container.
    </div>

    <div class="container-fluid">
      Hello! I am in a full-width container.
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.3/js/bootstrap.min.js"></script>
</html>
.container и .container-fluid в браузър

Редове в bootstrap 4

Bootstrap 4 редoвете (bootstrap 4 rows) са хоризонтални отрязъци на екрана. Използват се само като обвивки (wrappers) за колони. За да ги използваме, се нуждаем от клас .row.

<div class="row">
    ...
</div>
  • Редовете се използват само за да съдържат колони. Ако поставим други елементи в реда заедно с колони, няма да получим очаквания резултат.
  • Редовете трябва да бъдат поставени в контейнери. Ако не го направим, ще получим хоризонтално превъртане на страницата си. Това се случва, защото редове имат отрицателни ляво и дясно поле от 15px. Контейнерът има 15px отстъпи (paddings), така че да противодейства на полетата на реда.
  • Колоните трябва да се съсдържат в реда. В противен случай те няма да се подравнят правилно. Редовете и колоните са създадени, за да работят заедно в строгата йерархия на bootstrap.

Колони в Bootstrap 4

Разделят екрана хоризонтално. 

Ако поставим една колона в реда си, тя ще заема цялата ширина. Ако добавим две колони, всяка от тях ще отнеме половината от ширината. И така нататък, за произволен брой колони.

За да ги използваме, се нуждаем от клас .col.

<div class=”col">
    ...
</div>
  • Задаване размери на колоните

Клас .col задава динамично ширината на колоната. Това означава, че в зависимост от броя на колоните в един ред, ширината на колоната ще бъде ширината на контейнера, разделена на броя на колоните.

Задача
Да се напише код, визуализиращ в браузъра следната структура:

Друг начин за задаване ширина на колоните:
По подразбиране мрежата Bootstrap 4 се състои от 12 колони. Вootstrap поддържа класове с различна ширина на колоната. Можем да избираме размери от 1 до 12. Например, ако искаме 3 равни колони, можем да използваме .col-4 за всяка от тях (защото 3 * 4 cols = 12). Или можем да зададем различни размери за различните колони. Ето няколко примера:

<!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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  
    <title>Колони с различна ширина</title>
    <style>
      :root { font-size: 62.5% }
      body{
        margin:1rem 0 0 0;
        font-size:1.6rem;
        
      }
      .panel {
        border-radius: 1rem;
        padding: 2rem;
        margin-bottom: 2rem;
        
      }
      .panel.panel-green {
        border: 0.1rem solid #215B06;
        background-color: #51FF00;
        color: #215B06;
      }
  </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-6">
          <div class="panel panel-green">Аз съм .col-6</div>
        </div>
        <div class="col-6">
          <div class="panel panel-green">Аз също съм съм .col-6</div>     
        </div>
      </div>
  
      <div class="row">
        <div class="col-5">
          <div class="panel panel-green">Аз съм .col-5</div>
        </div>
        <div class="col-7">
          <div class="panel panel-green">Аз съм .col-7</div>     
        </div>
      </div>
  
      <div class="row">
        <div class="col-3">
          <div class="panel panel-green">Аз съм .col-3</div>
        </div>
        <div class="col-4">
          <div class="panel panel-green">Аз съм .col-4</div>     
        </div>
      </div>
 
      <div class="row">
        <div class="col-6">
          <div class="panel panel-green">Аз съм .col-6</div>
        </div>
        <div class="col-7">
          <div class="panel panel-green">Аз съм .col-7</div>     
        </div>
      </div>
    </div>    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.3/js/bootstrap.min.js"></script>
  </body>
</html>

Задаване на точки на прекъсване

Ако вземем горните пример и искаме да ги покажем на мобилен телефон, може да се натъкнем на някои проблеми с визуализацията. Показването на 5 колони в мобилни устройства ще направи съдържанието нечетливо. Тук влиза в действие един от най-мощните компоненти на Bootstrap 4 – Breakpoints. За да имате различни оформления на различни екрани, ще използваме прекъсванията на колоните.

Да приемем, че искаме да покажем 2 колони една след друга вертикално на малки екрани и на една и съща линия на по-големи екрани. За целта е необходимо да посочим точка на прекъсване за съответната резолюция.

В нашия пример искаме колоните да се подреждат хоризонтално, като се започне с лаптопа. Точката на прекъсване за резолюцията на лаптопа е .col-lg. Ако разгледаме страницата с по-висока разделителна способност, ще видим колоните да бъдат подравнени хоризонтално.

<!-- CSS -->
<style>
      :root{font-size:62.5%;}
      body{
        margin:1rem 0 0 0;
        font-size:1.6rem;
      }
      .panel{
        padding: 1rem;
        margin:0 0 1rem 0;
        border-radius: 1rem;
        text-align: center;
      }
      .panel.panel-green{
        background-color: #bfff00;
        border: 0.2rem solid #00ff40;
        color: #000;
      }
    </style>

 <!-- HTML -->
  
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg">
          <div class="panel panel-green">Първа колона</div>
        </div>
        <div class="col-lg">
          <div class="panel panel-green">Втора колона</div>
        </div>
      </div>
    </div>
Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Max container widthNone (auto)
540px720px960px1140px
Class prefix
.col-.col-sm-.col-md-.col-lg-.col-xl-
# of columns12

Можем да комбинираме размерите и прекъсванията, като използваме клас от вида:

.col-[breakpoint]-[size]

<div class="container">  
     <div class="row">
       <div class="col-md-4">
         <div class="panel panel-green">Първа колона</div>
       </div>
       <div class="col-md-3">
         <div class="panel panel-green">Втора колона</div>
       </div>
       <div class="col-md-5">
         <div class="panel panel-green">Трета колона</div>     
       </div>
     </div>
 </div>

Задача: да се визуализира една колона в ред за мобилни телефони, две колони на ред за таблети и 4 на ред за лаптопи.

За да решим задачата, ще трябва да използваме няколко класа. Тествайте резултата от кода по-долу на различни резолюции.

<!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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <style>
      :root{font-size:62.5%;}
      body{
        margin:1rem 0 0 0;
        font-size:1.6rem;
      }
      .panel{
        padding: 1rem;
        margin:0 0 1rem 0;
        border-radius: 1rem;
        text-align: center;
      }
      .panel.panel-green{
        background-color: #bfff00;
        border: 0.2rem solid #00ff40;
        color: #000;
      }
      .panel.panel-purple {
        border: 1px solid #7F51F4;
        background-color: #DFCCFF;
        color: #7F51F4;
      }

    </style>
    <title>columns demo</title>
  </head>
  <body>
   <div class="container">  
     <div class="row">
       <div class="col-sm-12 col-md-6 col-lg-3">
         <div class="panel panel-green">Първа колона</div>
       </div>
       <div class="col-sm-12 col-md-6 col-lg-3">
         <div class="panel panel-purple">Втора колона</div>
       </div>
       <div class="col-sm-12 col-md-6 col-lg-3">
         <div class="panel panel-green">Трета колона</div>     
       </div>
       <div class="col-sm-12 col-md-6 col-lg-3">
         <div class="panel panel-purple">Четвърта колона</div>     
       </div>
       <div class="col-sm-12 col-md-6 col-lg-3">
         <div class="panel panel-purple">Пета колона</div>     
       </div>
     </div>
   </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.3/js/bootstrap.min.js"></script>
</html>

Последователно указваме класовете, с които описваме точките на прекъсване при различни резолюции:
* col-sm-12 указва, че при попадане в резолюция на мобилен телефон (от 576 до 768px), на всеки ред можем да имаме най-много една колона (колонатта тук заема 12 части от целия ред);
* col-md-6 указва, че при резолюция за таблет (от 768 до 992px), на всеки ред можем да имаме най-много две колони(колоната заема 6 от 12-тенчасти).
* col-lg-3 указва, че при попадане в резолюция над 992рх (лаптоп), всяка колона ще заема 3 от 12-те части на реда (или можем да имаме не повече от 4 колони в ред).

** петата колона демонстрира ефекта – в първите два случая се вижда, че винаги е на отделен ред.

лаптоп
таблет
мобилен телефон

Отместване на колони (Offsetting columns)

В случай, че не искаме колоните да са една до друга, бихме могли заедно с класа .col-[breakpoint]-[size], да използваме клас
.offset-[breakpoint]-[size]
Резултата е добавяне на празна колона преди текущата.

<!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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <style>
      :root{font-size:62.5%;}
      body{
        margin:1rem 0 0 0;
        font-size:1.6rem;
      }
      .panel{
        padding: 1rem;
        margin:0 0 1rem 0;
        border-radius: 1rem;
        text-align: center;
      }
      .panel.panel-purple {
        border: 1px solid #7F51F4;
        background-color: #DFCCFF;
        color: #7F51F4;
      }
    </style>
    <title>columns demo</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-4 offset-sm-4">
          <div class="panel panel-purple">Това е колона с отместване (offset).</div>    
        </div>  
        <div class="col-sm-4">
          <div class="panel panel-purple">Това е колона.</div>    
        </div>  
      </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.3/js/bootstrap.min.js"></script>
</html>
offsetting columns

Този клас може да се използва преди коя да е колона.

Вмъкнати колони (Nesting Columns)

Bootstrap позволява да вмъкнем ред в колона. Този ред ще има ширината на съдържащата го колона и ще бъде разделен на 12 по-малки колони, които можем да управляваме чрез .col-* класовете.

<!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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <style>
      :root{font-size:62.5%;}
      body{
        margin:1rem 0 0 0;
        font-size:1.6rem;
      }
      .panel{
        padding: 1rem;
        margin:0 0 1rem 0;
        border-radius: 1rem;
        text-align: center;
      }
      .panel.panel-blue {
        border: 1px solid #0087FF;
        background-color: #DDEDFF;
        color: #0087FF;
      }
      .panel.panel-purple {
        border: 1px solid #7F51F4;
        background-color: #DFCCFF;
        color: #7F51F4;
      }
    </style>
    <title>columns demo</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-8">
          <div class="panel panel-blue">Това е първо ниво.
            <div class="row">
              <div class="col-md-5">
                 <div class="panel panel-purple">Това е второ (вградено ниво).</div>
              </div>
              <div class="col-md-7">
                 <div class="panel panel-purple">Това е второ (вградено ниво).</div>   
              </div>
            </div>
          </div>
        </div>     
        <div class="col-sm-4">
          <div class="panel panel-blue">Това е първо ниво.</div>
        </div>
      </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.3/js/bootstrap.min.js"></script>
</html>
nesting columns

Задача

Създайте страница, която се визуализира както е показано по-долу:

Мобилна версия
Десктоп версия
Реклами