Как правильно верстать bootstrap?

Question

[Semmy_99]

Доброго времени суток.
Друзья, заранее прошу не агрессируйте,возможно вопрос для кого то покажется до тошноты надоедливым.Я новичок в WEBe,изучаю верстку.И сейчас большинство верстальщиков пользуются сеткой Bootstrap,как я понял потому что с ней можно в разы ускорить процесс адаптации и верстки в целом.
Я хочу обратиться к людям,которые часто верстают и верстают с помощью Botstrap.Пожалуйста объясните ,как вы понимаете что например 'этот макет' можно сверстать с помощью bootstrap сетки , а 'этот' нельзя.
Т.е. предположим передо мной лежит 10 макетов ,у одного макета width 960 ,у друго 1140 у третьего 1920 и т.д.
Вот вы открываете макет,на что вы сморите в первую очередь ?Как вы понимаете что допустим макет шириной 1920px, в котором 12 столбцов и если вы зададите элементу ширину "col-lg-* " ту которую она занимает в макете,то элемент встанет именно туда куда нужно? Или вы добавляете какие то маргины pedding'и к каждому элементу,который не встал ровно + это же надо все высчитывать ,посмотреть отступ который в макете ,посчитать сколько в бутстрапе отступ, а потом добавить/убрать.
Я пытаюсь понять что я делаю не так ? Почему мне приходится переопределять стили по 333раза. Хочу научиться пользоваться фреймворком,которые создали люди для людей и ускорить процесс верстки,а на деле получается что я трачу раза в 3 больше времени
Может есть какие то ресурсы ,где доходчиво объясняют такие нудные и глупые ошибки?Или может объясняют как правильно делать ,а как нет. И пожалуйста, не нужно говорить "почитай документацию на сайте" .

Comments

[Semmy_99]

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

[Евгений Вольф]

Обычно, каждый "не текстовый" элемент, должен быть помещен в две колонки, либо масштабироваться по соотв. формуле (самый простой пример формулы - "100% ширины"). Но это если очень упрощённо говорить.

Если конкретно по Вашей картинке - в колонке справа все вложенные элементы имеют ширину 12 колонок, в этом не очень много смысла. Но, если Вам бы нужно было бы разделить правую колонку на ещё несколько колонок - такой подход имел бы место/смысл, главное не перестараться. И важно не забывать про конечную высоту элементов, что бы не получилось так, что высота левой ячейки, допустим, 200px, а правой, например, 500px.

P.S. Очень много мыслей... но, давайте попробую прям конкретно по Вашему вопросу ответить:
в общей сложности, правильные оба варианта, на практике используются и тот и другой. Лично я чаще использую первый, т.к. для мудреной вёрстки, а так же вёрстки не админки, а так же для вёрстки с повышенными требованиями качества - я не использую страп вообще.

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

[Semmy_99]

Евгений Вольф: вот в этом то и вся проблема,когда верстаешь без bootstrapa когда как то меньше,но для трудоустройства работодатели требуют умение адаптивно сверстать с bootstrap.Наверно нужно просто брать макеты и верстать ,верстать и верстать пока до автоматизма не дойдет все.

Ещё хотел спросить вот здесь лежит изображение share.pho.to/Ab0DL/auth?token=Ab0DL.503373.1c7763b...
12 колоночный header. Какая структура будет у такого headera для разрешении экрана больше 1200?



modusversus

Такая ?Меня интересуют элементы меню. Вот смотрите часть из них выходят за рамки колонок. В таком случае как это все оформляется ? Считается диапазон колонок в которое входит всё меню,а в качестве отступов между li задают то пространство между "розовыми" колонками ?и в таком случае элементы должны встать правильно ?

[Semmy_99]

Евгений Вольф: и есть ли какое то постоянные стили в bootstrap, которые вы сносите на дефолтные ? например как отступы у эл-ов + list style type. Если да,можете перечислить ,хотя бы те о которых помните

[Semmy_99]

Евгений Вольф: и ещё один вопрос ) как вы начинаете верстку ? Допустим длина всего макета 1500 px - это вместе с тем что выходит за рамки 12 колонок. Что вы делаете ставите окно браузера 1500px и начинаете верстать под такую ширину ?

[Евгений Вольф]

