Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 23.03.2015, 12:22   #1
Capz
 
Регистрация: 19.08.2013
Сообщений: 5
По умолчанию Адаптивная верстка на Бутстрапе

Привет, уважаемые форумчане! Недавно решил освоить бутстрап, и начал верстать под него стандартный двухколоночный макет шириной 980px. Работаю на ноуте, с разрешением 1366*768, колонки создавал с помощью классов col-xs-*, в итоге все хорошо получилось для моего разрешения. Однако при изменении окна браузера до 1024 пикселей в ширину, макет немного деформируется - стандартное бутстраповкое горизонтальное меню не влазит, и один пункт переходит на новую строку, также в некоторых местах возникают искажения из-за слишком больших margin и padding, которые я указывал в абсолютных значениях - px.
Часть проблем с паддингами вылечилась указанием размеров в %, для остальных проблем пришлось писать media query, в частности проблема с меню решилась, когда я для разрешения 1024 px указал паддинги в пунктах меню 10px, вместо прописанных в bootstrap.css 15 px
Я новичок в этом деле, и меня терзают сомнения - имея экран 1366 px, наверное с начала верстки, стоило использовать классы col-lg-*, а не col-xs-*?
Может есть хорошие примеры верстки конкретных дизайнов под бустрап?
Capz вне форума Ответить с цитированием
Старый 26.03.2015, 09:50   #2
Stanislav
Квадрокоптерист
Участник клуба Подтвердите свой е-майл
 
Регистрация: 29.09.2007
Сообщений: 1,824
По умолчанию

Цитата:
Недавно решил освоить бутстрап
как то странно вы его начали осваивать, вы точно были на оф.сайте?


Думаю стоит начать отсюда


Цитата:
Может есть хорошие примеры верстки конкретных дизайнов под бустрап?
А как же!? вот смотрим сюда

думаю этих шаблонов более чем достаточно чтобы понять принцип.

Вы не должны использовать никакие padding и margin и прочее...
по английски же написано как нужно действовать


Extra small devices Phones (<768px) - .col-xs-
Small devices Tablets (≥768px) - .col-sm-
Medium devices Desktops (≥992px) - .col-md-
Large devices Desktops (≥1200px) -.col-lg-



Думаю обучения стоит начать с обучения читать, и все у вас получится.
Я часть той силы, что вечно хочет зла, но вечно совершает благо..
Stanislav вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Адаптивная верстка kostya67 HTML и CSS 3 01.02.2015 10:53
Адаптивная верстка сайта Андрей79 HTML и CSS 0 05.04.2014 18:16
Верстка. Ast HTML и CSS 8 06.01.2012 21:19
сезонная адаптивная модель в VBA Kudoh Microsoft Office Excel 0 18.06.2009 19:31