Руководство пользователя Отмена

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

  1. Руководство пользователя Dreamweaver
  2. Введение
    1. Основы гибкого веб-дизайна
    2. Новые возможности Dreamweaver
    3. Веб-разработка с помощью Dreamweaver: обзор
    4. Dreamweaver / распространенные вопросы
    5. Сочетания клавиш
    6. Системные требования Dreamweaver
    7. Обзор новых возможностей
  3. Dreamweaver и Creative Cloud
    1. Синхронизация настроек Dreamweaver с Creative Cloud
    2. Библиотеки Creative Cloud Libraries в Dreamweaver
    3. Использование файлов Photoshop в Dreamweaver
    4. Работа с Adobe Animate и Dreamweaver
    5. Извлечение файлов SVG, оптимизированных для Интернета, из библиотек
  4. Рабочие среды и представления Dreamweaver
    1. Рабочая среда Dreamweaver
    2. Оптимизация рабочей среды Dreamweaver для визуальной разработки
    3. Поиск файлов по названию или содержимому | Mac OS
  5. Настройка сайтов
    1. О сайтах Dreamweaver
    2. Настройка локальной версии сайта
    3. Подключение к серверу публикации
    4. Настройка тестового сервера
    5. Импорт и экспорт параметров сайта Dreamweaver
    6. Перенос существующих веб-сайтов с удаленного сервера в корневой каталог локального сайта
    7. Специальные возможности в Dreamweaver
    8. Дополнительные настройки
    9. Настройка установок сайта для передачи файлов
    10. Задание параметров прокси-сервера в Dreamweaver
    11. Синхронизация настроек Dreamweaver с Creative Cloud
    12. Использование Git в Dreamweaver
  6. Управление файлами
    1. Создание и открытие файлов
    2. Управление файлами и папками
    3. Получение файлов с сервера и размещение их на нем
    4. Возврат и извлечение файлов
    5. Синхронизация файлов
    6. Сравнение файлов
    7. Скрытие файлов и папок на сайте Dreamweaver
    8. Включение заметок разработчика для сайтов Dreamweaver
    9. Предотвращение использования уязвимости Gatekeeper
  7. Макет и оформление
    1. Использование средств визуализации для создания макета
    2. Об использовании CSS для создания макета страницы
    3. Создание динамичных веб-сайтов с помощью Bootstrap
    4. Создание и использование медиазапросов в Dreamweaver
    5. Представление содержимого в таблицах
    6. Цвета
    7. Гибкий дизайн с использованием «резиновых» макетов
    8. Extract в Dreamweaver
  8. CSS
    1. Общие сведения о каскадных таблицах стилей
    2. Создание макетов страниц с помощью конструктора CSS
    3. Использование препроцессоров CSS в Dreamweaver
    4. Установка настроек стиля CSS в Dreamweaver
    5. Перемещение правил CSS в Dreamweaver
    6. Преобразование встроенного CSS в правило CSS в Dreamweaver
    7. Работа с тегами div
    8. Применение градиентов к фону
    9. Создание и редактирование эффектов перехода CSS3 в Dreamweaver
    10. Форматирование кода
  9. Содержимое страницы и ресурсы
    1. Задание свойств страницы
    2. Задание свойств заголовка CSS и свойств ссылки CSS
    3. Работа с текстом
    4. Поиск и замена текста, тегов и атрибутов
    5. Панель DOM
    6. Редактирование в режиме интерактивного просмотра
    7. Кодировка документов в Dreamweaver
    8. Выбор и просмотр элементов в окне документа
    9. Задание свойств текста в инспекторе свойств
    10. Проверка орфографии на веб-странице
    11. Использование горизонтальных линеек в Dreamweaver
    12. Добавление и изменение сочетаний шрифтов в Adobe Dreamweaver
    13. Работа с ресурсами
    14. Вставка и обновление даты в Dreamweaver
    15. Создание и управление избранными ресурсами в Dreamweaver
    16. Вставка и редактирование изображений в Dreamweaver
    17. Добавление мультимедийных объектов
    18. Добавление видео Dreamweaver
    19. Добавление видео HTML5
    20. Вставка файлов SWF
    21. Добавление звуковых эффектов
    22. Добавление аудио HTML5 в Dreamweaver
    23. Работа с элементами библиотеки
    24. Использование текста на арабском языке и иврите в Dreamweaver
  10. Создание ссылок и навигация
    1. О создании ссылок и навигации
    2. Создание ссылок
    3. Карты ссылок
    4. Устранение неполадок со ссылками
  11. Графические элементы и эффекты jQuery
    1. Использование пользовательского интерфейса и графических элементов jQuery для мобильных устройств в Dreamweaver
    2. Использование эффектов jQuery в Dreamweaver
  12. Написание кода веб-сайтов
    1. О программировании в Dreamweaver
    2. Среда написания кода в Dreamweaver
    3. Настройка параметров написания кода
    4. Настройка цветового оформления кода
    5. Написание и редактирование кода
    6. Подсказки по коду и автозавершение кода
    7. Свертывание и развертывание кода
    8. Повторное использование фрагментов кода
    9. Анализ Linting для проверки кода
    10. Оптимизация кода
    11. Редактирование кода в представлении «Дизайн»
    12. Работа с содержимым заголовков для страниц
    13. Вставка серверных включений в Dreamweaver
    14. Использование библиотек тегов в Dreamweaver
    15. Импорт пользовательских тегов в Dreamweaver
    16. Использование вариантов поведения JavaScript (общие инструкции)
    17. Применение встроенных вариантов поведения JavaScript
    18. Сведения об XML и XSLT
    19. Выполнение XSL-преобразования на стороне сервера в Dreamweaver
    20. Выполнение XSL-преобразования на стороне клиента в Dreamweaver
    21. Добавление символьных сущностей для XSLT в Dreamweaver
    22. Форматирование кода
  13. Процессы взаимодействия продуктов
    1. Установка и использование расширений в Dreamweaver
    2. Обновления в Dreamweaver, устанавливаемые через приложение
    3. Вставить документы Microsoft Office в Dreamweaver (только для Windows)
    4. Работа с Fireworks и Dreamweaver
    5. Редактирование содержимого на сайтах Dreamweaver с помощью Contribute
    6. Интеграция Dreamweaver с Business Catalyst
    7. Создание персонализированных кампаний почтовой рассылки
  14. Шаблоны
    1. О шаблонах Dreamweaver
    2. Распознавание шаблонов и документов на их основе
    3. Создание шаблона Dreamweaver
    4. Создание редактируемых областей в шаблонах
    5. Создание повторяющихся областей и таблиц в Dreamweaver
    6. Использование дополнительных областей в шаблонах
    7. Определение редактируемых атрибутов тега в Dreamweaver
    8. Создание вложенных шаблонов в Dreamweaver
    9. Редактирование, обновление и удаление шаблонов
    10. Экспорт и импорт XML-содержимого в Dreamweaver
    11. Применение или удаление шаблона из существующего документа
    12. Редактирование содержимого в шаблонах Dreamweaver
    13. Правила синтаксиса для тегов шаблона в Dreamweaver
    14. Настройка предпочтений выделения для областей шаблона
    15. Преимущества использования шаблонов в Dreamweaver
  15. Мобильные и многоэкранные устройства
    1. Создание медиазапросов
    2. Изменение ориентации страницы для мобильных устройств
    3. Создание веб-приложений для мобильных устройств с помощью Dreamweaver
  16. Динамические сайты, страницы и веб-формы
    1. Общие сведения о веб-приложениях
    2. Настройка компьютера для разработки приложений
    3. Устранение неполадок подключений к базам данных
    4. Удаление сценариев подключения в Dreamweaver
    5. Дизайн динамических страниц
    6. Обзор динамических источников содержимого
    7. Определение источников динамического содержимого
    8. Добавление динамического содержимого на страницы
    9. Изменение динамического содержимого в Dreamweaver
    10. Отображение записей баз данных
    11. Введение интерактивных данных и устранение неполадок с ними в Dreamweaver
    12. Добавление заказных вариантов поведения сервера в Dreamweaver
    13. Создание форм с помощью Dreamweaver
    14. Использование форм для сбора информации от пользователей
    15. Создание и включение форм ColdFusion в Dreamweaver
    16. Создание веб-форм
    17. Расширенная поддержка HTML5 для компонентов формы
    18. Разработка формы с помощью Dreamweaver
  17. Визуальное построение приложений
    1. Создание главной страницы и страницы сведений в Dreamweaver
    2. Создание страниц поиска и результатов поиска
    3. Создание страницы для вставки записи
    4. Создание страницы обновления записи в Dreamweaver
    5. Создание страниц удаления записей в Dreamweaver
    6. Применение ASP-команд для изменения базы данных в Dreamweaver
    7. Создание страницы регистрации
    8. Создание страницы входа
    9. Создание страницы с доступом только для авторизованных пользователей
    10. Защита папок в ColdFusion с помощью Dreamweaver
    11. Использование компонентов ColdFusion в Dreamweaver
  18. Тестирование, просмотр и публикация веб-сайтов
    1. Предварительный просмотр страниц
    2. Предварительный просмотр веб-страниц Dreamweaver на нескольких устройствах
    3. Тестирование сайта Dreamweaver
  19. Устранение неполадок
    1. Исправленные ошибки
    2. Выявленные неполадки

 

 

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

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

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

