Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
ziga45
0 / 0 / 0
Регистрация: 02.11.2015
Сообщений: 4
1

Сетка bootstrap + попиксельная вёрстка + адаптивность, не могу разобраться с размерами блоков

03.11.2015, 22:23. Просмотров 1142. Ответов 7
Метки нет (Все метки)

Пытаюсь скрафтить себе шаблон из psd для сайта портфолио, сначала сверстал без сетки бутстрапа, и начал настраивать там шрифты и блоки под разные разрешения экрана вроде бы получалось, но приходилось очень много изменять элементов в шаблоне под каждые разрешения экрана с интервалом по 100 пикселей, и всё равно на некоторых разрешения было то криво то не так, одно поменяешь, другое слетит.
Плюсы такой вёрстки были то что всё было поппиксельно как на psd всё совпадало(ну то что мне надо было).

Узнал о бутстрап и решил заново сверстать шаблон через сетку, сразу видно что будет легче настроить под все разрешения, но я не могу понять теперь как мне сделать что бы все блоки совпадали как на псд, т.е пиксельперфект был?. Вот скрин сетки (самого контента не считая шапки):
Сетка bootstrap + попиксельная вёрстка + адаптивность, не могу разобраться с размерами блоков

Ну разделил сайдбар - col-md-2, дальше мини блок с картинкой тоже col-md-2 и большой блок с картинкой col-md-6 и ещё мини блок col-md-2.
Всё работает как часики, все блоки стоят правильно:
Сетка bootstrap + попиксельная вёрстка + адаптивность, не могу разобраться с размерами блоков


За исключением что все блоки не имеют точную ширину, потому что у них стоит fluid т.е они в процентах.
Мне надо что бы мини блоки с картинкми были шире на 100 пикселей, а большой блок с картинкой был меньше, с такими размерами портится весь дизайн.
Не могу понять тогда как верстать правильно ....
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.11.2015, 22:23
Ответы с готовыми решениями:

Адаптивность Bootstrap
Добрый день форумчане! Сверстал сайт на bootstrap, теперь вот думаю как...

Bootstrap и адаптивность
Всем доброго времени суток. Решил попробовать на вкус бутстрап и его...

Отключить адаптивность, Bootstrap
есть сайт на бустрап3(а может 4) мне нужно выключить адаптивность для любых...

Bootstrap 3, адаптивность изображений и текстов
При уменьшении ширины окна браузера, текст и картинки не уменьшаются, в...

Адаптивность фонового изображения Bootstrap
переделываю этот сайт под Bootstrap http://imi.bsu.ru/moais/. делаю адаптивную...

7
Karssen
151 / 151 / 66
Регистрация: 25.02.2015
Сообщений: 492
03.11.2015, 22:47 2
На бутстрапе пиксель перфект вряд ли получится.
0
Almag13
27 / 28 / 15
Регистрация: 18.10.2015
Сообщений: 187
03.11.2015, 22:50 3
может макет не под бустрап ... сетки нет и размеры соответственно иные...
0
ziga45
0 / 0 / 0
Регистрация: 02.11.2015
Сообщений: 4
03.11.2015, 23:06  [ТС] 4
типа вообще нет ни каких вариантов, т.е можно забить на сетку и тупо под каждое разрешение пилить свой размер блоков?
0
Karssen
151 / 151 / 66
Регистрация: 25.02.2015
Сообщений: 492
03.11.2015, 23:11 5
Лучший ответ Сообщение было отмечено ziga45 как решение

Решение

http://itchief.ru/lessons/bootstrap-...ive-containers Вариант 1
http://itchief.ru/lessons/bootstrap-...embly-platform Вариант 2, можно создать сборку со своим количеством контейнеров и соотвественно другие размеры будут у них
1
ziga45
0 / 0 / 0
Регистрация: 02.11.2015
Сообщений: 4
03.11.2015, 23:15  [ТС] 6
Karssen, спасибо за ссылки обязательно гляну может смогу сделать что хочу
0
Almag13
27 / 28 / 15
Регистрация: 18.10.2015
Сообщений: 187
04.11.2015, 00:46 7
Ну вот ширину контейнеров можно под себя подстроить... Если только так...
0
ziga45
0 / 0 / 0
Регистрация: 02.11.2015
Сообщений: 4
04.11.2015, 13:07  [ТС] 8
Всё работает как надо, сделал как указано тут http://itchief.ru/lessons/bootstrap-...ive-containers
0
04.11.2015, 13:07
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
04.11.2015, 13:07

Адаптивность блоков и её высоты
Всем привет! А кто мне может посоветовать как сделать так, чтобы, например,...

Bootstrap 4 Сетка
Приветствую. Давно уже интересует вопрос как правильно использовать сетку...

Сетка bootstrap
Верстаю в бутстрап. Одна из колонок почему -то ушла вправо и все поехало. В чем...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru