Учебное пособие СанктПетербург 2015 министерство образования и науки российской федерации университет итмо
 Скачать 0.7 Mb.
|
Ф.А. Перепелица Эффективная разработка веб-сайтов. Bootstrap Учебное пособие Санкт–Петербург 2015 МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ УНИВЕРСИТЕТ ИТМО Ф.А. Перепелица ЭФФЕКТИВНАЯ РАЗРАБОТКА ВЕБ-САЙТОВ. BOOTSTRAP Учебное пособие Санкт-Петербург 2015 Перепелица Ф.А. Эффективная разработка веб‐сайтов. Bootstrap. – СПб: Университет ИТМО, 2015.– 71 с. Учебное пособие предназначено как для начинающих разработчиков, так и для специалистов, уже занимающихся разработкой Web‐сайтов. В курсе «Эффективная разработка веб‐сайтов. Bootstrap» подробно рассмотрена работа с фреймворком Bootstrap. Bootstrap на данный момент является самым распространенным фреймворком для проектирования веб‐ приложений. Он пользуются популярностью не только у разработчиков сайтов, но и у заказчиков, которые убедившись в его надежности, отдают ему предпочтение при создании новых проектов. Разработчики оценили скорость веб‐разработки, которая значительно увеличивается при использовании Bootstrap, так как большинство элементов, которые требуются при создании веб‐приложений, уже готовы и адаптированы для различных браузеров. Учебное пособие используется при изучении дисциплины «Языки разработки приложений для Web» магистерских программ «Web‐технологии» и «Компьютерная графика и Web‐дизайн» в рамках направления подготовки 09.04.02 «Информационные системы и технологии». Пособие предназначено для тех учащихся, которые не имеют доступ к специальным учебным файлам (ресурсам), размещенным в аудиториях Университета ИТМО или в центре дистанционного обучения Академии методов и техники управления (ЛИМТУ) — de.ifmo‐online.ru Рекомендовано к печати Ученым советом ЛИМТУ, 27 мая 2015, протокол №5/2015 Университет ИТМО – ведущий вуз России в области информационных и фотонных технологий, один из немногих российских вузов, получивших в 2009 году статус национального исследовательского университета. С 2013 года Университет ИТМО – участник программы повышения конкурентоспособности российских университетов среди ведущих мировых научно-образовательных центров, известной как проект «5 в 100». Цель Университета ИТМО – становление исследовательского университета мирового уровня, предпринимательского по типу, ориентированного на интернационализацию всех направлений деятельности. Университет ИТМО, 2015 Перепелица Ф.А.,2015 3 Тема 1. Введение Bootstrap ......................................................................... 7 О курсе .............................................................................................................. 7 Начало работы ................................................................................................. 7 Поддержка браузеров и мобильных устройств ............................................ 9 Поддерживаемые браузеры ................................................................................. 9 Тема 2. Модульная сетка ........................................................................... 10 Первоначальные настройки ..........................................................................10 HTML5 .................................................................................................................... 10 Первая мобильная версия ................................................................................... 10 Шрифты и ссылки ................................................................................................. 10 Сброс настроек ..................................................................................................... 11 Контейнеры ........................................................................................................... 11 Модульная сетка ............................................................................................11 Медиа запросы ..................................................................................................... 11 Варианты сетки ..................................................................................................... 12 Средняя сетка ....................................................................................................... 12 Сетка для мобильных устройств и компьютеров ............................................... 14 Сетка для мобильных устройств, планшетов и компьютеров ........................... 14 Перенос модулей ................................................................................................. 15 Отступы модулей .................................................................................................. 15 Вложенные модули .............................................................................................. 16 Порядок расположения модулей ........................................................................ 16 Управление просмотром модулей ...................................................................... 17 Управление печатью модулей ............................................................................. 17 Практические задания к теме 2 ....................................................................19 Практическое задание 2.1 Создание фиксированной модульной сетки ......... 19 Практическое задание 2.2 Создание сетки для мобильных устройств ............ 20 Практическое задание 2.3 Создание сетки с отступами .................................... 21 Практическое задание 2.4 Работа с порядком расположения модулей .......... 22 Самостоятельные задания к теме 2 ..............................................................24 Самостоятельное задание 2.1 Создание резиновой модульной сетки ............ 24 Самостоятельное задание 2.2 Создание резиновой модульной сетки ............ 24 Тема 3. Текст, код, таблица ........................................................................ 25 Работа с текстом .............................................................................................25 Использование строчных элементов .................................................................. 25 Заголовки .............................................................................................................. 25 4 Выравнивание текста ........................................................................................... 26 Трансформация текста ......................................................................................... 26 Аббревиатура и акроним ..................................................................................... 26 Адреса ................................................................................................................... 26 Цитаты ................................................................................................................... 27 Списки ................................................................................................................... 27 Оформление кода в тексте ........................................................................... 28 Таблицы ......................................................................................................... 29 Базовая таблица ................................................................................................... 29 Таблица с выделенными строками .................................................................... 29 Таблица с границами ........................................................................................... 29 Динамическое выделение строк ........................................................................ 29 Оформление строк таблиц .................................................................................. 30 Адаптивная таблица. ............................................................................................ 30 Практические задания к теме 3 ................................................................... 32 Практическое задание 3.1 Работа со строчными элементами ......................... 32 Практическое задание 3.2 Работа с заголовками .............................................. 32 Самостоятельные задания к теме 3 ............................................................. 34 Самостоятельное задание 3.1 Работа с текстом ................................................ 34 Самостоятельное задание 3.2 Создание таблицы ............................................. 34 Тема 4. Формы, кнопки, изображения ...................................................... 35 Формы ............................................................................................................ 35 Базовые настройки .............................................................................................. 35 Встроенная форма ............................................................................................... 35 Горизонтальные формы ...................................................................................... 36 Поддерживаемые элементы управления .......................................................... 36 Элементы уведомлений ...................................................................................... 37 Размеры элементов форм ................................................................................... 39 Дополнительный текст ........................................................................................ 39 Кнопки ............................................................................................................ 40 Типы кнопок ......................................................................................................... 40 Размеры кнопок ................................................................................................... 40 Активная кнопка ................................................................................................... 41 Кнопки, как ссылки .............................................................................................. 41 Изображения ................................................................................................. 41 Практические задания к теме 4 ................................................................... 43 Практическое задание 4.1 Стандартная и встроенная форма .......................... 43 Эффективная разработка веб‐сайтов. Bootstrap 5 Практическое задание 4.2 Элементы формы ..................................................... 44 Практическое задание 4.3 Создание элементов уведомлений ........................ 45 Практическое задание 4.4 Создание элементов уведомлений ........................ 46 Практическое задание 4.5 Работа с изображениями ........................................ 47 Тема 5. Компоненты ................................................................................... 48 Выпадающее меню ........................................................................................48 Кнопки .............................................................................................................49 Группировка кнопок ............................................................................................. 49 Размеры групп кнопок ......................................................................................... 49 Группы кнопок с выпадающим меню ................................................................. 50 Элементы формы ...........................................................................................51 Добавление текста к элементу ввода ................................................................. 51 Добавление кнопок к элементу ввода ................................................................ 51 Кнопки навигации ..........................................................................................52 Вкладки ................................................................................................................. 52 Кнопки ................................................................................................................... 53 Панели навигации ..........................................................................................53 Элементы ввода и кнопки в панели навигации ................................................. 53 Текст и ссылки в панели навигации .................................................................... 54 Привязка панели навигации к верхней или нижней части страницы. ............. 54 Статичная панель навигации в верхней части страницы ................................... 55 Инвертирование оформления навигации .......................................................... 55 Цепочка навигации ........................................................................................55 Навигация по страницам ...............................................................................55 Последовательная навигация по страницам ...............................................56 Метки ..............................................................................................................56 Значки .............................................................................................................57 Миниатюры ....................................................................................................57 Оповещения ...................................................................................................59 Индикаторы состояния ..................................................................................59 Объекты мультимедиа ..................................................................................60 Группы списков ..............................................................................................61 Панели ............................................................................................................62 Стандартная панель ............................................................................................. 62 Панели с заголовком ............................................................................................ 62 Оформление панелей .......................................................................................... 62 6 Практические задания к теме 5 ................................................................... 64 Практическое задание 5.1 Работа с группой кнопок ......................................... 64 Практическое задание 5.2 Работа с элементами формы .................................. 65 Практическое задание 5.3 Работа с панелью навигации .................................. 67 Практическое задание 5.4 Работа с миниатюрами ........................................... 68 Практическое задание 5.5 Создание групп списков .......................................... 69 Самостоятельные задания к теме 5 ............................................................. 71 Самостоятельное задание 5.1 Создание выпадающего меню ......................... 71 Самостоятельное задание 5.2 Создание выпадающего меню ......................... 71 Самостоятельное задание 5.3 Создание оповещения и индкаторов .............. 71 Самостоятельное задание 5.4 Создание панелей ............................................. 71 Эффективная разработка веб‐сайтов. Bootstrap 7 Тема 1. Введение Bootstrap О курсе В курсе «Эффективная разработка веб‐сайтов. Bootstrap» подробно рассмотрена работа с фреймворком Bootstrap. Bootstrap на данный момент является самым распространённым и уважаемым фреймворком для проектирования веб‐ приложений. Он пользуется популярностью не только у разработчиков сайтов, но и у заказчиков, которые, убедившись в его надёжности, отдают предпочтение данному фреймворку при создании новых проектов. Скорость веб‐разработки значительно увеличивается при использовании Bootstrap, так как большинство элементов, которые требуются при создании веб‐приложений, уже готовы и адаптированы для разных браузеров и типов устройств и остаётся лишь задать нужный класс. Элементы Bootstrap можно грубо разделить на два типа. К первому типу следует отнести модульную сетку, а ко второму разнообразные составляющие веб‐ приложений, такие как кнопки или выпадающие меню. 12‐ти колоночная модульная сетка, основа Bootstrap, используя её можно строить надёжные адаптивные веб‐страницы, подходящие для любого типа задач. Данный курс состоит из 5 тем. Первая тема «Введение Bootstrap», которую вы сейчас читаете, описывает некоторые особенности работы с Bootstrap, а также рассказывает, как начать работать с Bootstrap. Тема «Модульная сетка» объясняет, как работает модульная сетка Bootstrap и как её настраивать. Так же рассматривается сетка для мобильных устройств, планшетов и компьютеров. В третьей теме «Текст, код, таблица» рассматривается создание стандартных заголовков, различная трансформация текста, создание списков и оформление кода в тексте. Большое внимание в теме уделено оформлению различных составляющих таблицы. В четвертой теме «Формы, кнопки, изображения» описывается создание и оформление различных элементов форм, элементов уведомлений, дополнительного текста, кнопок и изображений. В пятой теме «Компоненты» рассматриваются составляющие веб‐страницы, такие как выпадающие меню, группы кнопок, панели и кнопки навигации, группы списков и другие элементы. Начало работы Для начала работы с Bootstrap следует скачать файлы, составляющие библиотеку и разобраться в их структуре. Скачать последнюю версию Bootstrap, на момент написания пособия 3.2.0, можно по ссылке ‐ https://github.com/twbs/bootstrap/releases/download/v3.2.0/bootstrap‐3.2.0‐ dist.zip . После извлечения файлов из скаченного архива можно увидеть Тема 1. Начало работы в AutoCAD 8 следующую структуру файлов: bootstrap‐3.2.0‐dist/ └── css/ │ └── bootstrap.css │ └── bootstrap.min.css │ └── bootstrap‐theme.css │ └── bootstrap‐theme.min.css │ └── bootstrap‐theme.css.map │ └── bootstrap.css.map └── js/ │ └── bootstrap.js │ └── bootstrap.min.js └── fonts/ └── glyphicons‐halflings‐regular.eot └── glyphicons‐halflings‐regular.svg └── glyphicons‐halflings‐regular.ttf └── glyphicons‐halflings‐regular.woff Рассмотрим, для чего предназначены файлы Bootstrap: bootstrap.css – основной файл Bootstrap, определяющий css оформление элементов библиотеки; bootstrap.min.css – содержит те же стилевые описания, что и предыдущий файл, но сжат для быстрой загрузки; bootstrap‐theme.css – файл переопределяет стандартное стилевое оформление элементов Bootstrap, можно использовать, как частичную замену bootstrap.css; bootstrap‐theme.min.css ‐ содержит те же стилевые описания, что и предыдущий файл, но сжат для быстрой загрузки; bootstrap‐theme.css.map – позволяет работать с файлами тем, так будто они не были сжаты; bootstrap.css.map – позволяет работать с файлом bootstrap.min.css, так будто он не был сжат; bootstrap.js – файл, отвечающий за динамические возможности библиотеки; bootstrap.min.js – сжатый файл bootstrap.js; glyphicons‐halflings‐regular.eot ‐ в данном файле находятся векторные иконки библиотеки для браузера Internet Explorer; glyphicons‐halflings‐regular.svg – в данном файле находятся те же шрифты и иконки, что в предыдущем, но в формате векторной графики svg; glyphicons‐halflings‐regular.ttf – стандартный файл шрифтов; glyphicons‐halflings‐regular.woff – сжатый файл шрифтов. Эффективная разработка веб‐сайтов. Bootstrap 9 Для начала работы следует подключить bootstrap.css и bootstrap.js или сжатые альтернативные файлы. Так же для полноценной работы библиотеки следует подключить JQuery. Примерно так должен выглядеть начальный документ, основанный на Bootstrap: Тема 2. Модульная сетка 10 Тема 2. Модульная сетка Первоначальные настройки HTML5 Bootstrap использует HTML‐элементы и CSS‐свойства, которые требуют HTML5 doctype. Первая мобильная версия Bootstrap 3 был переписан с нуля для корректной работы в мобильной среде. Были добавлены оптимизированные стили для основных возможностей Bootstrap и полноценной их работе на мобильных устройствах. Для поддержки мобильной среды используется специальный META тег viewport. Мета тег viewport используется для установки ширины и начального масштаба для окна просмотра на мобильных устройствах. В этом примере мы говорим браузеру, что ширина области просмотра равняется ширине экрана этого устройства. Так же используя свойство initial‐scale=1.0 можно задать масштаб отображения: Чаще всего для мобильных устройств используют следующую запись: maximum‐scale=1.0, user‐scalable=no"> В этом случае страницей задаётся ширина устройства, на котором она открыта, запрещается масштабирование и мобильная веб‐страница функционирует, как мобильное приложение. Шрифты и ссылки Так же начальные настройки включают в себя следующие параметры шрифтов и ссылок: Удалён отступ margin элемента body Установлен белый цвет фона background‐color: white; для body Используются атрибуты @baseFontFamily, @baseFontSize и @baseLineHeight как основные Настроен основной цвет ссылки с помощью @linkColor и применяется Эффективная разработка веб‐сайтов. Bootstrap 11 подчёркивание только для селектора :hover Сброс настроек Для лучшего контроля за работой Bootstrap производится сброс настроек с помощь Normalize.css. Контейнеры Для работы с Bootstrap следует оборачивать всю страницу в один из двух контейнеров. Первый предназначен для работы с фиксированной шириной: Для работы с контейнером, подстраивающимся под всю ширину экрана устройства, используется контейнер container‐fluid: Модульная сетка Bootstrap включает в себя изменяемую, адаптированную под мобильные устройства, масштабируемую до 12 колонок, модульную сетку, которая может подстраиваться под область просмотра. Модульная сетка используется для создания макета страниц с помощью строк и столбцов, в которой можно размещать содержимое. Основные правила работы модульной сетки: Строки должны быть размещены внутри фиксированного контейнера (container) или резинового контейнера (container‐fluid) для правильного выравнивания и заполнения. Для создания горизонтальных групп столбцов используются строки (row). Расстояния между колонками задаются с помощью padding. Столбцы в модульной сетке создаются с указанием всех 12 доступных столбцов Если разместить более 12 колонок в одной строке, то каждая группа дополнительных столбцов будет единым целым переноситься на новую строку. Медиа запросы Для определения основных параметров сетки можно использовать медиа запросы Less. Для небольших устройств и планшетов с экраном до 768px: Тема 2. Модульная сетка 12 @media (min‐width: @screen‐sm‐min) { ... } Для средних экранов 992px и выше @media (min‐width: @screen‐md‐min) { ... } Для больших экранов 1200px и выше: @media (min‐width: @screen‐lg‐min) { ... } Так же в эти медиа запросы можно включать max‐width, чтобы ограничить CSS для более узкого набора устройств. @media (max‐width: @screen‐xs‐max) { ... } @media (min‐width: @screen‐sm‐min) and (max‐width: @screen‐sm‐max) { ... } @media (min‐width: @screen‐md‐min) and (max‐width: @screen‐md‐max) { ... } @media (min‐width: @screen‐lg‐min) { ... } Варианты сетки В таблице 2.1 показаны начальные настройки сетки для разных устройств. Таблица 2.1 Настройки модульной сетки Очень маленькие устройства Телефоны (<768px) Маленькие устройства Планшеты (≥768px) Средние устройства Компьютеры (≥992px) Большие устройства Компьютеры (≥1200px) Поведение сетки Всегда горизонтальная Сначала сжатая, горизонтальная над контрольной точкой Ширина контейнера Нет (авто) 750px 970px 1170px Префикс класса .col‐xs‐ .col‐sm‐ .col‐md‐ .col‐lg‐ Ширина колонки Авто 62px 81px 97px Ширина отступа 30px (15px с каждой стороны колонки) Вложение Да Отступ Да Порядок колонок Да Средняя сетка Для создания средней модульной сетки используется класс .col‐md‐*, которая Эффективная разработка веб‐сайтов. Bootstrap 13 отображается на мобильных устройствах и небольших планшетах в сжатом вертикальном состоянии, а на компьютерах становится горизонтальной. В следующем примере показана одна горизонтальная строка из 12 модулей (максимально возможных). Обратите внимание, что все модули размещены в контейнере с классом . row, который определяет горизонтальное положение модулей и связывает их в единое целое. Каждому модулю задается класс col‐ md‐1, определяющий ширину модуля равной примерно 81px и занимаемое место в модульной сетке равное одному модулю. Если бы было указано в классе col‐md‐2, то модуль бы был шириной примерно 162 и занимал бы два модуля сетки. Если в сумме модулей становится больше 12, то последующие модули переходят на новую строку, чего лучше не допускать. .col‐md‐1 .col‐md‐1 .col‐md‐1 .col‐md‐1 .col‐md‐1 .col‐md‐1 .col‐md‐1 .col‐md‐1 .col‐md‐1 .col‐md‐1 .col‐md‐1 .col‐md‐1 В следующем примере создана строка из 2 модулей, каждый шириной примерно 486px и занимает 6 модулей. .col‐md‐6 .col‐md‐6 Создание средней сетки рассмотрено в практическом задании 2.1. Для создания резинового макета следует использовать класс container‐fluid. Тема 2. Модульная сетка 14 Сетка для мобильных устройств и компьютеров Можно одновременно применять классы для разных типов устройств. В следующем примере создана строка из двух модулей. При просмотре на компьютере два модуля располагаются рядом col‐md‐8 и col‐md‐4. При просмотре на мобильном устройстве первый модуль будет занимать всю просматриваемую область col‐xs‐12, а второй col‐xs‐6 перейдёт на новую строку, и будет занимать половину области просмотра. .col‐xs‐12 .col‐md‐8 .col‐xs‐6 .col‐md‐4 Создание сетки для мобильных устройств и компьютеров рассмотрено в практическом задании 2.2. Сетка для мобильных устройств, планшетов и компьютеров К предыдущему примеру можно добавить ещё класс для совсем небольших устройств, например смартфонов. Рассмотрим пример ниже. При размере экрана больше 992px будут использоваться классы col‐md, которые составят строку из двух модулей по 8 и 4 модуля соответственно, если установлен фиксированный контейнер, то совокупная ширина будет равна 970px. При размере экрана в диапазоне от 768px до 992px будут применены классы col‐ sm, которые так же создадут два модуля один из 10 колонок, другой из двух, и их общая ширина будет составлять 750px. При размере экрана меньше 768px будут применены классы col‐xs, которые создадут два модуля, один будет занимать всю строку, а другой будет перенесён на новую строку, и будет занимать 6 модулей. Ширина в этом случае будет высчитываться автоматически в зависимости от ширины экрана. col‐xs‐12 col‐sm‐10 col‐md‐8 col‐xs‐6 col‐sm‐10 col‐md‐4 Эффективная разработка веб‐сайтов. Bootstrap 15 Перенос модулей Как уже упоминалось, если модулей больше чем 12, то последний модуль колонок переносится целиком на новую строку. В следующем примере в строке, которая должна быть однострочной, появляется вторая строка за счёт колонки из четырёх модулей, которая не помещается в 12 разрешённых модулей в строке. Поэтому в первой строке будет 9 модулей, а во второй 4. .col‐xs‐9 .col‐xs‐4 9 + 4 = 13 > 12, эти 4 модуля будут перенесены целиком на новую строку, так как не помещаются в предыдущую строку. Отступы модулей Для создания отступов используются классы col‐md‐offset. В следующем примере у первого модуля будет создан отступ слева, равный 2 модулям и в сумме все модули будут занимать 8 модулей. .col‐md‐4 .col‐md‐4 .col‐md‐4 В следующем примере у первого и второго модуля будет создан отступ слева, равный 2 модулям и в сумме все модули будут занимать 10 модулей. .col‐md‐4 .col‐md‐4 .col‐md‐4 В следующем примере у первого и второго модуля будет создан отступ слева равный 2 модулям. Последнему модулю задаётся отступ равный 4, и в сумме все модули с отступами будут занимать 14 модулей, что приведёт к переносу последнего модуля вместе с отступом на новую строку. .col‐md‐4 Тема 2. Модульная сетка 16 .col‐md‐4 .col‐md‐4 Создание сетки с отступами рассмотрено в практическом задании 2.3. Вложенные модули Модули можно вкладывать друг в друга. В следующем примере в модуле с классом top вложена строка с тремя модулями. Основной .col‐md‐2 .col‐md‐2 .col‐md‐2 Создание вложенных модулей рассмотрено в практическом задании 2.3. Порядок расположения модулей Порядок модулей можно менять, используя классы col‐xs(sm|md|lg)‐push‐* и col‐xs(sm|md|lg)‐pull‐*. Класс col‐md‐push‐3 сдвигает блок на три модуля влево от текущего положения, а класс col‐md‐pull‐4 сдвигает блок вправо на четыре модуля от текущей позиции. При изменении порядка положения модулей, они могут накладываться друг на друга. В следующем примере модуль 1 буден смещён на три модуля вправо, а модуль 2 на 4 влево. Модуль 1 Модуль 2 Работа с порядком расположения модулей рассмотрена в практическом задании 2.4. Эффективная разработка веб‐сайтов. Bootstrap 17 Управление просмотром модулей Для управления просмотром модулей для различных устройств используются специальные классы, которые описаны в таблице 2.2. Таблица 2.2 Классы управления просмотром Очень маленькие устройства Телефоны (<768px) Маленькие устройства Планшеты (≥768px) Средние устройства Компьютеры (≥992px) Большие устройства Компьютеры (≥1200px) .visible‐xs‐* Видны Скрыты Скрыты Скрыты .visible‐sm‐* Скрыты Видны Скрыты Скрыты .visible‐md‐* Скрыты Скрыты Видны Скрыты .visible‐lg‐* Скрыты Скрыты Скрыты Видны .hidden‐xs‐* Скрыты Видны Видны Видны .hidden‐sm‐* Видны Скрыты Скрыты Скрыты .hidden‐md‐* Видны Видны Скрыты Видны .hidden‐lg‐* Видны Видны Видны Скрыты К классам, устанавливающим элемент видимым, применяется один из трёх типов классов определяющий тип элемента block, inline и inline‐block. Например: .visible‐xs‐block, .visible‐lg‐ inline и .visible‐sm‐inline‐block. Управление печатью модулей Для управления выводом на печать модулей используются специальные классы, которые описаны в таблице 2.3. Таблица 2.2 Классы управления печатью Браузер Печать .visible‐print‐block Скрыты Видны .visible‐print‐inline Скрыты Видны Тема 2. Модульная сетка 18 Браузер Печать .visible‐print‐inline‐block Скрыты Видны .hidden‐print Видны Скрыты Эффективная разработка веб‐сайтов. Bootstrap 19 Практические задания к теме 2 Практическое задание 2.1 Создание фиксированной модульной сетки Создайте файл «practiceBootstrap2_1.html» и сохраните в папку Bootstrap. Введите в файл следующий код: .col‐md‐1 .col‐md‐1 .col‐md‐1 .col‐md‐1 Тема 2. Модульная сетка 20 .col‐md‐1 .col‐md‐1 .col‐md‐1 .col‐md‐1 .col‐md‐1 .col‐md‐1 .col‐md‐1 .col‐md‐1 .col‐md‐8 .col‐md‐4 .col‐md‐4 .col‐md‐4 .col‐md‐4 .col‐md‐6 .col‐md‐6 Эффективная разработка веб‐сайтов. Bootstrap 21 Создайте файл «practiceBootstrap2_2.html» и сохраните в папку Bootstrap. Введите в файл следующий код: .col‐xs‐12 .col‐md‐8 .col‐xs‐12 .col‐md‐4 .col‐xs‐2 .col‐md‐4 .col‐xs‐2 .col‐md‐4 .col‐xs‐8 .col‐md‐4 .col‐xs‐6 .col‐xs‐6 Практическое задание 2.3 Создание сетки с отступами Создайте файл «practiceBootstrap2_3.html» и сохраните в папку Bootstrap. Введите в файл следующий код: Стили: Код: .col‐md‐4 .col‐md‐4 .col‐md‐4 .col‐md‐4 .col‐md‐4 .col‐md‐4 .col‐md‐4 .col‐md‐4 .col‐md‐4 Практическое задание 2.4 Работа с порядком расположения модулей Создайте файл «practiceBootstrap2_4.html» и сохраните в папку Bootstrap. Введите в файл следующий код: .col‐md‐2 .col‐md‐push‐0 .col‐md‐2 .col‐md‐pull‐0 .col‐md‐2 .col‐md‐push‐3 Эффективная разработка веб‐сайтов. Bootstrap 23 .col‐md‐2 .col‐md‐pull‐2 Модуль 1 Модуль 2 Модуль 1 Модуль 2 Тема 2. Модульная сетка 24 Самостоятельные задания к теме 2 Самостоятельное задание 2.1 Создание резиновой модульной сетки Создайте файл «independentBootstrap2_1.html» и сохраните в папку Bootstrap. Создайте среднюю резиновую модульную сетку, как на рисунке ниже. Самостоятельное задание 2.2 Создание резиновой модульной сетки Создайте файл «independentBootstrap2_2.html» и сохраните в папку Bootstrap. Создайте модульную сетку, как на рисунке ниже. Эффективная разработка веб‐сайтов. Bootstrap 25 Тема 3. Текст, код, таблица Работа с текстом По умолчанию текст в Bootstrap имеет следующие настройки: размер шрифта (font‐size) равен 14px, межстрочный интервал (line‐height) равен 1.428 и отступ снизу тега p составляет половину рассчитанной высоты строки, то есть 5px, когда по умолчанию 10px. Использование строчных элементов Для выделения текста используется тег mark, который был введён в спецификацию HTML для акцентирования наиболее важного текста. Размещённый внутри тега mark текст выделяется светлым фоном, тогда как в чистом HTML выделяется ярко жёлтым цветом. Так выглядит тег mark в Bootstrap: а так без Bootstrap: Рисунок 3.1 Использование тега mark Для зачёркивания удалённого текста в Bootstrap допустимо использовать тег del, а для простого зачёркивания используются тег s. Для обозначения добавленного текста подчёркиванием используется тег , а для простого подчёркивания тег . блоков навигации и прочих компонентов веб‐интерфейсов, включая JavaScript расширения. Для уменьшения текста и отмены визуального оформления текста используется тег small. Тег small уменьшает текущий размер шрифта на 15%. Так же допустимо использовать класс small вместо тега. |