Понимание чисел в классах сетки Bootstrap: col-md-4, col-xs-1, col-lg-2

Фреймворк Bootstrap представляет надежную сеточную систему, которая облегчает создание адаптивных макетов. Неотъемлемой частью этой системы являются классы формата col-*, где звездочка представляет собой число. Эти числа играют решающую роль в определении того, как элементы в сетке выравниваются и как они реагируют на разные размеры экрана.

Как числа выравнивают сетки?

Число в классе col-* представляет часть доступной ширины, которую должен занимать связанный элемент. Общая ширина строки сетки разделена на 12 столбцов, а число в классе указывает количество столбцов, которые будет охватывать элемент.

Например, col-4 означает, что элемент будет охватывать 4 столбца. или 1/3 доступной ширины. col-12 будет занимать всю ширину, занимая все 12 столбцов.

Как использовать числа

Чтобы использовать эти классы, просто назначьте их элементам внутри ряд сетки. Например, чтобы создать два столбца одинаковой ширины в строке, вы должны использовать:

Column 1
Column 2

Чтобы создать три столбца разной ширины, вы можете использовать:

Column 1
Column 2
Column 3

Что обозначают цифры?

Помимо самих цифр, важно отметить к ним применены префиксы. В Bootstrap эти префиксы представляют разные размеры экрана:

• xs: очень маленький (мобильные устройства)
• sm: маленький (планшеты)
• md: средний (настольные компьютеры) )
• lg: Большой (рабочие столы большего размера)

Назначая элементу несколько классов col-*, вы можете контролировать его поведение при каждом из этих размеров экрана. Например, col-6 col-sm-4 означает, что элемент будет занимать половину ширины на экранах мобильных устройств и 1/3 ширины на планшетах и ​​настольных компьютерах.

Заключение

Понимание чисел и префиксов в классах сетки Bootstrap необходимо для создания отзывчивых и адаптивных веб-макетов. Эффективно используя классы col-*, разработчики могут гарантировать, что их проекты будут плавно реагировать на экраны разных размеров, обеспечивая единообразный пользовательский интерфейс на всех устройствах.