jack_azizov
@jack_azizov

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

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

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

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

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

Как вы понимаете что допустим макет шириной 1920px, в котором 12 столбцов и если вы зададите элементу ширину "col-lg-* " ту которую она занимает в макете,то элемент встанет именно туда куда нужно?
Для этого в макете есть разметка, в т.ч. по колонкам, в т.ч. её можно наложить самому, если очень хочется. По запросу "Photoshop сетка 12 колонок" или прочим им подобным - можно найти очень много всего интересного. Смотрите на сетку и понимаете, что куда встанет. Это в том случае, если внезапно по какой-то причине её там не оказалось.

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

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

Может есть какие то ресурсы ,где доходчиво объясняют такие нудные и глупые ошибки?Или может объясняют как правильно делать ,а как нет. И пожалуйста, не нужно говорить "почитай документацию на сайте" .
Документацию читать на сайте, мне кажется ещё рано. Для начала я бы посоветовал почитать что-то более абстрактное, не знаю даже, что бы это могло быть конкретное... Возможно, стоит посмотреть какие-то видео аля "как заклепать сайт на страпе за 15 минут", или что-то в таком духе. Аудио-визуальную композицию, воспринимать обычно проще, чем текст.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
zorro76
@zorro76
Вот вы открываете макет,на что вы сморите в первую очередь ?
- на сетку, это очевидно.

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

Ну а по существу то:
идеально - это макет нарисован под Bootstrap: 12 колонок, контейнер 1170 и контент в этом контейнере, то тогда и думать нечего.
Ну а в остальных моментах, нужно два раза подумать стоит ли или не стоит, и да media queries никто же не отменял.
Ответ написан
Комментировать
orlov0562
@orlov0562
I'm cool!
Секрет весь в том, что макет должен быть изначально 12 колоночный и все элементы, должны быть выравнены относительно колонок. Т.е. дизайнер берет сетку bootstrap-а и по ней располагает элементы с учетом требований (фиксированая ширина или резина и т.д.). Причем для каждого разрешения делается свой дизайн.

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

Войдите, чтобы написать ответ

Похожие вопросы