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

Question

[Raul Abdullin]

Изучаю верстку, прошел кое-какие курсы по теории. Хочу сразу на практике учиться верстать на Bootstrap 3.
Прочитал материалы на данном сайте www.oneskyapp.com/ru/docs/bootstrap/css чувствую, что чего-то не хватает, остались пробелы в понимании :)
Посоветуйте какой-нибудь небольшой понятный видеоурок без воды по Bootstrap 3 для начинающих.
Спасибо, всем хороших выходных, а я буду работать :)

Comments

[Алексей Немиро]

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

[Raul Abdullin]

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

[Алексей Немиро]

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.

[Raul Abdullin]

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

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

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

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

[Алексей Немиро]

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

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


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

[Raul Abdullin]

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

[Алексей Немиро]

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

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

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

[Raul Abdullin]

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

[Raul Abdullin]

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

[Алексей Немиро]

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

[Raul Abdullin]

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

[Алексей Немиро]

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

[Raul Abdullin]

Алексей Немиро: спасибо, понял, что-нибудь из своих работ 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 и прочие для этого лучше не использовать, много лишнего. Лучше с нуля все сделать, это и проще будет.

[Raul Abdullin]

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

Answer 1

[Влад]

Не учитесь сразу верстать на Bootstrap 3

Comments

[Raul Abdullin]

Можно узнать почему?

[Raul Abdullin]

с чего вы бы посоветовали начинать практику, если не с Бутстрапа? Я с самого начала хочу учиться делать адаптивные сайты.

[Роман]

raulvodov: я сам начинающий верстальщик, будущий фронтэндщик =) Совет - для начала рабреритесь с фиксированной версткой и резиновой. С потоком страницы. А то чего доброго начнете адаптивность на флоатах делать.

[Raul Abdullin]

paradokso: А зачем мне фиксированная, если я буду делать исключительно адаптивные сайты?

[Влад]

Лучше найдите занимательные задачки по верстке (если на работе их недостаточно) и учитесь на них верстать без фреймворков. Разберитесь с темой адаптивной вёрстке. Потом сами решите, нужен ли вам в конкретной ситуации бутстрап и что он вам даст.

[Raul Abdullin]

Владимир Шестаков: Да задачки делал всякие и 60 часов теории прошел, да только толку мало без практики. А с чего начать практиковаться не знаю :) Т.е. не понимаю с чего подступиться, чтобы сделать первый шаг :)

[Влад]

raulvodov: Вам следует просто начать что-то делать. Мало опыта - начинайте с малого. Меньше спрашивайте, больше делайте =) Ваши неудачи не навредят обществу. Если совсем стопр, сделайте двухколоночную страницу на сетках бутстрапа, поэкспериментируйте с ней.

[Роман]

raulvodov: но вы ведь сами говорите, что практики недостаточно. Для начало необходимо освоить "пальцами" как создавать структуру, как заверстать страницу правильно с семантической стороны и без множения ненужных классов. Т.е. необходимо пару макетов на фиксированной сделать. Вы же в детстве не сразу научились ходить? сперва ползали, потом только стояли. Так и здесь.

[Raul Abdullin]

paradokso: Дело в том, что я не знаю с чего подступиться, т.е. как начать верстать. вроде теорию прошел, но еще не практиковался. все советуют взять и сверстать, а я даже пока не представляю, как пошагово с psd-макета верстать)

[Роман]

raulvodov: Вот поэтому первый макет и нужно фиксированным сделать.
А начать по схеме header> main > footer.
Разложите страницу на составные блоки и 1 в 1 воспроизведите в браузере то что на псд макете.

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

[Raul Abdullin]

paradokso: "Разложите страницу на составные блоки и 1 в 1 воспроизведите в браузере то что на псд макете." Эх знал бы я еще как это раскладывать :)
"Сперва создайте "скелет" из хтмл, а потом с помощью цсс придавайте странице форму. И не забывайте о предварительном обнулении стилей"
Вот кстати по поводу скелета, как раз не совсем понимаю, как его делать и на что опираться.
Вообще я собираюсь верстать макеты такого уровня https://www.behance.net/gallery/22326223/Onado-One... насколько сложно подобный макет верстать? или найти что-нибудь попроще?

[Влад]

raulvodov: забудьте про вёрстку как страшный сон

[Роман]

raulvodov: ну это обычный шаблонный макед под бутсрап. Можно и с него начать. Но я бы порекоменовал сперва что-то покороче сверстать (если на чистом хтмл/цсс), что бы быстрее результат увидеть. Прощупать "скелет" и присвоение стилей.

[Алим Алибаев]

Вы похоже думаете, что адаптивные страницы верстаются только на бутстрапе. Нет, это не так, Bootstrap это всего лишь готовый CSS Code.

