Урок 13: Bootstrap: framework и library. Компоненты и LESS

Bootstrap, он же Twitter Bootstrap - набор инструментов на HTML, CSS и JS для создания сайтов. Представьте, Вы можете создать один раз набор нужных свойств, которые позволят упростить верстку для будущих сайтов, так вот именно это и создали профессионалы из Twitter. Bootstrap состоит из стилей для кнопок, таблиц, списков, блока навигации, модальных окон и многом другом.

В целом расценивать Bootstrap можно как библиотеку, то есть указывать классы только для определённых блоков на сайте, при этом остальную часть верстки делать иначе, или же подключить к существующему сайту для опрощения верстки новых элементов в будущем. А так же Bootstrap FrameWork, а именно на базе сеточной верстки организовать полностью структуру сайта и главные элементы страницы (колонку, меню).

Главными преимуществами работы с Bootstrap являются: простота использования, легкая интеграция (хотя часть стилей всё же собьются на странице, но для двух готовых сайтов я потратил по часу для правок). адаптация под мобильные устройства и планшеты, а так же кросс-браузные решения для многих популярных задач.

Работать с Bootstrap достаточно легко, просто подключите в начале:

<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/vendor/public/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="/bower/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower/bootstrap/dist/css/bootstrap-theme.min.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="/style/style.css">
<script src="/bower/bootstrap/dist/js/bootstrap.min.js"></script>

А дальше уже можно делать всё, что хотите. Допустим, сделать красивую кнопку, то всего лишь стоит указать нужные классы:

<a href="#" class="btn btn-danger">Создать новость</a>