Я новичек в мире веб-технологий, и когда-то я плохо понимал что такое Bootstrap. Читал что он сильно экономит время на верстке и разработке сайтов. Но не мог это проверить.

Затем встретил много критики этого фреймворка.

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

После чего я заметил что многие веб-специалисты вообще его не используют. Или не умеют использовать по назначению.

И даже если специалист сказал «ок, сделаю на bootstrap», оказывается это еще не значит что он будет делать на bootstrap. Это значит что он подключит стили, но будет делать верстку один фиг в рукопашную.

Они матерятся, тратят в десятки раз больше времени чем нужно, получая кривой результат, который разъезжается в разных браузерах, и потом говорят что bootstrap плохой. При том что вскрыв код и посмотрев верстку, понимаешь что человек вообще bootstrap даже не применил, а прописал всю верстку руками с нуля.

Это как в анекдоте про пилу и чукчу:

[su_note note_color=»#fffff7″]Чукча в магазимне: —

Слушайте, вы говорили, что ваша пила пилит три куба дров за час!!!.

Мы как ни старались, больше одного бревна распилить не смогли.. .

Продавец: — Ну, покажите, как вы её заводите?

— А её что, ещё и заводить надо???[/su_note]

Вы думаете этим страдают новички? А нифига, замечал маневры, когда при наличии готовых элементов, опытный специалист, делая верстку на bootstap один фиг умудрялся прописывать класс и стиль вручную с нуля.

Зачем? Вот это вопрос вопросов. Ответ на который я не смог найти за последние пару лет. Нафига писать пусть даже 5 строк лишнего кода, когда можно просто скопипастить одно слово из готового фреймворка?

Есть подозрение что причина в том, что люди не до конца понимают возможности bootstrap и как его можно применять.

Эта статья несет цель показать все многоообразие возможностей bootstrap, которые позволяет без шуток повысить продуктивность и качество верстки в разы, при этом упростив процесс до уровня доступного даже вчерашнему школьнику 3го б класса и что не маловажно, сэкономив время в 5 или более раз.

Введение

Итак, Bootstrap и его подключение — пока оставим в покое. В упрощенном варианте это делается в 2 строчки. Мы рассматриваем WordPress и там очень многие темы изначально построены на Bootstrap, а значит надо лишь уметь его применять и понимать его возможности.

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

Под элементами пользовательского интерфейса понимаются:

1. как очень простые штуки типа

1.1. кнопочек

1.2. или рамочек для картинок

2. так и более сложные элменты типа

2.1. сетки с адаптивностью под разные разрешения экрана

2.2. или модальных окон

Это лишь пара примеров из всего многообразния заготовок.

Полный перечень можете почитать тут: http://getbootstrap.com/css/ и на соседних страницах.

Примеры

Возможно причина проблемы в том, что как правило в задаче не даются такие серые варианты элементов, а нужно что-то более разукрашенное. И специалист думает — bootstrap мне не подойдет, надо что то с нуля писать.

И он ошибается 🙂 Я не зря сказал что это заготовки, нарисованные в базовом варианте. Никто и ничто не мешает сделав элементов на основе заготовки, затем залить, разукрасить и подровнять так как надо по дизайн-макету.

Рассмотрим примеры…

Картинки

Предположим нам достался макет типа такого:

Мы видим 4 круга, разного цвета, внутрь которых засунули какие то картинки.

Как один из вариантов мы находим что в Bootstrap есть похожая заготовка для картинок http://getbootstrap.com/css/#images-shapes

Мы вырезаем эти картинки из макета и добавляем им класс из заготовки:

...

Все теперь картинки стали круглыми!

Это простой пример и не всегда хороший 🙂 Если к примеру мы можем взять не картинки, а векторные изображения или шрифтовые иконки, то возможен чуть более сложный, но технически грамотный манерв. Тут же для примера мы предполагаем что такой красоты у нас нет, а есть картинка и есть подходящая заготовка в Bootstrap.

Меню

Предположим нам нужно сверстать такое вот меню

Для этого нам подойдет заготовка http://getbootstrap.com/components/#navbar-default

Да она выглядит иначе, но как заготовка она уже будет работать.

Для этого нужно лишь вставить HTML код из примера, с соответствующими классами:

<nav class="navbar navbar-default" role="navigation">

И элементы примут вид заготовки.

Затем добавляем свой класс или ИД, например:

<nav class="navbar navbar-default my-menu" role="navigation">
Ну а далее все просто, классы Bootstrap дают скелет и основу, а мой класс .my-menu дает возможность стилизовать так как надо.
Хочу подчеркивание к выбранному пункту? Пожалуйста!
Хочу повыше сделать — пожалуста!
Хочу сделать белым или прозрачным — да без проблем.
Мой класс — че хочу то ворочу.
Но скелет — взят из Bootstrap и на его основу я не трачу свое время, при этом сразу получаю гарантию что в старых и разных браузерах это меню будет смотреться ровно и не придется мучиться с его переверсткой под разные браузеры.

Формы и поля

Далее рассмотрим пример верстки формы типа такой:

Тут видим две фишки:

1. сверху выделенные сообщения об успехе или ошибках

2. у полей встроены иконки человечка и замочка

Опять же, если у нас нет Bootstrap то все это мы будем верстать с нуля, что утомительно и долго.

Но в Bootstrap есть заготовки:

1. Алерты http://getbootstrap.com/components/#alerts

2. Поля сразу с иконками http://getbootstrap.com/components/#input-groups-basic

Слегка видоизменяя положение элементов и подбирая правильные иконки (http://getbootstrap.com/components/#glyphicons) мы получим нужный результат в базовом виде.

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

Вуаля! Готово!

Сетка

На последок рассмотрим что такое сетка и ее особенности использовани, как не странно но тут тоже часто встречается лажа.

Про сетку много написано тут http://getbootstrap.com/css/#grid

Там много воды.

Суть сетки проста — зачастую нам нужно разбить секцию страницы на колонки равной или примерно равной длины, чтобы разместить там элементы, иногда таким образом, чтобы при малых экранах, эти колонки спрыгивали друг под друга и помещались на узких экранах смартофонов.

Пример — 3 квадрата в 3 колонки равной длины:

Нам нужно добавить элемент строки и далее элементы колонок внутри этой строки на подобии того как мы работаем с таблицами (tr, td …)

Вот так:

<div class="row">
 <div class="col-md-4">Квадрат 1</div>
 <div class="col-md-4">Квадрат 2</div>
 <div class="col-md-4">Квадрат 3</div>
</div>

Здесь сказано что нужна одна строка, в которую разместить 3 колонки равной длины, и средним запасом эластичности.

Давайте разберем подробнее 🙂

1. Мы определили верхний элемень с классом .row, который создат строку или секцию. Это может быть не только div, а любой элемент: nav, ul, span …

2. Внутрь мы поместили элементы с классом вида col-md-4, где 4 это доля элементов из ряда равного 12 единицам. Всего в ряду может быть 12 единиц. 4 означает что мы занимаем 1/3 ряда. Сделав три таких элемента мы разобьем строку на 3 колонки.

3. Если попытаться добавить еще элементы с таким же классом, то они перейдут на новую строку. Если добавить 6 таких элемнетов то получим 2 строки по 3 колонки.

4. Внутрь колонки можно поместить что угодно, например картинку или текст.

5. А что такое md? Это как раз эластичность. Если задать lg, например col-lg-4, то у элемента при сужении экрана не будет эластичности и он сразу спрыгнет под соседа. Типа адаптируется под меньшую ширину. Если задать xs, например col-xs-4, то как не сужай экран, колонка останется на одном уровне и даже при самом узком экране будет 3 колонки. Зачастую это плохо сказывается на отображении и все может выглядеть печально. md в нашем примере это как правило золотая середина и оптимальный вариант — есть запас эластичности и при сужении экрана не сильно, колонки просто меняют ширину но остаются в одну линию, если же экран все же сильно сузился, то колонки спрыгнут друг под друга и встанут в одну колонку, сохранив приемлемый вид содержимого для мобильных устройств.

6. Очень важно чтобы элемент с классом .row содержал только элементы с классом начинающимся на .col-

6.1. Иначе это нарушение сетки и последствия могут быть не предсказуемы. Да и просто признак кривых рук и пробела в мат части.

6.2. Зачастую ошибка выглядит так:

<div class="row">
 <div class="col-md-6">.col-md-6</div>
 <div class="col-md-6">.col-md-6</div>
 <div class="mygreatcontent">Тут какой то контент</div>
</div>

6.3. Тут если автор хотел разместить третий блок в одну колонку, то должен был у первых двух поставить по 4 и третьей дать 4, чтобы 4*3=12 — получить 3 колокни, либо если он хотел разместить третий блок под первыми двумя, то нужно его вынести за границы блока с классом row. Вот и все 🙂

Резюме

Итак, попробовав пару раз сделать на базе Bootstrap верстку вам это понравится, но надо пару раз и оба раза делать правильно, иначе будет как в анекдоте про чукчу, а это никому не нравится.

С первого раза может не вставить, потому что первый блин как правило комом, будут ошибки, притирки, знания еще будут слабые. Затем через некоторое время знания в голову упресуются и второй раз уже будет многократно легче первого. Ну а с третьего и далее, вы вообще можете возмонить себя богом верстки 🙂

И тут надо обратить внимание на 2 особенности:

Сначала чистый Bootstrap и функционал

  1. Если перед вами стоит задача сделать какие то сложные страницы с кучей элементов, то стоит изначально прописать функциональные вещи, проверить все ли работает, опираясь только на элементы Bootstrap в чистом виде без примесей свего стиля.
  2. Будь то таблицы, табы или аккордеон — сначала запустите чтобы это все работало в чистом виде.
  3. Особенно это косается разработки сайтов на базе WordPress. Прописать шаблоны и шорткоды, чтобы они работали с чистым Bootstrap, чтобы все выводилось, кликалось и переключалось.
  4. Этот маневр можно назвать — Прототипирование. Оно не сильно отличается от Axure по времени, но при этом гораздо ближе к будущему результату.
  5. И вот когда ваш прототип страницы уже ожил и ведет себя нормально, можете начать его стилизовать, добавляя цвета, чуть меняя формы элементов, местарасположения и другие настройки.

Очень хорошо проверять ошибки кросбраузерности

  1. Иногда найти причину почему тот или иной элемент плохо отображается в каком-либо браузере, например меню разъехалось в Internet Explorer, бывает довольно сложно.
  2. И оно сильно упрощается если у вас Bootstrap. Вы всегда можете открыть этот элемент в чистом виде на официальной странице http://getbootstrap.com/css/ и если там ок, то это значит ошибка в ваших стилизациях, а своих стилизаций как правило не так уж много и вычислить ошибку даже перебором — делов на пару минут.