Answer 2

[Вадим Белкин]

Bootstrap это по сути набор готовых UI элементов, плагинов для них же, который используют чтобы не тратить время на создание с нуля UI элементов. Для начала ознакомьтесь со структурой всех элементов, от простых кнопок, иконок и полей, до более объёмных, вроде модальных окон и т.п., как их можно совмещать, модифицировать классами, компоновать с помощью сетки и т.д. И в процессе при необходимости изучите и сами js плагины для управления этими же UI элементами.

Comments

[Raul Abdullin]

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

[Вадим Белкин]

Учиться его применять начинающим разработчикам не совсем хорошая идея. А учиться создавать html структуру, стилизацию глядя как сделано в бутстрапе, заимствуя и изучая что-то новое - ничего плохого)

[Raul Abdullin]

Вадим, а почему не совсем хорошая идея?

[Вадим Белкин]

Если мало опыта в построение html структуры UI элементов, кроссбраузерной стилизации и т.п. , то трудно будет правильно и грамотно компоновать, совмещать, перестилизовывать и строить структуры на его основе, для чего он собственно и нужен

[Raul Abdullin]

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

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

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

[Вадим Белкин]

Полноценных знаний верстки не будет, только опыт построения на основе бутстрапа и создание своего похожего на него. HTML5, семантика и т.п. придётся осваивать отдельно

[Raul Abdullin]

Вадим Белкин: а с чего вы бы посоветовали начинать практику, если не с Бутстрапа? Я с самого начала хочу учиться делать адаптивные сайты.

[Вадим Белкин]

Для грамотного фронтенда посоветовал бы изучить сперва HTML/HTML5 (применение различных тегов, когда и как применять html5 теги). Затем начать осваивать CSS/CSS3 (базовые знания, кроссбраузерность, css3 и т.п.). На стадии изучения CSS начнете понимать, как нужно/правильно делать HTML структуры каких-то UI элементов, их взаимодействие друг с другом. Без подобных основ делать что-то более объемное, сложное на бутстрапе будет проблематично.

[Raul Abdullin]

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

Answer 3

[Максим Гречушников]

Что стоит изучить по Букварю?

простите, но что там не понятного? берешь и копипастишь.

Comments

[Raul Abdullin]

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

Answer 4

[Иван Сергеевич]

Bootstrap - это фреймворк, т.е. набор готовых стилей и плагинов под jQuery(фреймворк на javascript).
Сначала научитесь верстать, просто верстать не сложные макеты, на чистом CSS, только под десктопы(компы, ноуты), например возьмите эти 5 действительно полезных шаблонов адаптивной р... и сверстайте их просто под десктопы.
Материалы впитывайте вот отсюда htmlbook, т.к. он давно не обновлялся, там большинство свойств поддерживаются в последних браузерах!

Comments

[Raul Abdullin]

Почему не стоит сразу на Бутстрапе?

[Иван Сергеевич]

Так Вы будете только классами оперировать и малость писать CSS, что в с самого начала ни есть хорошо!

[Raul Abdullin]

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

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

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

[Иван Сергеевич]

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

[Иван Сергеевич]

Так же можете посмотреть скринкасты html.hasbrains.org

[Иван Сергеевич]

Советую посидеть на хабре habrahabr.ru , там можно найти много чего интересного

[Raul Abdullin]

А почему рано или поздно нужно будет верстать без него? Мне кажется он настолько популярен, что с каждым годом всё больше людей его наоборот используют.

[Иван Сергеевич]

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

[Raul Abdullin]

Иван Сергеевич: Но ведь на Бутстрапе можно подключать отдельные элементы, необязательно подключать всю библиотеку :)

[Иван Сергеевич]

raulvodov: Допустим Вы подключили Grid, не все классы Вам оттуда понадобятся, а трафик кушать будут, тогда их стоит вычещать

Answer 5

[Sergej]

А почему именно bootstrap ?
Есть и другие =)

К примеру
materializecss.com/buttons.html
foundation.zurb.com/docs

Answer 6

[ZeXeDeR]

тут вроде неплохие youtube. На хабре хвалят, но я пока еще не смотрел

Answer 7

[Sanes]

Если вас интересует вёрстка с макетов, то лучше начать с Photoshop. Изучить ту часть, которая нужна для верстальщика. Попробовать сверстать шаблон со своими стилями, чтобы немного закрепить базовые знания по HTML/CSS. Ну а дальше можно пользоваться фреймворками. Пробовать писать темы для фреймворка и вообще посмотреть, как ту или иную задачу решили профессионалы.

Comments

[Raul Abdullin]

Фотошоп я более менее знаю, как никак 6 лет дизайном сайтов занимаюсь :)