Перейти к основному содержанию

Использование фреймворка Bootstrap в CodeLobster PHP IDE

Давайте рассмотрим ту функциональность CodeLobster PHP IDE, которая обеспечивает программисту быструю интеграцию Bootstrap в свой проект и удобную последующую работу с ним.

Bootstrap - это HTML, CSS и JavaScript фреймворк, он предназначен исключительно для фронт-энд разработчиков.

Bootstrap предоставляет нам возможность повторно использовать уже готовый и хорошо оттестированный кроссбраузерный код.

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

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

Давайте рассмотрим ту функциональность CodeLobster PHP IDE, которая обеспечивает программисту быструю интеграцию Bootstrap в свой проект и удобную последующую работу с ним.

Установка Bootstrap с помощью CodeLobster IDE

Bootstrap предоставляет огромные возможности для профессионалов, а так же обеспечивает быстрый старт для новичков.

Профессиональная версия CodeLobster IDE имеет специальный плагин, который поможет вам развернуть новый проект на Bootstrap буквально за несколько минут.

Для начала запустите IDE, перейдите в главное меню "Project" -> "Create Project" и создайте обычный проект.

После этого запускаем мастер установки Bootstrap "Plugins" -> "Bootstrap" -> "Download Framework".

CodeLobster

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

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

Создадим новый файл "index.html" и для добавления фреймворка в свой HTML-шаблон подключим к созданному документу несколько файлов:

  • bootstrap.min.css - содержит все необходимые для работы CSS-стили;
  • jquery.min.js - всем известная библиотека jQuery, используется для работы JS-скриптов, её так же можно скачать и добавить в папку проекта прямо из среды IDE;
  • bootstrap.min.js - содержит JavaScript для функционирования интерактивных элементов на WEB-странице.

В конце-концов "index.html" должен содержать следующий код:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Using Bootstrap in CodeLobster IDE</title>
    <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
  </head>
  <body>

  </body>
</html>

CSS классы в Bootstrap

Классы в Bootstrap обладают огромной мощностью, есть строгая система наименований селекторов и при написании стилей учитывается практически любой аспект отображения элементов.

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

Введите следующие несколько строк в редакторе, добавьте параграф и ссылку в тег "body" нашего шаблона:

<p>
  <a class="btn btn-primary" href="#" role="button">
    Link button
  </a>
</p>

CodeLobster IDE прекрасно разбирается в исходном коде фреймворка, предлагая автокомплит по всем возможным классам.

CodeLobster

Для получения быстрой подсказки по доступным классам, начните вводить значение атрибута и жмите Ctrl + Space, после чего просто выбирайте нужный класс из выпадающего списка.

В этом примере мы превратили обычную ссылку в кнопку и применили сразу два класса. Класс "btn" определяет общие стили для всех кнопок, а такие классы как, например, "btn-primary", "btn-success", "btn-danger" и другие, определяют цвета.

CodeLobster

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

В зависимости от того, с каким кодом вы работаете, IDE автоматически подбирает ссылки на релевантную документацию.

CodeLobster

Загляните во вкладку "Dynamic Help" на правой панели программы, в данном случае достаточно кликнуть по ссылке, чтобы обратиться к официальной документации и получить исчерпывающую информацию о классе "btn-primary" в Bootstrap.

JavaScript в Bootstrap

Скрипты в Bootstrap представлены набором jQuery плагинов и имеют вспомогательное значение, так как основная функциональность реализуется на чистом CSS.

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

Чтобы начать использовать JavaScript-функции, достаточно добавить к HTML элементам специальные атрибуты и классы.

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

<div class="collapse show" id="collapsible">
  <div class="card card-body" 
     Content of collapsible element.
  </div>
</div>

К этому DIV-блоку мы добавили ещё и класс "show" для того, чтобы элемент по умолчанию отображался в раскрытом состоянии.

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

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapsible" role="button">
    Link button
  </a>
</p>

Применим так называемые data-атрибуты. Добавляем к кнопке атрибут "data-toggle" со значением "collapse", а с помощью атрибута "href" указываем ID целевого тега.