Примечание.

На текущий момент поддерживаются версии Bootstrap 4.4.1 и 3.4.1.

Распространенные вопросы

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

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

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

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

«Bootstrap 3.4.1 включает адаптивную структуру сетки для мобильных устройств, которая должным образом масштабирует колонки (до 12) при увеличении размеров устройства или окна просмотра. Он включает предопределенные классы для простых макетов, а также эффективные миксины для создания семантически более сложных макетов». - Документация по Bootstrap.

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

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

Если требуется создать документ Bootstrap с нуля, см. описание в разделе Создание документов Bootstrap.

Можно ли перенести существующие документы с «резиновым» макетом в документы 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.
  • Если на сайте в папке site root/css отсутствует CSS-файл Bootstrap, то в разделе Управление сайтами > Дополнительные параметры > Bootstrap будет установлена версия Bootstrap 4.4.1.

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

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

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

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

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

  1. Выберите Файл > Создать.

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

  3. Нажмите кнопку Создать

    Будет создана HTML-страница на основе выбранного шаблона. Теперь можно изменять страницу путем добавления или удаления компонентов, а также редактирования текста и ресурсов по мере необходимости.

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

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

  1. Выберите Файл > Создать.

  2. В открывшемся диалоговом окне Создать документ выберите Создать документ > HTML, а затем нажмите на вкладку Bootstrap.

  3. Чтобы создать новый файл bootstrap.css (и другие файлы Bootstrap), выполните следующие действия:

    укажите, следует ли создать новый CSS-файл Bootstrap или использовать существующий CSS-файл.

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

    1. Нажмите Создать новый.

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

    2. (Необязательно) Если нужно прикрепить к документу любой другой CSS-файл, нажмите на значок  в разделе Присоединить CSS. Откроется диалоговое окно Присоединить внешнюю таблицу стилей. Укажите нужные параметры и нажмите ОК.

    3. Параметр «Включить готовый макет» позволяет получить готовую базовую структуру документа Bootstrap.

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

    4. (Необязательно) Макет по умолчанию содержит 12 столбцов с внутренним полем 30 пикс. Размеры экрана по умолчанию: 576, 768, 992 и 1200 пикс. 

      Если нужно изменить эти параметры, нажмите кнопку Настройка. Файл bootstrap.css будет изменен соответствующим образом.

      Примечание.

      Для Bootstrap версии 3.4.0 размеры экрана по умолчанию будут составлять 768, 992 и 1200 пикс.

    5. Выберите Использовать Extract для создания страницы на основе композиций Photoshop, если нужно открыть панель Extract (в том случае, если она закрыта). В этом случае можно начать извлечение ресурсов из композиций Photoshop прямо сейчас.

      По умолчанию новый сайт создается на основе Bootstrap версии 4.4.1. После создания документа в корневой папке сайта будут папки css и js. Однако, если вы хотите создать сайт с помощью Bootstrap версии 3.4.1, то выберите вариант Сайт > Управление сайтами. Выберите корневую папку сайта. Нажмите Дополнительные настройки > Bootstrap. В раскрывающемся списке Версия Bootstrap выберите 3.4.1. При использовании Bootstrap 3.4.1 в корневой папке сайта вы найдете папки css, js и fonts.

      Выберите Bootstrap версии 4.4.1
      Выберите Bootstrap версии 4.4.1

      При создании страницы Bootstrap 4.4.1 поддерживается jQuery версии 3.4.1. Начальные шаблоны Bootstrap обновлены до версии Bootstrap 4.4.1.

      При добавлении компонентов Bootstrap на страницу Bootstrap у вас есть возможность обновить страницы Bootstrap 4.0.0 до Bootstrap 4.4.1 и версию jQuery до 3.4.1. Нажмите Да в диалоговом окне, которое откроется при вставке компонентов Bootstrap на страницу.

      Диалоговое окно подтверждения совместимости версий
      Диалоговое окно подтверждения совместимости версий

      Диалоговое окно Bootstrap 3.4.1
      Диалоговое окно Bootstrap 3.4.1

      Всплывающее диалоговое окно jQuery
      Всплывающее диалоговое окно jQuery

      При импорте сайта Bootstrap 4.0.0 или при переносе сайта с предыдущих версий на следующую версию выпуска Dreamweaver версия Bootstrap получает значение 4.4.1 в разделе Настройка сайта > Дополнительные параметры > Bootstrap.

    Примечание.

    В Bootstrap 4.3.1 высота строки сетки со столбцом меняется c 1 до 0 пикс. Чтобы сделать его видимым в режиме интерактивного просмотра, необходимо добавить содержимое, опубликованное в строке сетки со столбцом.

  4. Чтобы использовать существующие файлы платформы Bootstrap, выполните следующие действия:

    1. Нажмите Использовать существующий и укажите путь к файлу bootstrap.css. Можно также перейти в папку, где сохранен CSS-файл.

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

    2. (Необязательно) Если нужно прикрепить к документу любой другой CSS-файл, нажмите на значок  в разделе Присоединить CSS. В диалоговом окне Присоединить внешнюю таблицу стилей укажите необходимые параметры и нажмите ОК.

    3. Параметр «Включить готовый макет» позволяет получить готовую базовую структуру документа Bootstrap. Если вы не хотите использовать базовую структуру и предпочитаете начать с пустого документа, снимите флажок Включить готовый макет.

  5. Нажмите кнопку Создать.

