Как использовать Bootstrap для верстки сайтов

Приветствую вас на своем блоге, который посвящен веб-технологиям. В частности, сегодня я хотел бы вам рассказать о css фреймворке bootstrap, как использовать его, как установить и зачем это вообще нужно веб-разработчику.

Что такое Bootstrap

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

Преимущества Bootstrap

Кроме повышения скорости разработки, фреймворк имеет еще ряд явных достоинств, среди которых хотел бы выделить следующие:

1. Кроссбраузерность и адаптивность. То, что без фреймворка приходится реализовывать самостоятельно, с Bootstrap намного проще, потому что он, по сути, берет на себя реализацию этих важных аспектов. Созданные в нем сайты будут хорошо отображаться на всех устройствах, и даже в старых браузерах все будет нормально выглядеть.
2. Открытый исходный код. Таким образом, матерые веб-разработчки получают возможность доработать фремворк под свои нужды, включить в него свои компоненты и т.д.
3. Простота. Чтобы овладеть фреймворком, не нужно быть зубастым профи, которого можно разбудить ночью, и он сверстает тебе крутой сайт. Достаточно владеть знаниями по HTML и CSS, неплохо будет знать JS на начальном уровне.

Недостатки

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

Итак, с плюсами и минусами разобрались, но я все-таки скажу, что Bootstrap скорее хороший инструмент, чем плохой.

Установка фреймворка

Скачать Bootstrap вы можете на официальном сайте На этой странице можно настроить параметры под себя, после чего скачать собственную версию. Все папки, которые вы скачаете, необходимо скопировать в свой проект. Css-файл фреймворка необходимо подключить к html-файлу. Стоит отметить, что есть две версии файла – полная и сжатая. Во второй читаемость кода очень плохая, но размер меньше. На рабочем проекте рекомендуется использовать именно этот вариант.

Как работать с ним

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

Создание информативного блока в тексте с помощью Bootstrap

Представим, что нам нужно в статью вставить врезку, так называют блок, который прижат к левому или правому краю, выделен другим цветом и содержит какую-то важную информацию. Итак, за создание таких блоков в Bootstrap отвечают классы pull-left и pull-right. Соответственно, для левосторонних и правосторонних блоков.

Итак, перед нами стоит задача: создать левосторонний блок красного цвета, шириной 250 пикселей. Что мы делаем? Создаем div, даем ему такие классы:

<div class = “pull-left bg-danger custom”></div>

Итак, первые два класса браузер возьмет из фреймворка, потому что они уже в нем описаны. Pull-left сделает наш блок плавающим и прижмет его к левому краю, а bg-danger сделает его фоновый цвет бледно-красным, так выводятся сообщения об ошибках.

А класс custom создан нами для того, чтобы мы уже вручную добавили определенные стили. Создаем свой собственный style.css и пишем в нем:

Вот так вот мы и добились нужной задачи. Нам не нужно вручную определять для блока все свойства, просто задавайте нужные классы и все. Соответственно, изучение Bootstap заключается в изучении классов, которые в нем есть и их использовании.

Как научиться работать с фреймворком?

Хорошо, мы рассмотрели лишь пример, а как действительно научиться работать с фреймворком и создавать с его помощью классные адаптивные шаблоны? Я рекомендую вам для этого подписаться на эту рассылку, после чего вы получите доступ к восьми урокам по Bootstrap, благодаря которым сверстаете свой первый сайт с помощью фреймворка!

А как мне стать профи по Bootstrap?

Как вы понимаете, бесплатно вас никто учить не будет. Умея работать с данным фреймворком, вы сможете зарабатывать больше денег, чем ваши коллеги, которые делают все вручную. Поэтому, если вы хотите быстро обучиться, я рекомендую взять крутой обучающий курс от команды Webformyself В нем вы узнаете все тонкости работы с фреймворком, а заодно научитесь создавать адаптивные сайты, причем намного быстрее, чем без Bootstrap.