Так, с помощью простой HTML-разметки и не углубляясь в JavaScript-программирование, мы можем добавить интерактивные элементы на страницы своего сайта. И теперь, нажимая на кнопку, скрывать и показывать содержимое блока.

CodeLobster

Контролировать элемент "#collapsible" вы можете с помощью обычного JavaScript API, например, вызывая следующие функции в обработчике событий на странице:

$('#collapsible').collapse('show'); //Раскрыть элемент
$('#collapsible').collapse('hide'); //Скрыть элемент
$('#collapsible').collapse('toggle'); //Изменить видимость элемента на противоположную

Чтобы обработать нажатие кнопки в нашем документе, достаточно набрать в редакторе:

<script>
  $(document).ready(function() {
    $('a.btn').on('click', function() {
      $(this).toggleClass('btn-danger');
    });
  });
</script>

CodeLobster превращает работу с JavaScript в приятное занятие, вы можете использовать автокомплит для всех классов Bootstrap даже в jQuery селекторах:

CodeLobster

Как видно, все задачи решаются с помощью пяти строчек кода, если добавить этот сниппет на страницу, кнопка будет менять цвет при каждом клике на ней и всегда будет красной, когда "#collapsible" элемент в закрытом состоянии.

Настройка фреймворка под собственные нужды

Некоторые разработчики заметили, что использование Bootstrap приведёт к тому, что все ваши сайты будут выглядеть одинаково.

Но это верно только для тех, кто не знает HTML и CSS.

Bootstrap не был бы столь популярным инструментом, если бы не было способов приспособить его к своим собственным нуждам и даже нарастить функциональность в соответствии с требованиями текущего проекта.

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

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

SASS - это специальный препроцессор для SCSS-файлов, их синтаксис немного напоминает JS и CSS, а логика работы такая же, как у шаблонизатора.

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

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

Также есть удобная возможность ввести математические операторы для генерации CSS кода и рассчитывать значения динамически, исходя из заранее определённых базовых величин. Например, переводить пиксельные значения в процентные.

Начать изучение SASS-части Bootstrap можно с двух самых интересных файлов.

"scss/bootstrap.scss" - в этом файле производится импорт всех компонентов фреймворка, скопировав нужные директивы в свой собственный исходный файл или просто закомментировав некоторые строки прямо в данном файле вы выбираете компоненты с которыми будете работать.

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

Чтобы импортировать весь Bootstrap достаточно использовать такую директиву @import в своём собственном scss-файле:

@import "scss/bootstrap";

Следующий файл "scss/_variables.scss" - содержит переменные, изменяя которые можно настроить различные глобальные значения стилей: цвета, отступы, тени, градиенты и прочие.

К примеру, так включается использование градиентов:

$enable-gradients:true;

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

Такой миксин сгенерирует CSS код для кнопки с любой комбинацией цветов, установленных по вашему выбору:

.my-custom-button {
  @include button-variant(#20cece, #000000, #3127be);
}
CodeLobster

Вы можете легко редактировать scss-файлы непосредственно в CodeLobster - синтаксис SASS поддерживается полностью, работает автодополнение и система помощи.

Конечный файл генерируется с помощью простой команды, выполненной в терминале:

sass myCustom.scss myCustom.css

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

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

Подведём итог

Bootstrap был создан несколькими программистами из команды Twitter. Вскоре они осознали его огромный потенциал и Bootstrap превратился в проект с открытым исходным кодом.

Особое внимание при разработке уделено доступности WEB-контента, адаптивности и совместимости различных браузеров и платформ.

В CodeLobster IDE изначально существует отличная поддержка программирования на чистом HTML, CSS и JavaScript.

А полноценно реализованное взаимодействие с Bootstrap ещё больше расширяет ваши возможности. Вам будет удобно работать на всех этапах создания UI, от разработки макета до тестирования интерфейса.

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

Бизнесу нужно, чтобы проект стартовал как можно скорее и Bootstrap прекрасно решает эту задачу.

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