Semmy_99: элементы которые выходят за пределы (на поля) одной колонки - по ширине соответствуют тем колонкам, на поля которых они заходят. В случае с меню - меню обычно делается по ширине 12 колонок, не редко в виде таблицы, по той причине, как минимум, что кол-во пунктов меню может:
а) Варьироваться
б) Пунктов меню может быть например 7, и Вы их не распределите равномерно.

Не редко меню рисуют в виде таблицы, а перестраивают уже через media-query или подменяют (скрывают одно, показывают другое) в зависимости от разрешения устройства.

---

Если ширина макета 1500, насколько я помню, в страпе есть класс - .container-fluid, он растягивается на всю ширину экрана, оборачиваете его в родительский слой с max-width: 1500px и у вас будет 12 колонок на 1500px. Второй вариант - можно воспользоваться

[Евгений Вольф]

Semmy_99: если хотите, у меня в профиле есть скайп, добавляйтесь, там можно будет задавать всякие такое вопросы в режиме реального времени :)

[Semmy_99]

Евгений Вольф: хорошо,огромное спасибо.

Answer 1

[Евгений Вольф]

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

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

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

Любой можно, вопрос в кол-ве правок, которые туда придётся внести. У страпа есть набор разрешений, если они подходят - значит можно. Вопрос в машстабировании элементов, а не в сетке.

Вот вы открываете макет,на что вы сморите в первую очередь ?

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

Как вы понимаете что допустим макет шириной 1920px, в котором 12 столбцов и если вы зададите элементу ширину "col-lg-* " ту которую она занимает в макете,то элемент встанет именно туда куда нужно?

Для этого в макете есть разметка, в т.ч. по колонкам, в т.ч. её можно наложить самому, если очень хочется. По запросу "Photoshop сетка 12 колонок" или прочим им подобным - можно найти очень много всего интересного. Смотрите на сетку и понимаете, что куда встанет. Это в том случае, если внезапно по какой-то причине её там не оказалось.

Или вы добавляете какие то маргины pedding'и к каждому элементу,который не встал ровно + это же надо все высчитывать ,посмотреть отступ который в макете ,посчитать сколько в бутстрапе отступ, а потом добавить/убрать.

Макет либо отрисован под страп, либо заказчик готов смириться с тем, что всё будет немного не так, как в макете, либо - он делается без страпа, т.к. "подогнать под него", не редко сложнее, чем обойтись без него вообще, в том ракурсе, в котором Вы описали.

Я пытаюсь понять что я делаю не так ? Почему мне приходится переопределять стили по 333раза. Хочу научиться пользоваться фреймворком,которые создали люди для людей и ускорить процесс верстки,а на деле получается что я трачу раза в 3 больше времени

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

Может есть какие то ресурсы ,где доходчиво объясняют такие нудные и глупые ошибки?Или может объясняют как правильно делать ,а как нет. И пожалуйста, не нужно говорить "почитай документацию на сайте" .

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

Answer 2

[sergey]

Вот вы открываете макет,на что вы сморите в первую очередь ?

- на сетку, это очевидно.

Как вы понимаете что допустим макет шириной 1920px, в котором 12 столбцов и если вы зададите элементу ширину "col-lg-* " ту которую она занимает в макете,то элемент встанет именно туда куда нужно?

- за подобные вопросы я бы банил (научитесь формировать четче свою мысль).

Ну а по существу то:
идеально - это макет нарисован под Bootstrap: 12 колонок, контейнер 1170 и контент в этом контейнере, то тогда и думать нечего.
Ну а в остальных моментах, нужно два раза подумать стоит ли или не стоит, и да media queries никто же не отменял.

Answer 3

[Vitaliy Orlov]

Секрет весь в том, что макет должен быть изначально 12 колоночный и все элементы, должны быть выравнены относительно колонок. Т.е. дизайнер берет сетку bootstrap-а и по ней располагает элементы с учетом требований (фиксированая ширина или резина и т.д.). Причем для каждого разрешения делается свой дизайн.

Если, у тебя изначально этого нет, значит либо все подгоняется под сетку "руками", если заказчик не против, либо сетка bootstrapa не используется и расположение элементов задаются обычными, подходящими блоками, чтобы получить пиксель-в-пиксель относительно макета.