В первое время после отказа от табличной верстки было немного непривычно переходить на блочную верстку. Тогда, да и сейчас, мне казалось, что она многое усложнила. И так оно было до появления фреймворков, которые очень сильно упростили верстку. Речь идет о фреймворках для так называемой адаптивной верстки. Наиболее популярные среди их это Foundation и Bootstrap. В отличие от Foundation 5, с новой версией у меня отношения не сложились, потому решил освоить Bootstrap. И не прогадал.
Загрузка Bootstrap
Загрузить актуальную версию Bootstrap можно на сайте движка http://getbootstrap.com/. В разделе Customize можно настроить, какие модули из него требуются для загрузки. Для знакомства и изучения загрузите все модули.
Подключение Bootstrap
Для подключения Bootstrap к проекту нужно скопировать содержимое скачанного архива в папку проекта и подключить js и css файлы. Также необходимо добавить тэг <meta name="viewport" …> для того, чтобы браузер не масштабировал.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
...
<script src="bootstrap/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
Преимущества от использования Bootstrap:
- Время разработки – гибкая система верстки и функционал элементов управления сокращает время на разработку уже разработанных блоков;
- Гибкость – новые стили добавляются к встроенным классам, благодаря чему обновление версии фреймворка не потребует глобальных изменений;
- Много готовых шаблонов – зачастую можно воспользоваться готовым шаблоном сайта лишь немного адаптировав его под свои задачи. Это относится и к пункту 1 о времени разработки.
- Среда применения - Bootstrap активно используется для создания фронтэнд и бэкэнд интерфейсов, в том числе для портальных решений – SharePoint, Битрикс, WordPress, Joomla и другие.