Создание динамичных веб-сайтов с помощью Bootstrap

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

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

Я использую «резиновые» макеты в Dreamweaver. Как начать работу с Bootstrap?

При создании документов с «резиновым» макетом Dreamweaver обеспечивает динамичность веб-страниц, автоматически применяя соответствующие классы. Вам достаточно сосредоточиться на своем содержимом и решить, как оно будет перекомпоновываться при отображении в различных форм-факторах.

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

В настоящее время Dreamweaver поддерживает версии Bootstrap 3.4.1, 4.4.1 и 5.3.8.

• Bootstrap 3.4.1 включает адаптивную структуру сетки для мобильных устройств, которая должным образом масштабирует столбцы (до 12) при увеличении размеров устройства или окна просмотра. Эта версия включает предопределенные классы для простых макетов, а также эффективные миксины для создания семантически более сложных макетов. См. документацию по Bootstrap.
• Претерпев существенные изменения, Bootstrap 4.4.1 включает эффективную сетку Flexbox для создания макетов любых форм и масштабов для мобильных устройств. В вашем распоряжении структура из двенадцати столбцов, пять адаптивных уровней, переменные и миксины Sass, а также десятки предопределенных классов. См. документацию по Bootstrap.
• Bootstrap 5.3.8 представляет улучшенные CSS-переменные для более простой настройки, расширенные цветовые режимы, включая поддержку темного режима, улучшенную систему сетки с обновленными утилитами и удаление зависимости от jQuery для более чистой, быстрой и современной веб-разработки. См. документацию по Bootstrap.

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

Можно ли перенести существующие документы с «резиновым» макетом в документы Bootstrap в Dreamweaver?

Нет, прямого способа преобразования существующих документов с «резиновым» макетом в документы Bootstrap не существует. Тем не менее работа пользователя Dreamweaver при создании и разработке документов Bootstrap аналогична работе с документами с «резиновыми» макетами. Например, можно приступить к созданию документа Bootstrap непосредственно в диалоговом окне Создать документ. Создание документов с «резиновым» макетом для трех основных формфакторов (мобильный телефон, планшет и ПК) для Bootstrap начинается с создания документа для основных размеров экрана: малого, среднего, большого, очень большого и сверхбольшого. Параметры редактирования макета, отображаемые при выборе элементов документов Bootstrap, также аналогичны применяемым для документов с «резиновыми» макетами.

Можно ли импортировать старые сайты в последнюю версию Dreamweaver?

Да, вы можете импортировать старые сайты в последнюю версию Dreamweaver. При этом Dreamweaver ищет CSS-файл Bootstrap в папке site root/css/. 

• Если на сайте присутствует CSS-файл Bootstrap v3, то версия Bootstrap в разделе Управление сайтами > Дополнительные параметры > Bootstrap будет установлена в значение 3.4.1.
• Если на сайте присутствует CSS-файл Bootstrap v4, то версия Bootstrap в разделе Управление сайтами > Дополнительные параметры > Bootstrap будет установлена в значение 4.4.1.
• Если на сайте присутствует CSS-файл Bootstrap v4, то для версии Bootstrap в разделе Управление сайтами > Дополнительные параметры > Bootstrap будет установлено значение 5.3.8.
• Если на сайте в папке site root/css отсутствует CSS-файл Bootstrap, то в разделе Управление сайтами > Дополнительные параметры > Bootstrap будет установлена версия Bootstrap 5.3.8.

Создание документов Bootstrap

Разработку веб-сайта Bootstrap можно начать, выбрав один из следующих вариантов в диалоговом окне Создать документ:

• Начальные шаблоны Bootstrap (Начальные шаблоны > Шаблоны Bootstrap) — используйте этот вариант, если хотите быстро начать работу, не занимаясь созданием макетов страниц с нуля. Просто отредактируйте текст, при необходимости замените ресурсы, и вы получите динамичный веб-сайт, готовый к работе. См. раздел Использование начальных шаблонов Bootstrap для получения дополнительных сведений.
• Создать HTML-документ на базе платформы Bootstrap (Создать документ > HTML > Bootstrap): используйте этот вариант, если хотите построить веб-сайт шаг за шагом, используя компоненты CSS и Bootstrap, доступные в Dreamweaver. Дополнительную информацию см. в разделе Создание HTML-документов на базе платформы Bootstrap.
  

Использование начальных шаблонов Bootstrap

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

Создание HTML-документов на базе платформы Bootstrap

Разработку динамичного веб-сайта можно начать с создания HTML-документа на платформе Bootstrap. Можно либо создать новый набор файлов платформы Bootstrap, либо использовать уже существующие файлы. После создания документа можно добавлять компоненты Bootstrap, например аккордеоны и карусели, используя панель «Вставка» в Dreamweaver. А если у вас есть файлы Photoshop, используйте функцию Extract, чтобы добавлять в документ Bootstrap изображения, шрифты, стили, текст и многое другое.

Открытие файлов Bootstrap

Открыть файлы Bootstrap можно одним из следующих способов:

• Выберите Файл > Открыть и перейдите к HTML-файлу Bootstrap.
• (Рекомендуется) Создайте сайт в Dreamweaver и выберите в качестве папки сайта папку, содержащую все необходимые файлы Bootstrap.

При открытии HTML-файла Bootstrap в Dreamweaver происходит следующее:

• Строки выделяются серыми пунктирными линиями со скругленными углами.
• Столбцы выделяются синими пунктирными линиями.

Dreamweaver распознает файлы CSS, связанные с имеющимися HTML-файлами Bootstrap, если имя файла CSS содержит слово bootstrap. Ссылка на CSS-файл может быть представлена следующими способами:

• Локальный путь:

  свернутый или развернутый CSS-файл, доступный локально. Например:

  <link href="css/bootstrap.css" rel="stylesheet"> или
  <link href="css/bootstrap.min.css" rel="stylesheet">

• Удаленный путь:

Свернутый или развернутый CSS-файл, доступный удаленно. Например:

<link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
<link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">

• CDN

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_version_number>/css/bootstrap.min.css" rel="stylesheet">

Скрытие и показ элементов Bootstrap и управление скрытыми элементами

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

Чтобы скрыть элемент Bootstrap, нажмите на его правой кнопкой мыши и выберите «Скрыть элемент». Элемент будет временно скрыт в представлении.

Для просмотра и отображения скрытых элементов нажмите правую кнопку мыши и выберите «Управление скрытыми элементами». Скрытые элементы отображаются на сером заштрихованном фоне. Нажмите на значок глаза, чтобы отобразить элемент.

Добавление компонентов Bootstrap

Параметр «Компоненты Bootstrap» на панели Вставка содержит список всех компонентов Bootstrap, которые можно добавить на веб-страницу в Dreamweaver. В зависимости от версии Bootstrap в файле bootstrap.css, подключенном к странице HTML, соответствующие компоненты будут представлены на панели Вставка.  Например, в Bootstrap версии 4.0.0 отображаются такие дополнительные компоненты, как карты и значки. Аналогично, такие компоненты, как значки-глифы, панель, колодцы и миниатюры, доступны только в версии Bootstrap 3.3.7. В зависимости от версии Bootstrap, вы увидите соответствующие компоненты в панели Вставка. Компонент Spinners также доступен только в Bootstrap версии 4.4.1.

Заполнение компонентов на панели Вставка происходит на основе следующих критериев:

