Искать
Вы превысили запрос на
0 знаков

Это блог интерактивного сайта Codebra. Здесь публикуются материалы, выходящие за рамки основных курсов сайта, мои собственные мысли по программированию и новости сайта. Кстати, если нужны курсы, то Вам сюда.

«Многие из вас знакомы с достоинствами программиста. Их всего три, и разумеется это: лень, нетерпеливость и гордыня.»

Программист

Ларри Уолл

1954 г.

Главная » Bootstrap » Урок 4. Адаптивные столбцы в Bootstrap
Урок 4. Адаптивные столбцы в Bootstrap

Оглавление мини-курса «Bootstrap — сетки» от пользователя сайта Codebra

В предыдущем уроке мы создавали автоматические столбцы.

Но Bootstrap славится своей адаптивностью. Как же нам сделать адаптивные столбцы?

Bootstrap может адаптировать к шести контрольным точкам (брейкпоинт):

  1. Очень маленький — Extra small (xs);
  2. Маленький — Small (sm);
  3. Средний — Medium (md);
  4. Большой — Large (lg);
  5. Очень большой — Extra large (xl);
  6. Огромный — Extra extra large (xxl).

На рисунке 1 представлено определение сетки на контрольных точках.

Рисунок 1x
Рисунок 1

К примеру, мы сделаем, чтобы на брейкпоинте md было две колонки по шесть столбцов:

<div class="container">    
    <div class="row">        
        <div class="col-md-6"> 1 колонка </div>        
        <div class="col-md-6"> 2 колонка </div>    
    </div>
</div>    

Получается, что с разрешения md и выше у нас будет по две колонки и по шесть столбцов.

Но если разрешение будет ниже 768 px, то колонки будут занимать всё доступное пространство. Разрешения строятся по принципу больше или равно.

Для 768 px правила будут приниматься больше или равно этому значению, также и насчёт других разрешений.

Мы можем также комбинировать наши классы.

Пример:

<div class="container">    
    <div class="row">        
        <div class="col-md-3 col-xl-3"> 1 </div>        
        <div class="col-md-4 col-xl-3"> 2 </div>        
        <div class="col-md-3 col-xl-3"> 3 </div>       
        <div class="col-md-2 col-xl-3"> 4 </div>    
    </div>
</div>    

В нашем примере мы видим, что колонки на разрешении 1200 px и более выстроились по 3, а на разрешении меньше 1200 px колонки будут занимать по 3, 4, 3 и 2 колонки соответственно.

Вот такими простыми способами мы можем манипулировать нашей сеткой.

Задание:

Сделайте 3 колонки таким способом:

  1. На разрешении xs – должны занимать по 12 столбцов. (автоматические колонки можно создать просто классом .col);
  2. На разрешении sm – должны занимать по 6 столбцов;
  3. На разрешении md — должны занимать по 4 столбцов;
  4. На разрешении lg — должны занимать по 12 столбцов;
Bootstrap. Просмотров: 41
30.07.2022
Codebra