Примечание.

Создаваемый файл bootstrap.css доступен только для чтения. Таким образом, нельзя редактировать эти стили с помощью конструктора CSS; панель «Свойства» в конструкторе CSS в файлах Bootstrap отключена.

Если необходимо изменить стили в документе Bootstrap, создайте другой CSS-файл для переопределения существующих стилей, а затем присоедините его к документу.

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

Примечание.

Рекомендуется открывать и редактировать в Dreamweaver документы, созданные только в Bootstrap версии 3 и выше.

Открыть файлы 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">

Примечание.

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

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

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

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

Скрытие элементов Bootstrap в Dreamweaver
Скрытие элементов Bootstrap в Dreamweaver

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

Управление скрытыми элементами Bootstrap
Управление скрытыми элементами Bootstrap

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание.

Функция «Добавить строку/Добавить столбец» дублирует строку или столбец вместе с классами, но без содержимого.

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

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

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

Для изменения размера выберите требуемый столбец и перетащите находящийся справа маркер. Для документов с 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 версии 4.0.0: при смещении столбца добавляется класс offset-*-n, где «*» соответствует текущему медиазапросу (sm, md, lg или xl), а n — количеству занимаемых классом столбцов.

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

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

 Adobe

Получайте помощь быстрее и проще

Новый пользователь?