Что стоит изучить по Bootstrap 3?

Практически ничего не стоит :-) Берешь и пользуешься, первое время украдкой поглядывая в сторону документации.

Алексей Немиро: Спасибо, я просто не совсем понял, как правильно сетками пользоваться, вот ищу какой-нибудь наглядный видеурок :) Кстати, как думаете это хорошая идея учиться верстать сразу на бутстрапе?
Вообще теорию верстки изучил по довольно таки подробным урокам, пришло дело практиковаться и мне многие советуют именно с Бутстрапа стартовать.

raulvodov: как потенциал для получения прибыли от умения работать с Bootstrap - да, должно быть полезно, т.к. многие о нем знают и желают видеть в своих проектах. Однако, если клиент захочет что-то неординарное, то придется изрядно помучиться, ковыряясь в недрах чужого и непонятного кода, особенно если нет достаточных знаний HTML, CSS, JavaScript. Если создавать свой код с нуля, то решать проблемы будет проще, а опыт полезней. Как вариант, можно делать свой код и смотреть, как необходимые задачи решаются в Bootstrap, пробовать делать также.

По сеткам, если в двух словах, там обычная математика. Сумма чисел в классах должна равняться 12, чтобы блоки располагались в одной строке: col-md-8 + col-md-4 = 8 + 4 = 12
col-md-9 + col-md-4 = 9 + 4 = 13 - один блок не влезет, уйдет на следующую строку
col-md-4 + col-md-1 = 4 + 1 = 5 - не хватает 7 блоков, справа будет дырка
и т.п.

col - колонка;
md - размер, в данном случае middle (средний);
число - размер блока, от 1 до 12.

Размеры для устройств:

• xs - большие экраны
• md -средние
• sm - маленькие

Размеры можно комбинировать, адаптируя содержание под разные устройства. Главное, на первом этапе, чтобы сумма чисел блоков с одним размером была равна 12. Например:
col-xs-8 + col-xs-4 = 12
col-md-6 + col-md-6 = 12

<div class="col-xs-8 col-md-6"></div>
<div class="col-xs-4 col-md-6"></div>

На больших экранах левый блок будет чуть шире, чем правый. На средних экранах оба блока будут одинакового размера.
Можно выходить за рамки 12, или не доходить, если нужно.
Для группировки блоков использовать row.

Большое спасибо за подробный ответ. Дело в том, что я учусь верстке не для заказчиков, а для клипания шаблонов под соответствующие площадки. Там многие верстают под Бутстрап 3, вот поэтому и подумал, что лучшим вариантом для меня будет сразу на нем работать.

Просто сейчас катастрофически времени не хватает, нужно в короткие сроки научиться верстать.

Как считаете, если я буду верстать на Бутстрапе, у меня будут откладываться знания по верстке?

По поводу сетки про col-md-* понял, но вот по поводу xs и sm запутался. Что относится к большим экранам, а что к средним? Просто пока вообще представить не могу, что происходит при изменении размера браузера.

raulvodov: понять размеры просто, достаточно посмотреть на код. Это так же даст ответ на вопрос, стоит начинать с Bootstrap или лучше изучать CSS с нуля. Если будет непонятно, что такое xs, md, sm и т.п., то лучше с нуля. Если использовать Bootstrap как есть, не имея знаний, то кроме знаний Bootstrap вы ничего толком не получите. Со временем, вы будете знать, как сделать кнопки определенного стиля, нужные блоки и прочие мелочи, но наверняка не будете понимать, как это сделано, поскольку использовали все готовое. Если пытаться повторять или изменять, то что сделано в Bootstrap, то пользы будет больше. По сути, все обучение у человеков сводится к повторению и подражанию, по крайней мере на начальном этапе. Чем быстрее человек научится подражать, тем быстрее перейдет к стадии самостоятельного развития полученных знаний и навыков. Я бы не рекомендовал бездумно копировать и использовать Bootstrap, лучше стараться делать что-то свое (можно на базе Bootstrap), HTML и CSS не такие уж и сложные.

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


Оптимальный вариант – средний размер (md).

Алексей Немиро: Еще раз большое спасибо! Дело в том, что я не знаю с чего подступиться, т.е. как начать верстать. вроде теорию прошел (порядка 60 часов подробных курсов), но еще не практиковался. все советуют взять и сверстать, а я даже пока не представляю, как пошагово с psd-макета делать верстку)

raulvodov: тогда точно нужно с нуля начинать :-)

Bootstrap задает свои правила. Если делать верстку самостоятельно, с нуля, то ограничений не будет. Делай, как можешь и будет, то что получится :-)

По разбору макета, нужно смотреть что там есть, выделять небольшие куски и перемещать в верстку. Начинающие верстальщики обычно тупо вырезают кусок макета и размещают фоном :-)) Так конечно лучше не делать, но если не от чего оттолкнуться, то можно; но с последующей доработкой, уменьшением графических элементов. И начинать нужно с простого: ровные блоки, минимум эффектов.

спасибо большое, будем учиться :)

Алексей Немиро: Вообще я собираюсь верстать макеты такого уровня https://www.behance.net/gallery/22326223/Onado-One... насколько сложно подобный макет верстать? или найти что-нибудь попроще?

raulvodov: любой квадратный будет достаточно простым, как японский арбуз :-)

Алексей Немиро: что значит квадратный, извиняюсь? :)

raulvodov: квадратный, означает, что не круглый :-) Простой, плоский, минимум графики и без сложных элементов.

Алексей Немиро: спасибо, понял, что-нибудь из своих работ https://www.behance.net/raulvodov пожалуй сверстать попробую. можно последний вопрос, как в хтмл изначально структура (скелет) формируется? на основе каких принципов? у меня просто подруга тоже параллельно учится верстать, у нее те же проблемы были до тех пор, пока ее знакомый верстальщик с ней на пару не сделал шаблон :)

raulvodov: Если и есть какие-то принципы в верстке, то у каждого свои :-) Структура строится по потребностям. Стремиться нужно к простоте, чтобы проще было использовать. Если шаблон делается под CMS, то нужно учитывать особенности этой CMS. Стандарты и кросс-браузерность следует учитывать, а также возможности для SEO. Нужно изначально определиться с требованиями.

С "квадратными" особых проблем возникнуть не должно. Для начала можно просто последовательно размещать блоки. Выделить из макета основные части: шапка, панели, блоки контента, подвал. Сделать грубые наброски:

<div class="page">
  <div class="head"></div>
  <div class="panel"></div>
  <div class="content"></div>
  <div class="panel"></div>
  <div class="footer"></div>
</div>

В CSS определить основные стили: отступы, шрифты, размеры, цвета, ссылки, стили элементов формы (тоже в виде набросков).

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

Кредиты банков - вроде самый простой вариант. Можно с него начать. Сделать три блока: фон, контент, панель. И далее смотреть, куда копать. Может можно без блока для фона сделать, использовать body. Ovelrlay явно потребуется. Основной заголовок h1, меню ul, список шагов, тоже ul. Заголовок на панели h2, аналогично в окнах. Желательно учесть вывод ошибок, предупреждений, в том числе при неправильном заполнении формы. Стили нужно определить для всех элементов формы: text, textarea, select, radio, checkbox и т.п.; а не только те, которые нарисованы в макете.

C JavaScript, если использовать, то главное не перемудрить и не ограничивать возможности по использованию шаблона. Лучше вообще стараться без этого обойтись.

Floristelle тоже должен быть несложным. Банки проще.

Bootstrap и прочие для этого лучше не использовать, много лишнего. Лучше с нуля все сделать, это и проще будет.

Алексей Немиро: Огромнейшее спасибо, будем учиться :)