• В версии Bootstrap 5.3.8 вы получаете доступ к новым и улучшенным компонентам, таким как offcanvas, модальное окно, тосты, отслеживание прокрутки и плавающие метки. Некоторые старые компоненты, такие как Jumbotron и медиа-объект, были удалены или заменены обновленными подходами на основе утилит. Панель Вставка динамически отражает эти изменения на основе подключенной платформы Bootstrap 5.3.8.
• Документ находится в фокусе: компоненты на панели «Вставка» заполняются в зависимости от версии Bootstrap в файле Bootstrap, привязанном к документу. 
• «Версия» в настройках сайта: для документов, не являющихся Bootstrap, Dreamweaver ищет номер версии в разделе Настройки сайта > Дополнительно > Bootstrap. В зависимости от версии выполняется заполнение соответствующими компонентами. По умолчанию для новых сайтов используется версия 5.3.8.
• Путь сохранения файлов: для документа, не являющегося Bootstrap и не относящегося ни к одному сайту, на панели «Вставка» будут показаны компоненты версии 4.4.1.

Чтобы добавить компонент, перетащите его из панели на свою веб-страницу. При перетаскивании компонента обратите внимание на визуальные подсказки, например интерактивные направляющие, подсказки точной вставки (при использовании DOM) и помощника по выбору положения. Используйте эти средства для быстрого и точного размещения компонентов на странице. Дополнительные сведения о вставке элементов на веб-страницу см. в разделе Обзор панели «Вставка».

Добавление строк

Выберите строку, после которой требуется добавить новую строку. Затем нажмите на значок «Добавить новую строку». Будут добавлены строка Bootstrap и два дочерних элемента с шестью столбцами в каждом.

Код для добавленной строки выглядит следующим образом:

<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>

где «*» соответствует текущему размеру экрана в Dreamweaver.

Добавление столбцов

Выберите требуемый столбец и нажмите на значок «Добавить новый столбец». Выбранный столбец будет скопирован без дочерних элементов.

Всем пустым столбцам назначается минимальная высота 20 пикс. Тем не менее она фактически не добавляется на страницу. Она отображается только в интерактивном просмотре для упрощения вставки элементов в столбцы.

Повторяющиеся строки и столбцы

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

Изменение размера и смещение столбцов

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

Изменение размера столбцов

Для документов с версией Bootstrap 5.3.8: при изменении размера столбца класс col-*-n добавляется таким же образом, где «*» соответствует текущему медиазапросу (sm, md, lg, xl или xxl), а «n» — количеству занимаемых элементом столбцов. Новая контрольная точка xxl обеспечивает лучший контроль макета для очень больших экранов. Кроме того, вы можете использовать колонки с автоматической компоновкой (например, col или col-md-auto), которые автоматически изменяют размер в зависимости от контента без указания фиксированного числа колонок.

Для изменения размера выберите требуемый столбец и перетащите находящийся справа маркер. Для документов с Bootstrap версии 4.0.0: при изменении размера столбца добавляется класс col-*-n, где «*» соответствует текущему медиазапросу (xsm, md, ld, xl), а «n» — количеству занимаемых классом столбцов. Для размера экрана Очень маленький будет добавлен класс col-n.

Для документов с Bootstrap версии 3.3.7: при изменении размера столбца добавляется класс col-*-n, где «*» соответствует текущему медиазапросу (xs, sm, md или lg), а n — количеству занимаемых классом столбцов.

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

Смещение столбцов

Для документов с версией Bootstrap 5.3.8: при смещении столбца добавляется класс offset-*-n, где «*» соответствует текущему медиазапросу (sm, md, lg, xl или xxl), а «n» — количеству столбцов, на которое смещается элемент. Bootstrap 5 также позволяет выполнять выравнивание с помощью служебных классов отступов (например, ms-auto или me-auto) для более гибких и адаптивных макетов.

Чтобы сместить столбец, выберите требуемый столбец и перетащите находящийся слева маркер. Смещение отображается как заштрихованная область. Для документов с Bootstrap версии 4.0.0: при смещении столбца добавляется класс offset-*-n, где «*» соответствует текущему медиазапросу (sm, md, lg или xl), а n — количеству занимаемых классом столбцов.

Для документов с Bootstrap версии 3.3.7: при смещении столбца добавляется класс col-*-offset-n, где «*» соответствует текущему медиазапросу (xs, sm, md или lg), а n — количеству столбцов, на которое происходит сдвиг.

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