Тема 1. Bootstrap. Framework и Модульная сетка.

Что такое Framework?

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

Сам фреймворк состоит из встроенных классов для: работы с базой данных, создания дизайна, анимации создания слайдеров и многое другое. Все эти функции вы можете легко использовать во всех проектах, при этом их подключение и использование будет максимально простым!
Еще один из плюсов — структурирование архитектуры вашего приложения. Фреймворк содержит в себе перечень стандартных папок в которых предполагается что вы будете размещать необходимые части вашего приложения. Это действительно плюс, потому что позволяет вам поддерживать все файлы в порядке на нужных местах!
На наших уроках мы будем изучать Framework под названием Bootstrap. Это один из самых популярных фреймворков на сегодняшний день.
Официальный сайт Bootstrap находится по адресу
http://getbootstrap.com/
Скачать bootstrap вы можете на странице
http://getbootstrap.com/getting-started/
Нажав на кнопку Download.
Так же вы можете подключить Bootstrap к своему сайту используя CDN.

Что такое CDN?

Согласно определению Википедии, CDN -Сеть доставки (и дистрибуции) контента (англ. Content Delivery Network или Content Distribution Network, CDN) — географически распределённая сетевая инфраструктура, позволяющая оптимизировать доставку и дистрибуцию контента конечным пользователям в сети Интернет. Использование контент-провайдерами CDN способствует увеличению скорости загрузки интернет-пользователями аудио-, видео-, программного, игрового и других видов цифрового контента в точках присутствия сети CDN.
Простыми словами CDN – это сеть доставки нужных файлов пользователям. Эти файлы будут храниться не на вашем компьютере, а на специальных серверах. Это позволит сэкономить место на вашем диске.

Пример подключения bootstrap стилей с использованием CDN

<linkrel=«stylesheet»href=«https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css»integrity=«sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u»crossorigin=«anonymous»>

Мы для простоты будем подключать файл со стилями Bootstrap, который скачем с сайта.

<link rel=»stylesheet» href=» css/bootstrap.min.css»>

Важно: Файлы стилей которые заканчиваются на min.css называются сжатыми. В них отсутствуют переносы на новые строки и убраны лишние пробелы. Данный файл неудобен для редактирования но он весит меньше и быстрее загружается.

Что такое сетка фреймворка?

Модульная сетка позволяет размещать содержимое сайта в колонках. Обычно максимальное количество колонок 12. Ширина колонки задается в процентах от ширины строки. Одна колонка занимает 1/12 ширину строки и в строке помещается 12 колонок. 2 колонки занимают 2/12 или одну 6 и их помещается шесть по ширине. И так далее. Проще понять систему модульных сеток можно по картинке.

Главное правило совместимости колонок это сумма колонок в строке равна 12. Вы можете использовать различные комбинации колонок по ширине.

Что такое адаптивный дизайн?

Адаптивный веб-дизайн (англ. Adaptive Web Design) — дизайн веб-страниц, обеспечивающий правильное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера или устройства в котором открывается браузер.

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

Зачем нужна адаптивная верстка?

Адаптивная верстка позволяет менять количество колонок для различных устройств. Это позволяет удобно располагать содержимое сайта в зависимости от ширины устройства. В адаптивном дизайне нужно сохранять структуру макета и аккуратность подачи информации для всех разрешений, поэтому макеты следует делать для всех контрольных точек. Контрольными точками мы будем называть различные разрешения экранов устройств. При этом колонки сетки остаются статичными и добавляются по мере увеличения ширины экрана, а элементы меняют свое положение, подчиняясь колоночному ритму и точкам перехода. За типовые точки перехода или разрешения устройств можно принять 640, 768, 960, 1024, 1280 и 1440. И для каждого разрешения экрана соответственно будет разное количество колонок.

 

Логика размещения контента на странице Bootstrap.

1. Все содержимое страницы помещается в блок с классом container.
2. Чтобы создать строку используем класс row. Строки размещаются внутри контейнера.
3. Внутри строки размещаются колонки.

 

 

Класс контейнер .container

Класс контейнер (.container) позволяет осуществить простое центрирование контента страницы. Контейнер установлен в фиксированные значения ширины width на различных контрольных точках медиа запросов для соответствия с системой разметки bootstrap.

Для превращения любой фиксированной ширины сетки макета в полную ширину макета, мы можем изменив класс .container на .container-fluid.

