Bootstrap log что это
Знакомство с Bootstrap: установка и подходящие сценарии использования
Bootstrap — бесплатный HTML/CSS/JavaScript фреймворк для быстрого создания адаптивного дизайна сайта. У разработчиков к нему неоднозначное отношение. С одной стороны, Bootstrap позволяет с минимальными знаниями создавать интерфейсы, которые работают во всех популярных браузерах и не ломаются при изменении разрешения экрана. С другой стороны, фреймворк тащит в проект кучу ненужного кода, который увеличивает вес сборки.
Что нужно знать о Bootstrap перед началом работы
У меня отношение к Bootstrap нейтральное. Он отлично подходит для прототипирования. Если нужно быстро проверить какую-то гипотезу или показать пример заказчику, то сборка во фреймворке — оптимальный вариант. Если вы делаете индивидуальный дизайн, то проще верстать с нуля, а не пытаться перебрать все стили и скрипты в Bootstrap.
Какую версию Bootstrap выбрать?
В третьей версии Bootstrap сетка построена на Float. Это устаревшая технология, которая не дает такой гибкости, как Flexbox. Зато на флоатах можно верстать для старых браузеров, вплоть до Internet Explorer 6. Если вашему проекту нужна такая поддержка (вряд ли), то используйте Bootstrap 3.4.1.
В июне 2020 года появилась новость о выпуске Bootstrap 5 alpha. Когда из нее сделают стабильную версию — непонятно. Но есть несколько моментов, о которых нужно знать всем, кто работает или собирается работать с фреймворком.
Радует, что фреймворк развивается. Разработчики обещают, что в пятой версии будет более быстрый JavaScript, меньшее количество зависимостей, улучшенные API. Но пока она находится на стадии альфа-тестирования, мы будем пользоваться последней стабильной сборкой — Bootstrap 4.5.1.
Что такое Bootstrap и как он работает
Разработка веб-страницы с точки зрения верстальщика — непрерывный процесс доработки и создания новых блоков. Чем больше проект, тем чаще происходит итерация «идея — функционал — вёрстка». Решая задачи бизнеса, стадии должны решаться быстро и качественно. И если качество вёрстки напрямую зависит от верстальщика, то скорость — фактор, который зависит от команды.
Для решения проблемы скорости разработчики постоянно придумывают новые инструменты. В среде верстальщиков таким инструментом стали CSS-фреймворки — набор готовых блоков, классов и внутренних функций, которые обеспечивают быструю и удобную разработку.
В 2010 году в недрах компании Twitter появился проект Twitter Blueprint. Его задачей было создание системы для разработки новых компонентов внутри компании. Twitter Blueprint имел набор базовых блоков с готовым дизайном, который использовался в компании. Это решение обрело популярность внутри компании благодаря своей простоте, так как любой сотрудник, имея минимальный опыт разработки, мог сделать новый концепт блока и предложить его для дальнейшей разработки.
В этом же году на Twitter Hack Week проект обрёл первую популярность. Его заметили не только внутри компании, но и за её пределами. Такое решение не могло оставаться внутренней разработкой и уже в 2011 году проект вышел в открытый доступ под названием Bootstrap. С тех пор Bootstrap удерживает лидерство среди инструментов по созданию сайтов. По разным статистикам, фреймворк используют от 17 до 30% всех сайтов в интернете. Код Bootstrap можно найти на сайтах таких проектов, как:
Это далеко не весь список, который можно привести. Таким образом Bootstrap не является библиотекой для создания админок и прототипов, как о нём говорят.
Bootstrap как набор готовых элементов
Одной из сторон Bootstrap является то, что его можно использовать исключительно как набор уже готовых элементов. Для это не требуется серьёзных знаний HTML и CSS — достаточно уметь создавать самые простые страницы и прочитать документацию. Например, для создания кнопки используется два класса, один из которых отвечает за структуру кнопки, а другой за оформление. Такой подход называется OOCSS — Object Oriented CSS или объектно-ориентированный CSS. Про объектно-ориентированный подход CSS в блоге Hexlet есть отдельная статья.
Второй подход, который используется в Bootstrap — Atomic CSS. На нём построены утилиты во фреймворке. Atomic CSS — подход, при котором один класс использует одно свойство.
В этом примере тег получит два свойства:
Использование утилит предполагает более углублённые знания в CSS, так как это будет похоже на использование правил. Только вместо записи в CSS-файле используются классы.
Компоненты и утилиты позволяют очень быстро создать проект различной сложности. Единственное, в чём вы будете ограничены — выбор дизайна. Если не заниматься переписыванием компонентов, то страница будет выглядеть в точности, как в документации. Это не минус, так как Bootstrap современный фреймворк и его дизайн не пугает при первом взгляде. Многие небольшие компании используют такой подход.
Плюсы использования Bootstrap, как набора готовых элементов
Скорость
Процесс разработки сопровождается непрерывной работой по добавлению или удалению функционала на странице. Чем крупнее проект, тем чаще происходят эти процессы и скорость реализации не в последнюю очередь зависит от того, как скоро функционал «обрастёт» внешним видом. Используя готовые компоненты и утилиты Bootstrap можно быстро ввести новый функционал на сайт и дать его пользователям. Таким образом это решает одну из проблем цикла «идея — функционал — вёрстка».
Кроссбраузерность
В веб пространстве множество различных браузеров: Chrome, Firefox, Edge, Opera, Safari и т.д. Они предоставляют пользователям комфортный веб-сёрфинг. Но каждый из этих браузеров может обрабатывать HTML и CSS немного по своему, из-за чего верстальщикам необходимо приводить стандартные элементы к единому виду. Такая задача требует скрупулёзного подхода и знание частых проблем и отличий браузеров между собой. Компоненты Bootstrap учитывают различия браузеров и оптимизированы таким образом, чтобы минимизировать различия между ними.
Адаптивность
Bootstrap имеет готовую 12-колоночную сетку, по которой можно располагать компоненты. Сетка является самым популярным компонентом бутстрап и её используют даже те, кто скептически относится к фреймворку. Сетка использует подход, при котором возможно сразу настроить адаптивность. Используя готовые компоненты можно быть уверенным в том, что они будут хорошо отображаться на разных устройствах.
Доступность
Низкий порог вхождения
Создание страницы по компонентам не требует экспертного знания HTML и CSS. Это позволяет создавать новые блоки не только верстальщику, но и любому работнику компании, который знает базовые основы вёрстки. Таким образом разработчики могут оснастить новое решение готовой вёрсткой с использованием фреймворка. Bootstrap также может пригодиться небольшим компаниям, которые не готовы потратить большие деньги на разработку веб-сайта. В качестве промежуточного решения Bootstrap будет незаменим. В последствии возможно и остановиться на нём, как мы и сделали на Хекслете.
Минусы использования Bootstrap, как набора готовых элементов
Вес проекта
Фреймворк Bootstrap даёт не только набор классов, но и интерактивные компоненты. Для их работы используется несколько JavaScript библиотек, которые увеличивают вес подключаемых файлов на странице. В Bootstrap 4 вместе со библиотеками JavaScript весит
300кб. Это может стать критичной точкой при разработке мобильных приложений, ориентированных на использование при слабом интернет соединении. В качестве таких приложений могут быть материалы для оказания экстренной помощи, вызова спасательных служб и так далее.
Дизайн
Стандартные компоненты накладывают ограничения на дизайн. Эти рамки выражены в том, что компоненты возможно расширять только вглубь, вставляя одни компоненты внутрь других. Модификация компонентов потребует знаний в вёрстке, так как даже незначительные изменения необходимо проверить в браузерах и на разных разрешениях. При этом дизайн стандартных компонентов Bootstrap лаконичен и является примером для дизайнера. При своей простоте они функциональны и помогают правильно подать информацию. Даже в таких ограничениях создаются красивые и удобные сайты засчёт грамотной работы с UI.
Функционал
Как и в случае с дизайном, функционал блоков определён заранее и изменение приводит к существенным доработкам. Это касается и интерактивных элементов, которые используют JavaScript код. Разработчики для таких элементов внесли классы, которые помогают немного изменить поведение, но этого не всегда бывает достаточно.
Bootstrap как фреймворк
Помимо средств разработки, таких как набор компонентов и утилит, Bootstrap предлагает широкие возможности по созданию пользовательских компонентов. Это достигается засчёт большой кодовой базы в исходниках.
Что же такое фреймворк? Можно представить это как каркас будущего приложения. Своеобразным фундаментом, на котором мы возведём стены, установим окна и заставим мебелью. Таким фундаментом и является Bootstrap. В нём находится десятки функций и миксинов, которые позволят верстальщику создать свою собственную дизайн-систему. Этот функционал является самым недооценённым среди разработчиков и по этой причине о Bootstrap сформировалось неправильное мнение.
Представьте себе новый компонент, который разработчик добавляет на страницу. Используя бутстрап, зачастую разработка ведётся следующим образом:
При таком подходе, даже получив необходимые блоки, разработчик решит только ближайшую задачу, но может испытать трудности на дистанции. Все они связаны с отсутствием взаимодействия между компонентом и фреймворком:
Создание утилит, начиная с Bootstrap 5, решается добавлением нового массива, который передаётся в обработчик, отдавая на выходе новые классы. А как создаётся новый компонент? В большинстве случаев достаточно внимательно пройтись по файлу _variables.scss
Что там можно обнаружить? Например, цвета, которые используются в качестве цветовой схемы:
Цветов в файле _variables.scss намного больше, но именно эти формируют базовую цветовую схему проекта. Вы можете добавить новые цвета, определить их в качестве базовых и после компиляции все компоненты и утилиты получат новые значения. Именно такое поведение отличает фреймворк от простого набора готовых компонентов.
Именно такая работа с Bootstrap позволит создать нечто большее, чем просто прототип, лендинг или панель администратора. На Hexlet, в качестве третьего проекта по вёрстке Bootstrap используется для создания внешнего вида полноценного чата
Так как Bootstrap является набором функций и миксинов, то это снимает преграды его использования вместе с другими методологиями. Например, c БЭМ. Это распространённое мнение, что использовать бутстрап вместе с БЭМ невозможно. Взгляните на следующие миксины, которые доступны для создания сетки:
Если вы уже работали с Bootstrap, то в этих названиях найдёте привычную схему «Контейнер → строка → колонка». Используя эти миксины можно добавить логику фреймворка в абсолютно любой проект и не привязываться к именованию.
Таким образом можно добавлять не только элементы сетки, но и доступные компоненты и утилиты. При этом после компиляции не будет необходимости нести за собой множество кода, который не используется.
Выводы
Изучение Bootstrap может сильно развить вас как разработчика. Ведь кроме написания кода, можно изучать и чужой, который создан и поддерживается тысячами людьми по всему миру. В коде можно найти интересные решения, грамотное структурирование и множество полезных функций. Благодаря этому Bootstrap можно использовать во множестве сценариев: от создания прототипов, до вёрстки сложных макетов, а возможность использование отдельных частей позволяет добавить частичку Bootstrap в проект без необходимости переделывания структуры.
Что такое Bootstrap и зачем он нужен?
В этой статье мы познакомимся с фреймворком Bootstrap. Рассмотрим, что это такое и зачем он нужен. Разберём его основные преимущества и недостатки.
Что такое Bootstrap?
Bootstrap — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется веб-разработчиками для быстрой вёрстки адаптивных дизайнов сайтов и веб-приложений.
Фреймворк Bootstrap используется по всему миру не только независимыми разработчиками, но иногда и целыми компаниями. На Bootstrap создано очень много различных сайтов, посмотреть их можно на странице Bootstrap Expo.
Как он работает? Например, чтобы создать кнопку на странице с помощью Bootstrap, достаточно к ссылке или элементу button добавить всего несколько классов.
Создание кнопки в Bootstrap 5:
Ну как? Сколько на это потребовалось времени? Да, всего несколько секунд.
Всё, вкладки готовы. На это тоже ушли считанные секунды. Правда, потрясающая скорость. В этом сила Bootstrap.
Но, Bootstrap – это не просто набор готовых инструментов (HTML фрагментов, классов, компонентов и плагинов), а хорошо спроектированный фронтенд фреймворк, который довольно просто можно настроить под себя посредством редактирования Sass переменных и использования миксинов.
Из чего состоит Bootstrap
Bootstrap состоит из:
С чего начать изучение Bootstrap
Сначала необходимо изучить сетку и попрактиковаться на ней верстать макеты страниц и создавать разметку блоков. Изучить её можно тут (для тех, кто использует Bootstrap 3) или здесь (для Bootstrap 4).
После того как разберётесь с сеткой нужно изучить компоненты Bootstrap (как они верстаются и настраиваются) и научиться их вставлять в нужные места страницы.
Это минимальные задачи, которые перед собой необходимо поставить, чтобы научиться верстать сайты и веб-приложения на Bootstrap.
Ну если ваша задача не просто использовать Bootstrap, а что-то в нём изменять, переделывать, то без хороших знаний CSS тут конечно уже не обойтись. Некоторые вещи, конечно, можно настроить через изменения SCSS переменных и применения миксинов, а другие – нет. И это касается любых фреймворков.
Преимущества и недостатки фреймворка Bootstrap
Преимущества Bootstrap при его использовании для frontend разработки сайтов и интерфейсов админок:
Какую версию Bootstrap выбрать
Что нового в Bootstrap 5:
Третью версию в основном имеет смысл использовать, если нужна поддержка «старых» браузеров (IE8 и IE9).
Основные отличия Bootstrap 4 от Bootstrap 3:
Компоненты Bootstrap 3 в IE8 и некоторых других версиях отображаются без градиентов, теней и закруглённых углов. Это связано с тем, что в них нет поддержки используемых для этих целей CSS3 свойств.
Изучение Bootstrap с 10 полезными советами
Если вы хотите начать свою карьеру в веб-разработке, то изучение Bootstrap — это то, что вам нужно. Bootstrap — это фреймворк, используемый для разработки веб-приложений. Его библиотека интерфейсных компонентов широко используется для создания интерактивных и адаптивных веб-приложений и веб-сайтов, к которым мы привыкли сегодня.
Если вы еще не знаете, что такое адаптивные сайты, то вам должно быть это интересно. Проще говоря, отзывчивость веб-сайта означает, что при изменении размера экрана, на котором просматривается веб-сайт, макет веб-сайта реагирует на это и изменяется. Это позволяет веб-сайтам выглядеть хорошо независимо от того, на каком экране они просматриваются.
Как работает Bootstrap?
Есть два способа использования Bootstrap. Вы можете либо импортировать Bootstrap в свой код, либо загрузить пример проекта Bootstrap и построить на нем свой сайт.
Bootstrap использует 12-колоночную модель для отображения веб-сайта, которая называется сеткой Bootstrap. В этой сетке вы можете определить различные контрольные точки для размещения различных компонентов, таких как заголовки, абзацы и кнопки, чтобы сделать ваш сайт визуально привлекательным. Когда размер экрана уменьшается, компоненты в сетке изменяют макет, чтобы соответствовать меньшему экрану. Это означает, что просмотр одного и того же веб-сайта великолепно выглядит на экране обычного размера вашего ноутбука и на экране меньшего размера вашего смартфона.
Bootstrap стал сегодня одной из самых популярных сред разработки фронт-эндов. Если вы новичок, который хочет начать изучать Bootstrap, то вы на правильном блоге. Потому что вот лучшие 10 советов, чтобы и освоить Bootstrap
10 советов, с помощью которых вы сможете овладеть навыками Bootstrap
1. Проведите исследование по начальной загрузке
Это всегда отличный шаг для предварительного исследования того, что вы хотите использовать. Вы должны узнать о Bootstrap и о том, как он работает, прежде чем приступить к его использованию. Поймите, как его можно импортировать в написанный код или как создать пример проекта Bootstrap.
Вся информация относительно документации Bootstrap доступна на их сайте. Для большинства вещей в Bootstrap имеется заранее написанный код, который необходимо изучить, прежде чем приступить к написанию собственной версии.
2. Получите предварительные знания JavaScript, CSS и HTML
JavaScript, CSS и HTML — это языки интерфейса, используемые Bootstrap. Для использования среды Bootstrap важно, чтобы вы свободно владели этими языками и знали, какое программное обеспечение для разработки, например, IDE, использовать с ними.
Нетрудно освоить и JavaScript, CSS и HTML, и для этого есть ряд различных онлайн-ресурсов. Также доступны руководства по выбору лучших IDE для этих языков.
3. Установите последнюю версию Bootstrap для использования
С постоянно совершенствующейся игрой для веб-разработки также развивались фреймворк и инструменты. Bootstrap также выпускается с несколькими версиями, последней из которых является Bootstrap версии 4.3 со значительными обновлениями. К ним относятся 5-уровневая сеточная система, глобальный размер шрифта 16px, набор новых служебных классов и дополнительные функции для создания адаптивного дизайна. Поэтому убедитесь, что вы установили самую последнюю версию Bootstrap, чтобы использовать последние добавленные и обновленные функции.
4. Используйте онлайн-ресурсы для изучения Bootstrap
Интернет — ваш лучший друг, если вы хотите самостоятельно изучить Bootstrap. Есть ряд онлайн-курсов, учебных пособий, руководств, блогов и примеров для изучения. Существует два типа онлайн-курсов: бесплатные и платные. Это либо комплексные долгосрочные курсы, охватывающие все концепции и функции Bootstrap, либо краткие и быстрые учебные пособия по конкретным функциям и компонентам.
Еще один замечательный онлайн-ресурс для изучения Bootstrap — сообщество пользователей Bootstrap. Общайтесь и взаимодействуйте с людьми, которые уже используют платформу Bootstrap и учитесь на их опыте. Вы можете найти их в блогах Bootstrap или в сообществах веб-разработчиков в социальных сетях.
Начало онлайн-курса поможет ответить на все ваши вопросы, касающиеся Bootstrap, и поможет быстро стать профессионалом в использовании фреймворка. Итак, ищите полезные ресурсы и курсы и начинайте.
5. Практика делает тебя идеальным!
Еще один отличный совет, чтобы овладеть вашими навыками Bootstrap — практиковаться в его использовании как можно больше. Проведите тестирование фреймворка, экспериментируя с созданием реального веб-сайта, и учитесь по пути. Используя свои знания CSS, HTML и JavaScript, попробуйте создать веб-сайт из ничего, составив макет. Делая это, вы будете делать ошибки по пути, но вы также многому научитесь на них. Как только вы улучшите свои навыки создания базового макета сайта с помощью Bootstrap, вы можете настроить его так, чтобы он выглядел модным и продвинутым.
6. Обратитесь к справочным руководствам
Для каждого языка интерфейса, который использует Bootstrap, имеются справочные руководства, касающиеся синтаксиса, концепций и всей другой соответствующей информации. Языковые руководства для HTML, JavaScript и CSS можно легко найти в Интернете. Отличным примером этого являются руководства по разработке Mozilla. Они предоставляют каталог информации о свойствах, синтаксисе, элементах и их описании.
Справочные руководства окажут вам большую помощь, когда вы столкнетесь с такими проблемами в коде, как сложный синтаксис и т. д.
7. Плагины являются ключом к хорошему дизайну сайта
Включение плагинов на ваш сайт — это отличная методика разработки. Bootstrap предлагает несколько плагинов, написанных на JavaScript, которые вы можете легко использовать в дизайне своего сайта без написания ни единой строчки кода.
Существуют онлайн-библиотеки плагинов, которые вы можете найти в Интернете, некоторые из них являются официальными библиотеками плагинов Bootstrap, а некоторые являются неофициальными. В любом случае, использование плагинов для формы, меню и навигации, таблиц, кнопок и уведомлений может сделать ваш сайт выдающимся. Итак, изучите различные плагины и поэкспериментируйте с ними.
8. Сосредоточьте свой подход на компонентах
При разработке веб-приложения с использованием Bootstrap идеально использовать подход, ориентированный на компоненты, а не на страницы. Так что это значит? Это означает, что вместо того, чтобы фокусироваться на создании CSS и HTML для каждой страницы, вам следует больше думать о каждом компоненте на странице. Такое мышление поможет вам разработать повторно используемые компоненты, которые можно будет использовать на нескольких страницах, что сделает процесс кодирования более простым и эффективным.
Этот подход может быть особенно полезен при разработке большого веб-сайта, где использование компонентов на всех страницах может быть эффективным с точки зрения затрат времени и, прежде всего, может привести к согласованности общего дизайна веб-сайта.
9. Сосредоточьтесь на мобильности
При разработке веб-приложений распространена практика фокусировать ваш дизайн на мобильных устройствах. На самом деле, это является ключом к разработке адаптивных сайтов. Этот подход называется “Mobile First”.
Поскольку мобильный дизайн имеет больше ограничений, он всегда идеален. Поэтому лучше сначала начинать разрабатывать ваш сайт для мобильных устройств. Затем вы можете расширить его возможности для настольной версии обычного размера или версии планшета, которые имеют меньшие ограничения.
Итак, чтобы упростить использование Bootstrap, сначала создайте веб-сайты для мобильных устройств, а затем расширьте дизайн.
10. Расширение и настройка Bootstrap
Последний самый важный совет по использованию Bootstrap — понять, что использование только Bootstrap может быть недостаточно. Несмотря на то, что он предлагает широкий спектр решений, только их использование сделает ваш веб-сайт или приложение похожим на все другие веб-сайты. Итак, если вы хотите, чтобы ваш сайт выделялся среди остальных, то настройте его.
Вы можете использовать Bootstrap для создания базы для вашего веб-приложения и добавления дополнительных классов в соответствии с вашими требованиями. Вы также можете создать настроенную версию Bootstrap для своего сайта, чтобы он выглядел уникальным. Веб-сайт Bootstrap предлагает всю информацию о настройке и поддерживаемых параметрах. Так что проверьте это и не бойтесь настраивать.
Как сверстать веб-страницу. Часть 2 — Bootstrap
Введение
Уважаемый читатель, эта статья является второй частью цикла статей, посвященных вёрстке.
В первой части мы верстали шаблон Corporate Blue от студии Pcklaboratory с помощью стандартных средств на чистом HTML и CSS. В данной статье мы попробуем сверстать этот же шаблон, но с помощью CSS фреймворка Bootstrap 3.
Преимущество использования CSS фреймворков заключается в том, что верстальщику не нужно думать о многих нюансах верстки, которые за него уже продумали создатели фреймворков. К таким нюансам относятся кроссбраузерность, поддержка различных разрешений экранов и многое другое. Верстальщик лишь указывает, что, как и когда нужно показать, остальное фреймворк делает сам. Данный подход может сильно ускорить вёрстку сайта. К преимуществам Bootstrap относится и его популярность. Это означает, что другому верстальщику будет проще поддерживать ваш код.
Недостатком использования фреймворков является тот факт, что странице придется целиком «нести» за собой лишние стили фреймворка, даже если она использует лишь их малую часть. Фреймворк является отличным инструментом для прототипирования и создания страниц, для которых дизайн вторичен, например страницы администрирования. Если же у вас есть очень специфический дизайн, то сверстать его с помощью фреймворка может оказаться сложнее, чем нативными средствами. Тем не менее, и это возможно.
Об использовании Bootstrap
В настоящее время есть несколько способов работы со стилями Bootstrap.
Без использования LESS
Для новичков сам Bootstrap рекомендует следующий подход: нужно скачать с сайта скомпилированный Bootstrap и положить его в свой проект, ничего не изменяя. Затем нужно создать свой пустой CSS файл и подключить его после bootstrap.css.
После этого, для того чтобы изменить стили Bootstrap вам нужно перебить их в своем styles.css примерно в таком виде:
Очевидным минусом данного подхода является то, что вам придется вручную искать нужные стили, которые требуется перебить и не всегда это будет тривиально, т.к. некоторые параметры Bootstrap применяются ко многим селекторам в изменённом виде, например через формулы. Небольшую помощь здесь может оказать инструмент Customize, он поможет скомпилировать правильно ваши изменения, но только один раз. Если в будущем вы захотите изменить какой-то параметр, то придется заново вбивать изменненные значения для всех полей, чтобы скомпилировать свои стили.
С использованием LESS
Существует большое количество способов скомпилировать LESS файлы и Bootstrap оставляет это на усмотрение разработчика. Сам Bootstrap использует для компиляции Grunt, вы можете предпочесть плагин для продуктов JetBrains, а мы, поскольку статья ориентирована на новичков, посмотрим в сторону более простых решений. Такими решениями являются программы WinLess для Windows, SimpLESS для Mac или Koala для Linux. Все эти программы делают примерно одно и то же: получают на вход папку с LESS файлами и слушают изменения в них. Как только вы вносите изменения в любой файл – тут же он компилируется в указанный CSS файл. Таким образом вам нет необходимости запускать компиляцию руками после каждого изменения. Вы изменяете LESS файл, сохраняете его и тут же видите изменения на сайте в уже скомпилированном, сжатом виде.
Создание проекта
Предварительный осмотр
Общие изображения
На данном этапе нужно нарезать и сохранить только общие изображения, которые будут на всех страницах сайта и не относятся к контенту. В нашем случае это будет светло-серый фон страницы, фон заголовка, изображение карты, два логотипа и кнопки социальных сетей.
Сохраняем изображение карты:
Сохраним логотипы следующим образом:
Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Более подробно про склейку изображений описано в первой части. В итоге получится два файла:
Компоненты
Основное отличие вёрстки с помощью Bootstrap от вёрстки нативными средствами заключается в том, что Bootstrap вводит такое понятие, как компоненты. Компоненты представляют из себя часто используемые готовые HTML блоки с предопределенными стилями. Иногда компоненты используют JavaScript. Верстальщик может использовать как готовый компонент, так и определить свой внешний вид для него. Для этого часто нужно лишь поменять значение переменных в Bootstrap. Если нужны более гибкие изменения, верстальщик всегда может изменить HTML и CSS по своему усмотрению.
Основные стили
В Bootstrap все стили по умолчанию уже заданы, нам нужно только их перебить, если они отличаются от нашего дизайна. Сделаем это в файле src/less/variables.css.
В первую очередь нужно добавить переменные, которых нет в настройках Bootstrap для того, чтобы можно было их использовать в дальнейшем. У нас это только специфический шрифт дизайна.
Если вы хотите использовать шаблон для русских сайтов, то шрифт Oswald можно попробовать заменить на наиболее близкий Cuprum, который поддерживает кириллицу.
А теперь заменим настройки Bootstrap на свои:
Все переменные, которые есть в Bootstrap можно посмотреть на странице http://getbootstrap.com/customize/
После того, как мы закончили с переменными, давайте начнем прописывать стили нашего дизайна в файле styles.less. Сначала подключим сам Bootstrap и наши переменные:
Не все стили, заданные Bootstrap по умолчанию можно изменить переменными, давайте сделаем это вручную:
Здесь мы убрали тень у элементов формы, а текстам в кнопках указали специфический шрифт страницы.
Затем опишем фон страницы и верхнюю полоску:
Далее в тексте не будет указываться в какой файл пишутся стили. Просто запомните, что все переменные мы сохраняем в файл variables.less, а CSS стили будем хранить в styles.less.
Каркас HTML
Вёрстку сайта начинаем традиционно с каркаса HTML. Вставляем в файл index.html код простейшего шаблона со страницы Getting started, предварительно убрав всё лишнее:
В этом блоке создается HTML5 структура документа. В title указываем название нашей страницы – Whitesquare. Метатегом viewport указываем, что ширина страницы на мобильных устройствах будет равна ширине экрана и начальный масштаб будет 100%. Затем подключается файл стилей. И для версий Internet Explorer меньше девятой подключаем скрипты, позволяющие правильно отображать нашу верстку.
Макет
В данном случае, мы видим, что сайт состоит из двух частей: основного контейнера с содержимым, который центрируется на экране и тянущегося футера. Основной контейнер состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), навигация (nav) и название страницы (.heading).
Давайте добавим в body следующий код:
Здесь нам встречается первый компонент Bootstrap – колонки. Родительскому элементу колонок задается класс «row», а классы колонок начинаются с префикса «col-», затем идет размер экрана (xs, sm, md, lg), а заканчиваются относительной шириной колонки.
Колонке можно задавать одновременно различные классы со значениями для экранов, например col-md-8». Эти классы просто задают ширину колонке в процентах для определенного размера экрана. Если колонке не задан класс определенного экрана, то применится класс для минимально определенного экрана, а если и он не указан – то никакая ширина не применится и блок займет максимально возможную ширину.
У нас классы «col-md-7» и «col-md-17» указывают, что блоки представляют из себя колонки шириной 7 и 17 относительно родительского контейнера. По умолчанию сумма ширин колонок в Bootstrap равняется 12, однако мы увеличили это число вдвое для достижения нужной нам гибкости.
Далее опишем нужные нам отступы:
Данную конструкцию мы поместили внутрь body. Синтаксис LESS позволяет вкладывать правила друг в друга, которые потом скомпилируются в такие конструкции:
Такой подход позволяет видеть структуру HTML прямо внутри CSS и дает некую «область видимости» правилам.
Логотип
Вставляем логотип в тег header:
Дополнительных стилей не требуется.
Поиск
Для того чтобы создать поиск, нам понадобятся следующие компоненты Bootstrap: инлайновая форма, сгруппированные контролы и кнопка.
В теге header создаем инлайновую форму, выровненную по правому краю. Поля такой формы обязательно должны иметь класс «form-control» и label.
В форму мы помещаем компонент «сгруппированные контролы». Группировка контролов позволяет убрать отступ между вводом текста и кнопкой и как бы слить их в единый элемент.
Он представляет из себя div с классом «input-group» и полями, а кнопка такого компонента помещается в блок с классом «input-group-btn».
Поскольку нам не нужно показывать label для поля поиска — скроем его классом «sr-only». Это нужно для специальных устройств чтения с экрана.
Кнопке добавляется класс «btn-primary», означающий, что это первичная кнопка данной формы.
Всё, что нам осталось — это задать в стилях ширину форме поиска.
Для отображения меню возьмем компонент «навигационная панель» и поместим в него компонент «навигация», которая представляет из себя список со ссылками. Для навигации добавляется класс «navbar-nav», который применяет специальные стили навигации внутри навигационной панели.
Для того, чтобы привести это меню к нашему дизайну зададим следующие значения переменным:
Помимо настраиваемых параметров, опишем дополнительные в стилях – это текст в верхнем регистре и наш специфический шрифт:
Заголовок страницы
Заголовок страницы помещается в div с классом «heading».
И имеет следующие стили:
Здесь мы рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.
Подменю
При создании подменю, мы не будем использовать компонент «навигация», так как по стилям он нам не очень подходит, гораздо больше нам подойдет компонент «группированный список». Каждый элемент такого компонента имеет класс «list-group-item».
Подменю нужно разместить в теге aside. Список ссылок создаем аналогично главному меню.
В настройках компонента укажем, что все группированные списки нужно показывать с фоном и рамкой компонента «панель»:
И применяем к подменю следующие стили:
Сначала возвращаем элементам списка стандартные стили, так как Bootstrap их перебил на свои. Добавляем отступ снизу. Для подменю применяется более тонкий шрифт и квадратные маркеры. А для ссылок задаем цвета, верхний регистр и убираем подчеркивание. Амперсанд в коде «&.active» по синтаксису LESS во время компиляции заменится на родительский селектор: «.submenu li.active».
Контент сайдбара
В контенте сайдбара помимо подменю располагается также изображение с расположением офисов.
Для его отображения нам подойдет компонент «панель», а точнее его вариация «основная панель» (panel-primary) для раскраски заголовка. Этот компонент содержит блок заголовка (panel-heading) и блок содержания панели (panel-body). Изображению карты добавляем класс «img-responsive», который позволит картинке уменьшаться при маленькой ширине экрана.
В переменных Bootstrap мы уже задали цвет для фона панели (panel-bg), а теперь укажем, что «primary» панель будет иметь серую рамку дефолтной панели, а не голубую, как задано по умолчанию:
Теперь в стилях сайта нужно изменить стандартные настройки панелей, которые не изменяются через переменные:
Здесь мы убрали тень у панелей, поставили свои отступы и задали свой шрифт заголовка.
Цитата
Вёрстку контента начнём с добавления цитаты.
Этот элемент страницы больше всего похож на компонент Jumbotron. Добавим его в колонку контента:
Через переменные для компонента jumbotron зададим белый цвет текста и брэндовый голубой фон:
И опишем наши стили:
В них мы убираем скругление углов, отступы компонента и декорации цитаты, заданные Bootstrap по умолчанию. Также добавим стили наших шрифтов.
Контент
Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом.
Следующим шагом нужно добавить два изображения, которые находятся в конце текста контента. Делается это с помощью двух колонок:
Класс «thumbnail» превращает изображения в компонент «миниатюра». Он сделает за нас всю работу по стилизации изображений. Единственное, что нам осталось — это установить свой отступ и цвет рамки в переменных для этого компонента:
Блок «Our team»
При верстке этого блока добавим сначала заголовок:
А затем добавим блок с классом «team», который состоит из двух строк, содержащих карточки сотрудников. Каждая карточка – это колонка. Карточка имеет ширину равную четырем колонкам нашей сетки. Все карточки кроме первой в строке имеют отступ слева, который создается классом «col-md-offset-1». Содержимое карточки состоит из изображения и описания (.caption)
После создания разметки зададим этим элементам следующие стили:
Помимо отступов и стилей шрифтов, которые тут задаются, мы изменили класс «col-md-offset-1». Ему пришлось задать отступ 3.7%, т.к. стандартный отступ был слишком большой.
Футер
Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.
Для начала создадим контейнер футера с этим блоками:
И применим к нему оформление:
Тег footer задает серую область по всей ширине экрана, а контейнер внутри него отображает область по центру на больших экранах и задает высоту и отступ футера. Для выравнивания блоков внутри футера мы используем колонки.
Лента Твиттера
Верстаем содержимое ленты Твиттера:
Для всех заголовков футера задаем шрифты и отступы, а также делаем подчеркивание через нижнюю рамку. Для параграфов указываем отступ. Ссылке, отображающую дату, задаем цвет и подчеркивание.
Карта сайта
Карта сайта представляет собой две равные колонки со ссылками:
Ссылкам задаем цвет, шрифт и отступ между ними.
Социальные ссылки
Вставляем набор ссылок в блок с классом «social».
Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классам отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью CSS сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.
Копирайт
Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ней.
Стили делают аналогично предыдущим блокам с той лишь разницей, что блок прибивается к правому краю и выравнивание внутри него так же по правому краю:
На этом вёрстка закончена. Готовый проект можно скачать здесь.