Мадекс Дизайн: Как правильно работать с сеткой в bootstrap?

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

Это статья для тех, кто хочет научиться писать красивый чистый код, быстро сдавать свои проекты заказчикам и начальникам и не быть поруганным программистами.

Итак в данном посте я привожу небольшую памятку, которая поможет разобраться как правильно использовать сетку в бутстрапе, в каком порядке ставить стили .container, .container-fluid, .row, как сделать фон на всю ширину в bootstrap и как разбить колонку ещё на две колонки:

Памятка по bootstrap

Как сделать фон в bootstrap на всю ширину?

section > .container > .row > .col-*

тегу section задаём фон, который должен быть на всю ширину экрана
тег c классом .container огнаничивает ширину контента и центрирует его
тего .row разбивает страницу на колонки, в нём пишутся теги колонок с классами .col-*-*

Как разбить колонку ещё на несколько колонок в bootstrap?

.col-sm-6 > .row > .col-sm-*

.col-sm-6 - наша колонка, которую необходимо разбить
добавляет в неё тег с классом .row, чтобы обозначить разбиение на колонки
в тег .row уже вставляем теги с классами необходимых нам колонок .col-*

Как сделать контент (текст) во всю ширину на bootstrap?

section > .container > текст

тег section позволяет задать фон на всю ширину
тег с классом .container ограничивает ширину контента и центрирует контент
в тег .container уже вставляем текст или нужный контент без всяких дополнительных конструкций типо .row > .col-sm-12

Как сделать сайт на всю ширину экрана на bootstrap?

.container-fluid > .row > .col-*

тег с классом .container-fluid растягивается на всю ширину, имеет отступы от краев
внутри идёт стандартная разбивка на колонки с помощью тегов .row и .col-*

Скопировать пример описанных блоков на bootstrap:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
 
 <section> 
  
  <div class="container">
   <h1>
Блок .container > .row > col-*</h1>

   <div class="row">
 
    <div class="col-sm-4">
     <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum officia, vitae, perspiciatis voluptatem enim debitis? Pariatur illo maiores quidem error provident iure aperiam neque, deserunt blanditiis molestias exercitationem harum nihil.</p>

     <div class="row">
      <div class="col-sm-6">
       <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo distinctio sed aut nesciunt omnis ipsam voluptatum hic? Quia deserunt enim inventore nobis repellat eaque sit delectus sed pariatur! Veniam, fugit!</p>
</div>
<div class="col-sm-6">
       <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo distinctio sed aut nesciunt omnis ipsam voluptatum hic? Quia deserunt enim inventore nobis repellat eaque sit delectus sed pariatur! Veniam, fugit!</p>
</div>
</div>
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</section>

<section>
  <div class="container">
   
   <h1>
Блок .container</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quis, nemo incidunt repellendus consectetur nulla cumque! Dicta veritatis culpa laborum tenetur doloribus? Debitis quod voluptatem sapiente, laboriosam, vero reprehenderit nihil.</p>
<p>
Natus impedit numquam nesciunt, et quibusdam debitis, repudiandae voluptates qui commodi quae quis distinctio quaerat facilis nihil voluptate tempore. Reprehenderit eius, fugiat voluptatibus consectetur dignissimos atque nobis sequi voluptates nisi.</p>
</div>
</section>

<div class="container-fluid">
   <div class="row">
    <div class="col-sm-6">
     <h1>
Контейнер .container-fluid</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, eveniet. Rerum laudantium, ab nulla. Adipisci quo, illo recusandae ea, obcaecati in voluptatum eos ipsam iure magni aut quaerat quod sed?</p>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
</body>
</html>

6 комментариев:

Unknown24 марта 2017 г. в 16:48
Ура! Наконец-то я получить конкретные ответы на свои вопросы. Автору огромный респект.
ОтветитьУдалить
Ответы
Алексей25 марта 2018 г. в 09:19
как использовать Bootstrap для разработки шаблонов в Blogger? Есть какие-то особенности?
ОтветитьУдалить
Ответы
Saah15 июня 2019 г. в 10:38
День мучился пока растягивал меню fixed-top на всю ширину экрана. Благодаря статье (Дмитрию) вспомнил про "section".
Только section помогает растянуть fixed-top на всю ширину экрана.

Пример:
-section class="fixed-top sss shadow"-
{include file="modules/topmenu.tpl"}
-/section-

.sss {
background-color: #727CB6;
}
.sss a {
color: #fff;
}
ОтветитьУдалить
Ответы
Saah15 июня 2019 г. в 10:41
Забыл скачать спасибо: Благодарю, Dmitry Galakhov!!!
ОтветитьУдалить
Ответы

Добавить комментарий

среда, 2 декабря 2015 г.

Как правильно работать с сеткой в bootstrap?