Класс строки .row

Для размещения содержимого в строках. Применяйте класс .row

 

Стандартные классы сеток.

В таблице ниже представлены стандартные префиксы таблиц для сеток.

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

 

	Extra small<544px	Small ≥544px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
ШиринаКонтейнера	None (auto)	576px	720px	940px	1140px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-	.col-xl-

 

Class Prefix – префикс класса в этой таблице это текст который необходимо добавить перед номером колонки. К примеру вы хотите применить размещение в три колонки для небольших устройств. В этом случае вам нужно использовать класс  .col-md-4.

Практическая работа 1.

1. Создадим папку BOOTSTRAP на рабочем столе, если она не создана
2. Создадим в ней папку со своим именем.
3. Войдем в свою папку и создадим там текстовый файл «lab1.html».
4. Создадим папку CSS. И загрузим в нее стандартный файл со стилями bootstrap.
5. Откроем текстовый файл с помощью редактора notepd++.
6. Создадим в нем стандартный заголовок HTML документа с подключением bootstrap.min.css.
7. В теле HTML документа используем создадим блок div и присвоим ему класс container.
8. Внутри созданного контейнера создадим
9. В блоке c классом контейнер создадим две строки.
10. В каждой строке разместим по 4и контейнера с классом col-md-3 .
11. В каждом блоке с классом col-md-3 разместим праздничные открытки 1.png — 8.png.
12. Зададим ширину каждой картинки 100%.

 

В результате должен получиться вот такой сайт.

Что у нас получилось?

две строки по 4-и колонки. Теперь начните плавно сужать окно браузера и посмотрите на результат. После определенного момента (контрольная точка) сайт автоматически свернулся в одну колонку. Это позволит просматривать наш сайт в удобном виде на мобильных смартфонах. Но как же быть с планшетами? Они обладают промежуточным разрешением между мониторами стационарных компьютеров и телефонов. На них было бы удобно просматривать контент в две колонки. Как этого достичь? Давайте добавим класс .col-sm-6. Это как раз добавит возможность отображения в две колонки на устройствах с небольшим разрешением экрана.

Проверим как отображается наш сайт после добавления .col-sm-6

Ура!!! У нас получилось три варианта отображения сайта, для смартфонов мы получили удобное отображение в одну колонку, для планшетов в две, и для стационарных компьютеров и ноутбуков получили отображение в 4-и колонки.

Но давайте посмотрим ниже. Что то пошло не по плану.

В нижней части экрана верстка сбилась и картинки отображаются хаотично.

С чем это связано? При отображении в две колонки у нас появилось больше строк. Но в верстке всего две строки. Чтобы правильно упорядочить содержимое сайта нам необходимо добавить две дополнительные колонки именно для col-sm-6.

Как это сделать?

Для этого нам понадобится два класса.

Для начала класс который запретит обтекание float и тем самым создаст новую строку — clearfix.

Но не все так просто.  Если мы применим clearfix и запретим обтекание то теперь сайт станет двух колоночным и для устройств с большим разрешением экрана. Помочь решить эту проблему нам поможет класс visible-sm-block — это позволит сделать видимым только для устройств с sm разрешениями.

Давайте добавим последний штрих используем класс clearfix и visible-sm-block.

В строке между двумя картинками вставим «распорку» как показано скриншоте ниже.

Ну вот. Теперь проблема с неверным отображением двух колонок решена.

Полный код страницы.

В завершение теоретической части давайте изучим еще один класс:

.img-responsive — помогает масштабировать фотографию по размеру контейнера в котором она находится.

 

 

 

Наш первый сайт. Фотогалерея .

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

 

Какие шаги нам нужно выполнить для того чтобы создать сайт?

1. Скачать файлы стилей Бутстрап.
2. Создать текстовый документ и переименовать его в index.html
3. По дизайну галереи размещенному ниже подходящие модули сетки и сверстать сайт.
4. Скачать фотографии из интернет используя сервисы Гугл картинки или Яндекс Картинки. Возможно скачать свои личные фотографии из телефона или профиля в социальной сети. Или использовать стандартные заготовки для урока.
5. Изменить размеры фотографий с помощью редактора Paint если фотографии разных размеров.
6. Сверстать сайт и разместить на нем фотографии.

Дизайн сайта

По окончанию урока разместите свой сайт на бесплатном хостинге в интернет.