Доброго времени суток всем желающим постигнуть дзен при изучении фреймворка Bootstrap 3. Прочитав текущую публикацию, вы освоите управление одним из наиболее интересных классов в системе сеток, а именно .clearfix Bootstrap.
Я во всех подробностях расскажу вам, что это за элемент и для чего его используют разработчики в своем коде, а также не оставлю вас без приведения решения для конкретной задачи по данной теме. Ну а теперь давайте приступим к обучению!
Повторение – мать учения
Для лучшего понимания, к какому элементу фреймворка относится материал данной статьи, я напомню вам что такое система сеток.
В Бутстрапе этот инструмент называется Grid System. Он позволяет при помощи встроенных классов организовать плавающие (.container- fluid) или фиксированные (.container) сетки, в которые после вносится контент сайта. Благодаря названному механизму очень удобно верстать структуру веб-страниц, которая, как вы уже знаете, будет отзывчивой.
До этого я много внимания уделял описанию базовых классов Grid System. Среди них фигурировали .col-X-Y, .col-X-offset-Y и .row.
Однако существуют еще 3 класса, об одном из которых мы сегодня и поговорим.
Почистим, подровняем, причешем!
Иногда возникают такие ситуации, когда при изменении разрешения экрана созданные блоки в Bootstrap хаотично сдвигаются, «прыгают» в зависимости от количества внесенного в них контента и т.д. Такая же ситуация может возникнуть при создании родительских и дочерних элементов разного размера.
Для того чтобы решить данную проблему был создан класс под названием .clearfix. Он очищает плавающие элементы от всех значений «float».
На самом деле если попытаться представить, каким образом работает данный инструмент, то его можно назвать «разделителем», который разбивает элементы между собой горизонтальной линией. Именно поэтому после этого «разделителя» все последующие объекты переносятся на позиции ниже.
Инструмент с таким же названием можно найти и в каскадных таблицах стилей css. Он использует псевдоэлементы ::after и ::before. А в стилевых правилах указывается тип отображения в виде таблиц, т.е. display: table.
Для наглядности разберите пример без применения изучаемого класса и с его объявлением.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html>
<html lang="en">
<head>
<title>Пример без использования class clearfix</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-3" style="background:#FFDEAD;">
<p>Первая колонка</p>
<p>В ней расположено достаточно много текста, чтобы сдвинуть все остальные блоки!!!</p>
</div>
<div class="col-xs-6 col-sm-3" style="background: #6495ED;"><p>Вторая колонка</p></div>
<div class="col-xs-6 col-sm-3" style="background: #CD5C5C;"><p>Третья ячейка</p></div>
<div class="col-xs-6 col-sm-3" style="background:#DB7093;"><p>Четвертая ячейка</p></div>
</div>
</div>
</body>
</html> |
А теперь перед третьим блоком добавьте строку
<div class="clearfix visible-xs"></div>
Класс visible-xs указывает на то, что данный механизм будет срабатывать только при маленьком размере экрана.
Как видите, третья и четвертая колонки сдвинулись на следующую строку.
Надеюсь вам понравилась моя публикация. А если вы подтверждаете мои надежды, то подписывайтесь на блог и рассказывайте о нем знакомым. До новых встреч! Пока-пока!
С уважением, Роман Чуешов
