03-10-2018 09:39

Bootstrap container: инструкция пользователя

Применение Container Bootstrap даст пользователю мощный базовый сайт. И что действительно делает его впечатляющим - это широкий спектр компонентов, которые могут быть добавлены на сайт. Поскольку Bootstrap уже имеет встроенный CSS и Javascript, компоненты и функциональны разработаны. Конечно, пользователь может дополнительно их редактировать, чтобы настроить сайт по своему вкусу.

Принцип сетки

Этот набор инструментов для создания сайтов и веб-приложений основан на принципе сетки, чтобы правильно масштабировать компоненты для просмотра на разных экранах. Система сетки Container Bootstrap состоит из контейнеров, строк и столбцов, которые используются для определенного макета сайта.

How dangerous is the new coronavirus?You will be interested:How dangerous is the new coronavirus?

Бутстрап-контейнеры используются для определения ширины макета. Элементы добавляются в контейнеры и затрагивают его ширину. Он представляет собой элемент

с классом = "container" и влияет на все элементы в нем.

Контейнеры по умолчанию имеют по 15 пикселей, что смягчает просмотр от конца страницы. Строки и столбцы добавляются внутри контейнеров с фиксированной Bootstrap Container width по умолчанию, которые меняются в зависимости от размера устройства просмотра. Ширина просматриваемого устройства и соответствующего контейнера указана в таблице ниже:

Просмотр ширины устройства

Ширина контейнера

Менее 768 px

Авто

768px - 991 px

750 px

992px - 119 px

970 px

1200 px и выше

1170 px

Правила сетки:

  • Столбцы должны быть непосредственным дочерним элементом строки.
  • Строки используются только для хранения столбцов и ничего больше.
  • Строки должны быть размещены внутри контейнера.
  • Эти правила очень важны. Ряды и столбцы всегда работают вместе, и юзер не должен использовать один без другого.

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

    Если пользователи не хотят, чтобы контейнеры изменялись в фиксированной ширине, можно использовать class = "container-fluid" вместо class = "container". Это приведет к тому, что контейнеры будут всегда соответствовать Bootstrap container на всю ширину экрана и не изменять размер до фиксированной ширины.

    Система сетки позволяет иметь до 12 столбцов на странице. Они могут использоваться отдельно или быть сгруппированы вместе. Чтобы группировать столбцы вместе, нужно создавать строки, для чего добавляют div с классом = "row", который заключает в себе код столбца.

    Настройка интервала

    Чтобы иметь аккуратную форму, нужно сначала понять, как Bootstrap устанавливает интервал. Для всех форм нужно заключить метку и элемент управления в

    с классом = "form-group". Элементы управления и метки в
    имеют стиль интервала. Они обязательно должны быть в своем собственном классе.

    Класс form-control устанавливает ширину контейнера Bootstrap на 100 %, заставляя его охватывать ширину формы и изменять ее размер при помощи окна. Это свойство используют для ввода и выбора элементов управления. Таким образом, выбранный элемент управления будет отформатирован с включенным контролем формы и будет выглядеть как выбор с классом контроля формы или без него, а управление вводом будет отформатировано с добавлением формы управления.

    Элементы управления

    Элементы управления, такие как текстовые поля и флажки, являются деталями, которые можно легко добавить в форму. Входы - это поля, в которых пользователь может вводить текст.

    Это базовый принцип ввода Container Bootstrap, использующий атрибут «текст» HTML5. Тип объявляет вид ввода. Заполнитель определяет текст, отображаемый в поле ввода. Эти типы можно объявить, добавив к вводу. Если нужно добавить ввод электронной почты, изменяют его на type = "email".

    При этом нужно иметь в виду, что потребуется включить тип ввода, чтобы элемент управления был правильно оформлен. Элемент управления текстовой областью - это область, которая позволяет использовать большое количество текста, например, для секции комментариев.

    При добавлении текстовой области можно настроить размер, объявив, сколько строк нужно охватить. Поскольку Container Bootstrap построен на строках и столбцах, можно сделать область текста меньшей или большей, увеличивая или уменьшая количество строк.

    Флажки позволяют пользователям выбирать несколько параметров. По умолчанию флажки отображаются вертикально. Однако можно поменять флажки для отображения горизонтально, изменив тип на type = "checkbox-inline".

    Флажки inline настроены иначе, чем базовые. Во встроенном флажковом элементе

    , а не в элементе