kumaxim
@kumaxim
Web-программист

В чем суть такой структуры блоков в Bootstrap?

Всем доброго времени суток.
Есть следующая структура блоков:
<nav class="site-navigation">
	<div class="container">
		<div class="row">
			<div class="site-navigation-inner col-sm-12">
				(Всякое разное содержимое блока 1)
			</div>
		</div>
	</div>
</nav>
<div class="welcome-slide">
	<div class="container">
		<div class="row">
			<div class="welcome-slide-inner col-sm-12">
				(Всякое разное содержимое блока 2)
			</div>
		</div>
	</div>
</div>

...и т.д. Самих блоков может быть много. Когда мне самому с нуля приходится что-то верстать, я делаю вот так
<div class="container">
	<div class="row">
		<div class="col-sm-12">
			(первый блок)
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			(второй блок)
		</div>
	</div>
</div>

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

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

Используется Twitter Bootstrap 3.x. Оба варианта используются на сайтах типа landing page, т.е. используются только большие блоки во всю ширину экрана
  • Вопрос задан
  • 423 просмотра
Решения вопроса 2
winbackgo
@winbackgo
Для логического отделения блоков. Страница может состоять из разных блоков никак не связанных между собой. Удалять и вставлять новые легко и понятно.
Блоки могут иметь разный дизайн, например бг должен занимать всю ширину а внутри имеется container.
В итоге все зависит от задачи. Если вам подходит второй вариант, то используйте его, никакой ошибки в этом нет. Мне по душе первый вариант - он более гибкий.
Ответ написан
Комментировать
gassmonkey
@gassmonkey
Провокатор
Каждый из этих блоков может иметь уникальный дизайн, и таким образом можно изменить определённый блок, не трогая остальные.
Твой подход уместен, только если все блоки идентичны, и проект на имеет дизайна.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
У лендингов любят делать фон "в полоску" - то есть у каждого раздела свой. Если всё обернуть в один контейнер, без костылей не обойтись.
Ответ написан
pm_wanderer
@pm_wanderer
junior-HTML
У них просто такая структура фреймворка.
Используются вспомогательные классы, которые в зависимости от содержания добавляют некоторые свойства css. Например если содержимое должно иметь какой то эффект типа transform: scale(), то контейнер для этого содержимого может добавить свойство overflow: hidden. Можно открыть их css и посмотреть что каждый класс добавляет в стили. Остается либо принять их правила либо пилить свой фреймворк с блэкджеком и media queries )
Ответ написан
Комментировать
kamikadze1996
@kamikadze1996
{[]}
Что бы потом подобраться к внутренним блокам. Ты же не будешь трогать бутстраповские .container в своих стилях верно? Вот для удобства их и добавляют
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы