Применение Container Bootstrap даст пользователю мощный базовый сайт. И что действительно делает его впечатляющим — это широкий спектр компонентов, которые могут быть добавлены на сайт. Поскольку Bootstrap уже имеет встроенный CSS и Javascript, компоненты и функциональны разработаны. Конечно, пользователь может дополнительно их редактировать, чтобы настроить сайт по своему вкусу.
Принцип сетки
Этот набор инструментов для создания сайтов и веб-приложений основан на принципе сетки, чтобы правильно масштабировать компоненты для просмотра на разных экранах. Система сетки Container Bootstrap состоит из контейнеров, строк и столбцов, которые используются для определенного макета сайта.
Бутстрап-контейнеры используются для определения ширины макета. Элементы добавляются в контейнеры и затрагивают его ширину. Он представляет собой элемент <div> с классом = «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 устанавливает интервал. Для всех форм нужно заключить метку и элемент управления в <div> с классом = «form-group». Элементы управления и метки в <div> имеют стиль интервала. Они обязательно должны быть в своем собственном классе.
Класс form-control устанавливает ширину контейнера Bootstrap на 100 %, заставляя его охватывать ширину формы и изменять ее размер при помощи окна. Это свойство используют для ввода и выбора элементов управления. Таким образом, выбранный элемент управления будет отформатирован с включенным контролем формы и будет выглядеть как выбор с классом контроля формы или без него, а управление вводом будет отформатировано с добавлением формы управления.
Элементы управления
Элементы управления, такие как текстовые поля и флажки, являются деталями, которые можно легко добавить в форму. Входы — это поля, в которых пользователь может вводить текст.
Это базовый принцип ввода Container Bootstrap, использующий атрибут «текст» HTML5. Тип объявляет вид ввода. Заполнитель определяет текст, отображаемый в поле ввода. Эти типы можно объявить, добавив к вводу. Если нужно добавить ввод электронной почты, изменяют его на type = «email».
При этом нужно иметь в виду, что потребуется включить тип ввода, чтобы элемент управления был правильно оформлен. Элемент управления текстовой областью — это область, которая позволяет использовать большое количество текста, например, для секции комментариев.
При добавлении текстовой области можно настроить размер, объявив, сколько строк нужно охватить. Поскольку Container Bootstrap построен на строках и столбцах, можно сделать область текста меньшей или большей, увеличивая или уменьшая количество строк.
Флажки позволяют пользователям выбирать несколько параметров. По умолчанию флажки отображаются вертикально. Однако можно поменять флажки для отображения горизонтально, изменив тип на type = «checkbox-inline».
Флажки inline настроены иначе, чем базовые. Во встроенном флажковом элементе <label> присваивается класс = «checkbox-inline». Однако если посмотреть на базовый код флажка, можно увидеть, что class = «checkbox» объявлен в элементе <div>, а не в элементе <label>.
Переключатель похож на флажок. Одновременно может быть выбран только один переключатель, в то время как сами флажки могут иметь несколько выбранных. Как и в случае с флажками, вертикальные переключатели отображаются по умолчанию, хотя также можно изменить код для отображения и по горизонтали.
Типы загрузочных форм
Существует несколько типов форм: основная, встроенная и горизонтальная. Каждая из них отличаются по-своему. Встроенные имеют компоненты, называемые «элементами управления», выровненные по вертикали. Для горизонтальных форм элементы управления настраиваются горизонтально. Основная форма исходит из глобального стиля макета.
Чтобы создать базовую формую, просто нужно создать форму в HTML при помощи элемента <form>, а затем добавить элементы управления Bootstrap в теги <form>. Другие два типа форм используют классы для их дифференциации. Если класс не указан, форма по умолчанию соответствует базовой.
Чтобы сделать встроенную форму, нужно добавить class = «form-inline» в элемент <form>. Это автоматически настроит элементы управления в форме по вертикали.
Как и в инлайн-форме, горизонтальная форма получается добавлением класса =»форма-горизонтальной» к <форм> элементу. Это автоматически будет настраивать элементы управления по горизонтали.
Настройки строк и столбцов
Строки охватывают ширину Container Bootstrap. Они имеют отрицательный 15-пиксельный запас в конце, установленный его контейнером. Это связано с тем, что каждый из столбцов имеет свой собственный 15-пиксельный запас, который заменяет маркер контейнера. Столбцы, выровненные рядом друг с другом, будут иметь 15-кратный край, что приведет к 30-пиксельному краю между двумя столбцами.
Строки имеют прописку -15 px, которая отменяет добавление 15 px контейнера. Содержимое в столбце будет зависеть от поля 15 пикселей столбца. Столбцы имеют прописку 15 пикселей. Столбцы, расположенные рядом друг с другом, будут иметь отступы шириной 15 px, в результате получится буфер 30 px.
Заменяют префикс и Column Number предпочтительными размером и количеством столбцов. Префиксы определяют для какого устройства предназначен столбец Bootstrap 4 и высоту контейнера. Например, xs предназначен для небольших экранов, таких как телефоны.
|
Prefix |
For |
|
xs |
<768 px (Телефоны) |
|
sm |
768 px — 991 px (Планшеты) |
|
md |
992 px — 1199 px (Нетбуки) |
|
lg |
≥ 1200 px (Ноутбуки) |
Когда столбец задан с префиксом для меньшего устройства, он будет отображаться аналогичным образом и на более крупных устройствах. Другими словами, столбец, определяемый как sm, будет работать для устройств с размером планшета или больше.
Преимущества применения столбцов:
Обновление css-структуры
После многих лет ожидания Bootstrap 4 был выпущен в январе 2018 года. Bootstrap был первой широко распространенной css-структурой. Новая версия программы основана на этом успешном фундаменте и имеет много улучшений, что упрощает работу с сетками. Bootstrap 4 — это OG ответных макетов. Новый angular.json файл конфигурации имеет совершенно другую структуру, чем оригинал angular-cli.json.
Если пользователь собирается сосредоточиться на использовании сетки для создания гибких макетов в Angular applications, ему нужно использовать только пакеты bootstrap-grid и bootstrap-reboot пакеты.
Можно добавить файлы Container CSS Bootstrap прямо в свойство «styles» в angular.json. Импорт сетки в основной style.scss файл имеет одно важное преимущество перед импортом в angular.json файл. Он позволяет переопределить любую переменную, используемую определениями стилей Bootstrap.
На практике может быть полезно создать styles-variables.scss файл рядом с styles.scss в src папке с отзывчивыми точками останова макета, как определено в Bootstrap по умолчанию. Использование styles-variables.scss дает возможность переопределять сетку по умолчанию и внедрять пользовательские настраиваемые стили.
Таким образом, можно импортировать его в первую строку — styles.scss, которая будет использоваться с Bootstrap, но также и в любом другом файле стилей компонентов для последовательной реализации пользовательской реакции.
Инструкция Bootstrap для начинающих
Bootstrap — очень полезная интерфейсная платформа для более быстрой и простой веб-разработки. Пользователю не придется беспокоиться о наличии практического опыта, имея мощный интерфейс при его использовании.
Инструкция Bootstrap для начинающих охватывает следующие процедуры, которые потребуют:
Следующие разделы станут пошаговым руководством для первой веб-разработки при помощи Bootstrap.
Загрузка CDN и HTML5
Существует несколько способов использования Bootstrap на веб-странице.
Один из них — это использовать сеть доставки CDN или Content. Использование bootstrap CDN означает, что пользователь не будет загружать и сохранять файлы начальной загрузки на сервере или на локальном компьютере. Для этого необходимо создать новый файл index.html. Открыть файл, поместить следующий код и сохранить его.
Если пользователь хочет использовать свою копию, пропишите:
|
<link rel=»stylesheet» href=»bootstrap-3.3.6/css/bootstrap.min.css»> |
Нужно убедиться, что файл загружен. Затем поместить его в тот же каталог, что и index.html, например, в папке «bootstrap-4».
jQuery необходимы для работы функции Bootstrap JavaScript.
Если нужно использовать свою копию jQuery:
|
<script src=»jquery-3.0.0.min.js»></script> |
Предварительно нужно убедиться, что загруженная jQuery и помещена в тот же каталог, что и index.html, например, имя файла jQuery «jquery-3.0.0.min.js».
Container-fluid — это основной элемент со 100 % шириной пользовательского макета, выполняющим боковые отступы для оформления колонок. Bootstrap Container fluid создает полную ширину, вроде container-fluid на более мелких устройствах.
JavaScript и поддержка IE8
Функции Bootstrap, такие как панель навигации, нуждаются в файле JavaScript Bootstrap. Для этого помещают следующий код после кода предыдущего раздела:
|
<script src=»bootstrap-3.3.6/js/bootstrap.min.js»></script> |
Также необходимо добавить поддержку IE8 для HTML5 и медиазапросов.
Bootstrap является базой, которая взаимосвязана с мобильной техникой, поэтому реагирует на различные устройства и размеры экрана.
Навигационные панели очень круты. Пользователи не будут искать данные на сайте, если Bootstrap контейнер по центру используется правильно. Для этого помещают следующий код в тег.
|
<div class=»navbar navbar-default navbar-static-top» role=»navigation»> <div class=»container»> <div class=»navbar-header»> <button type=»button» class=»navbar-toggle» data-toggle=»collapse» data-target=».navbar-collapse»> <span class=»sr-only»>Toggle navigation</span> <span class=»icon-bar»></span> <span class=»icon-bar»></span> <span class=»icon-bar»></span> </button> <a class=»navbar-brand» href=»http://yourwebsite.com/»>Home</a> </div> <div class=»navbar-collapse collapse»> <ul class=»nav navbar-nav»> <li class=»active»> <a href=»#»>All</a> </li> <li> <a href=»#»>Demo</a> </li> <li> <a href=»#»>Contact</a> </li> </ul> </div><!—/.nav-collapse —> </div> </div> |
Тег div будет иметь содержимое веб-сайта. Это важно, потому что он определяет ширину страницы контента. Он не будет разбросан, если посетитель использует большой размер экрана. Чтобы добавить контейнер содержимого помещают следующий код в код предыдущего раздела.
|
<div class=»container»> </div> |
Оформление заголовка таблицы
Заголовок важен, потому что он сообщает пользователю, на какой странице он находится. Помещают следующий код между тегами «контейнера div» предыдущего раздела.
|
<div class=»col-md-12″> <div class=»page-header»> <h1>Bootstrap Sample Page with Form</h1> </div> </div> |
В этом примере есть таблица, в которой будут храниться элементы формы, такие как текстовое поле. Рабочий стол выглядит хорошо, не имеет зависающего эффекта и хорошо реагирует на действия пользователя. Для этого помещают следующий код в предыдущий раздел.
|
<div class=»col-md-12″> <table class=’table table-hover table-responsive table-bordered’> <tr> <td>Name</td> <td></td> </tr> <tr> <td>Contact Number</td> <td></td> </tr> <tr> <td>Address</td> <td></td> </tr> <tr> <td>List</td> <td> </td> </tr> <tr> <td></td> <td> </td> </tr> </table> </div> |
Пример этой формы будет содержать несколько текстовых полей, текстовую область и выпадающий список. Для этого заменяют код предыдущего раздела следующим.
|
<div class=»col-md-12″> <table class=’table table-hover table-responsive table-bordered’> <tr> <td>Name</td> <td><input type=’text’ name=’name’ class=’form-control’ required></td> </tr> <tr> <td>Contact Number</td> <td><input type=’text’ name=’contact_number’ class=’form-control’ required></td> </tr> <tr> <td>Address</td> <td><textarea name=’address’ class=’form-control’></textarea></td> </tr> <tr> <td>List</td> <td> <select name=’list_id’ class=’form-control’> <option value=’1′>List One</option> <option value=’2′>List Two</option> <option value=’3′>List Three</option> </select> </td> </tr> <tr> <td></td> <td> </td> </tr> </table> </form> </div> |
Добавление кнопки GLYPHICON
«Глификон» — это библиотека монохромных значков и символов, созданная с упором на простоту и удобную ориентацию.
Кнопки с иконками выглядят симпатично, а библиотека сигнализирует пользователю, для чего предназначена кнопка. Значок и цвет кнопки могут легко подсказать, что делает кнопка в веб-приложении.
Для этого помещают следующий код между «последними тегами» предыдущего раздела.
|
<button type=»submit» class=»btn btn-primary»> <span class=»glyphicon glyphicon-plus»></span> Create New Record </button> |
И также можно добавить заметки при помощи бутстрапа, поместив следующий код перед «открытием тега dev» предыдущего раздела.
|
<div class=»col-md-12″> <div class=»alert alert-info»> <strong>Heads up!</strong> <a href=»https: ххххххх»>codeofaninja.com</a>! </div> </div> |
Если пользователь загружает код, помимо исходного он получит следующее сообщение:
|
Пункт |
Описание |
|
Индекс-cdn.html |
Использует структуру Bootstrap в CDN. Будет работать, если ваш компьютер только в Интернете. |
|
Индекс-local.html |
Использует загруженную структуру без CDN. Работает на локальном хосте. В Bootstrap 4 фоновое изображение по размеру контейнера будет работать, даже если компьютер отключен. |
Как очевидно, Bootstrap предлагает пользователю множество отличных инструментов, ускоряющий процесс разработки программных приложений. Это экономит много часов и даже дней при разработке и кодировании удивительного пользовательского интерфейса.
Программные компоненты и плагины самым тщательным образом задокументированы, наполнены живыми примерами и кодовыми блоками для удобства пользователей. Bootstrap очень приличный инструмент для разработки и дизайна мобильных веб-сайтов, позволяет сначала разработать структуру, а позднее — шрифты, цвет и стиль. Нужно только потратить некоторое время, чтобы выучить возможности метода и использовать его наилучшим образом.
