Возможности начальной загрузки

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

В предыдущая статья мы утверждали, что бывают случаи, когда контент-менеджеры — не лучший вариант, и что написание кода с нуля для веб-сайта — правильная альтернатива. Однако это не означает, что мы должны изобретать велосипед. Использование таких фреймворков, как Bootstrap, значительно сокращает время разработки и упрощает получение результатов.

Возможности начальной загрузки

Чтобы понять особенности Bootstrap, нам нужно понять смена парадигмы в дизайне веб-сайтов.

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

В принципе были приняты следующие подходы:

• Отзывчивый дизайн: Дизайн тот же, но автоматически подстраивается под размер экрана. У этого подхода есть некоторые проблемы, такие как пользователь может быть вынужден увеличивать определенные разделы страницы, чтобы увидеть их.
• Прогрессивное продвижение: Он начинается с разработки сайта для устройства с меньшим количеством ресурсов (как правило, мобильного телефона, потому что у него экран меньше, браузер с меньшей совместимостью для расширенных функций и часто требуется использование тарифного плана для подключения). После завершения, на основе этого дизайна, добавляются функции для получения версии для планшетов, ноутбуков и настольных компьютеров.
• Постепенная деградация: Это обратный путь. Сайт для настольных компьютеров создается первым, а функции удаляются до тех пор, пока не будет получена мобильная версия.

Поскольку всегда легче добавить, чем удалить, прогрессивный рост — это тенденция, которой удалось преобладать. Б.ootstrap, например, использует подход «сначала мобильные»., то есть основой дизайна всегда является версия, которая будет отображаться на экране с наименьшим размером, а затем устанавливаются модификации, которые будут внесены по мере того, как она будет передана в последующие размеры.

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

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

Bootstrap — это фреймворк, который сочетает в себе элементы стиля CSS и программирования на Javascript для управления рендерингом и придания интерактивности всем компонентам страницы, разработанным в HTML5.

Среди вещей, которые мы можем контролировать с помощью Bootstrap:

• Доступность: Такие компоненты, как меню или диалоговые окна, совместимы со средствами чтения с экрана или подходят для использования людьми с ограниченными физическими возможностями.
• Кнопки: Включая меры, стили, состояния и группировку.
• Формы:  Включая рендеринг, типы элементов управления и проверку ввода.
• образность: управляет исходным положением, выравниванием и размером экрана вставляемых изображений.
• Элементы навигации: Например, скрываемые боковые панели или вертикальные или горизонтальные меню в зависимости от устройства.
• типографика: Управляйте отображением различных частей текста.
• Макет: Настройка рендеринга контента в зависимости от устройства

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