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

@emin313 · Регистрация: 05.10.2010

Author24 — интернет-сервис помощи студентам

Подскажите как распланировать сетку как на мекете до этого накидывал просто готовые варианты. Потом понял что сайт должен быть адаптивный поэтому решил сделать через bootstrap. Хотел совета гуру как правильно распланировать по сеткам шаблон. С шапкой немого понятно на картинке видно что jpg занимает 7 сеток h1 заголовок 5 в итоге получаем col-md-7 и 5. но есть непонятное для меня как сделать картинки которые выходят за шапку причем через сетку. проще было бы через позиционирование но потом не понятно как сделать адаптивность

@Mailo · 16.10.2017, 04:57

Судя по вопросу, вам пора завязывать с "сетками". Будете зависимы либо от сетки, либо от полёта фантазии дизайнера, который конечно свою сетку не заметил и картинкой немножко заступил. Да и исчо, все эти пометки в дизайне нужны что бы дизайнер не промахнулся в плане дизайна, а верстальщику что бы края увидел яхуууу. Кстати вы забыли указать размеры, приложенный скрин вроде как 991px, "нехрена с касаря у барина поля" - простите первое что пришло в голову.....но наверняка на 1000px происходит переход, "top quality" сверху, картинка снизу, у всех блоков

CSS

1	margin: 20px auto; float:none

У всех картинок

CSS

1	width:100%; height:auto;

ну и всё как бы ровно встаёт, без сеток, без покера и даже без Б, welcome to css/

@fol · 16.10.2017, 10:58

Чтобы использовать сетку при верстке, дизайн должен быть спроектирован под эту сетку (будь это бутстраповская, сетка любого другого фреймворка или своя собственная). Уникальным картинкам, которые вылезают за колонки, нужны уникальные стили (позиционирование и пр.), по-другому никак.

@emin313 · 16.10.2017, 13:37 **[ТС]**

Mailo, тоесть можно обойтись без позиционирования с помощью оступов в шапке и создания кода для сжимания картинки?

@Mailo · 16.10.2017, 20:52

emin313, конечно.

Новые блоги и статьи
Как добавить пустую директорию в репозиторий Git bytestream 22.01.2025 При работе с системой контроля версий Git разработчики часто сталкиваются с ситуацией, когда необходимо сохранить пустую директорию в репозитории. Данная задача может показаться простой на первый. . .	Как валидировать адрес email в JavaScript bytestream 22.01.2025 JavaScript, как основной язык веб-разработки, предоставляет разработчикам множество инструментов для реализации эффективной валидации email-адресов. От простых встроенных решений до сложных. . .	Как заменить все вхождения подстроки в JavaScript bytestream 22.01.2025 Строки в JavaScript представляют собой неизменяемые последовательности символов, что делает их обработку особенно интересной с точки зрения оптимизации и выбора правильного подхода к решению задач. . . .	Управление версиями пакетов в Node.js. В чем разница между тильдой (~) и кареткой (^) в package.json bytestream 22.01.2025 В современной разработке программного обеспечения управление версиями пакетов играет ключевую роль в обеспечении стабильности и надежности проектов. Node. js, как одна из самых популярных платформ для. . .	Аутентификация на сайте с помощью формы bytestream 21.01.2025 В современном цифровом мире безопасная аутентификация становится краеугольным камнем защиты веб-приложений и пользовательских данных. Каждый день миллионы людей используют различные онлайн-сервисы,. . .	Как получить индекс в цикле for в Python bytestream 21.01.2025 При работе с коллекциями данных в Python часто возникает необходимость не только получить доступ к элементам последовательности, но и знать их позицию в процессе итерации. Индексация в циклах. . .
Как определить адрес, из которого локальный репозиторий Git был клонирован bytestream 21.01.2025 В современной разработке программного обеспечения система контроля версий Git стала неотъемлемой частью рабочего процесса. При работе с Git разработчики часто сталкиваются с необходимостью. . .	Какая разница между операторами == и === в сравнениях в JavaScript bytestream 21.01.2025 В мире веб-разработки JavaScript занимает особое место как динамический язык программирования, предоставляющий разработчикам широкий набор инструментов для создания интерактивных веб-приложений. . . .	Из чего и как собрать свой домашний кинотеатр bt_guru 21.01.2025 Создание домашнего кинотеатра: от идеи до реализации В современном мире домашний кинотеатр стал неотъемлемой частью комфортного жилого пространства, предоставляя возможность наслаждаться. . .	Ошибки стиральных машин bt_guru 21.01.2025 Современные стиральные машины представляют собой сложные электронные устройства, оснащенные множеством датчиков и систем контроля. Они способны самостоятельно определять вес загруженного белья,. . .	Копирование (маппинг) объектов в JavaScript bytestream 21.01.2025 В современной разработке программного обеспечения копирование объектов представляет собой фундаментальную операцию, которая требует особого внимания и понимания. Маппинг объектов в JavaScript – это. . .	Как работать с Apache Kafka в C# .NET bytestream 21.01.2025 Apache Kafka представляет собой распределенную платформу потоковой передачи данных, которая произвела революцию в области обработки больших объемов информации в реальном времени. Эта система,. . .

@emin313 4 / 4 / 1 Регистрация: 05.10.2010 Сообщений: 426
		1
	Как правильно работать с сетками? 15.10.2017, 21:17. Показов 765. Ответов 4 Метки нет (Все метки) Подскажите как распланировать сетку как на мекете до этого накидывал просто готовые варианты. Потом понял что сайт должен быть адаптивный поэтому решил сделать через bootstrap. Хотел совета гуру как правильно распланировать по сеткам шаблон. С шапкой немого понятно на картинке видно что jpg занимает 7 сеток h1 заголовок 5 в итоге получаем col-md-7 и 5. но есть непонятное для меня как сделать картинки которые выходят за шапку причем через сетку. проще было бы через позиционирование но потом не понятно как сделать адаптивность Миниатюры 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	16.10.2017, 10:58	3
	Чтобы использовать сетку при верстке, дизайн должен быть спроектирован под эту сетку (будь это бутстраповская, сетка любого другого фреймворка или своя собственная). Уникальным картинкам, которые вылезают за колонки, нужны уникальные стили (позиционирование и пр.), по-другому никак. 0

@emin313 4 / 4 / 1 Регистрация: 05.10.2010 Сообщений: 426
	16.10.2017, 13:37 [ТС]	4
	Mailo, тоесть можно обойтись без позиционирования с помощью оступов в шапке и создания кода для сжимания картинки? 0

@Mailo 247 / 224 / 31 Регистрация: 18.02.2010 Сообщений: 2,293
	16.10.2017, 20:52	5
	emin313, конечно. 0