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

Причины, по которым вам следует использовать Bootstrap

  1. Легко начать использовать
  2. Отличная документация: перейдите по этой ссылке на документацию Bootstrap.
  3. Меньше - лучше. Вы можете меньше манипулировать CSS, а также минимизировать количество CSS и файлов, необходимых для вашей веб-страницы, не повторяя себя.
  4. Настраиваемый: Bootstrap содержит множество подключаемых модулей Javascript, позволяющих лучше настраивать.
  5. Система сетки. По умолчанию используется сетка из 12 столбцов, которая может быть фиксированной или адаптивной, с множеством вариантов дизайна.
  6. Совместимость и скорость отклика. Bootstrap совместим со всеми браузерами и работает на разных платформах, от ноутбуков до планшетов и телефонов.

Установка

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

Перейдите по этой ссылке, чтобы перейти к документации Bootstrap. Скопируйте и вставьте ссылку CSS, а также три сценария JS в файл index.html. Теперь вы можете начать кодировать свой CSS, HTML и Javascript.

Если вы не используете платформу Javascript, вы можете просто импортировать Bootstrap как скрипт из CDN. Например, используйте эту ссылку, чтобы помочь вам узнать, как использовать Bootstrap с Ruby on Rails.

Сетка

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

Bootstrap также учитывает разные размеры экрана, что очень полезно для веб-фреймворков. Макет может быть идеальным не для всех устройств, поэтому bootstrap дает нам возможность изменять количество столбцов в зависимости от размера экрана. Ниже приведен пример различных размеров для разных диапазонов экранов. «Extra small» предназначен для мобильного формата, «Small» может использоваться для мобильных или вертикальных планшетов, «Medium» обычно используется для горизонтальных планшетов, а «Large» и «Extra Large» в основном используются для больших планшетов или настольных компьютеров.

Поскольку сетка состоит из 12 частей, вы можете указать, сколько частей может занимать каждый столбец. Так, например, если вы хотите разделить свою сетку на три части в мобильном приложении, вам нужно будет только добавить класс по умолчанию, предоставленный Bootstrap, а затем ввести «col-md-4» для каждого из элементов, которые расположены рядом друг с другом, и все их содержимое будет помещено в три столбца. Вы можете добавить в свой код несколько классов «col» в зависимости от разнообразия платформ, которые будут использовать ваши пользователи. Не волнуйтесь, даже если вы не добавляете «col-lg» в свой код, а ваш пользователь использует настольную версию, программа просто посмотрит на последний важный элемент «col», который вы написали.

использование

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

Заключение

Это чрезвычайно простое руководство для системы сеток Bootstrap. Я настоятельно рекомендую вам проверить ссылки, предоставленные для получения более подробной документации и рекомендаций.

Лучшее преимущество использования начальной загрузки - это скорость, с которой можно создать красивый и отзывчивый дизайн. Это позволяет быстро создавать прототипы и иметь возможность работать с несколькими идеями, не создавая их с нуля. Удачного кодирования!