itProger Видеокурсы Изучение технологии Bootstrap (верстка сайта) #2 - Grid система (система сеток)

#2 - Grid система (система сеток)

Система сеток это ключевое понятие в Bootstrap, поэтому изучение фреймворка необходимо начинать именно с неё. За счёт системы сеток можно располагать объекты в один ряд, делать объекты адаптивными, а также указывать общую структуру расположения объектов на сайте.

Видеоурок

Исходный код

Весь код будет доступен после подписки на проект!

Онлайн редактор кода

Загрузка...

Задание к уроку

Работа с сетками

Создайте блок-контейнер и расположите в нём три ряда:

первый ряд - содержит два блока общей шириной на весь экран;
второй ряд - содержит 6 блоков общей шириной на весь экран;
третий ряд - содержит 2 блока шириной на половину экрана и ещё 3 блока на оставшуюся половину.

Посмотреть ответ

Решения задания:

<div class="container-fluid">
	<h1>Различные блоки</h1>
	
	<div class="row">
		<div class="col-md-6" style="background-color: #ff9999">Первый</div>
		<div class="col-md-6" style="background-color: #99CCFF">Второй</div>
	</div>
	<br>
	
	<div class="row">
		<div class="col-md-2" style="background-color: #ff9999">Первый</div>
		<div class="col-md-2" style="background-color: #99CCFF">Второй</div>
		<div class="col-md-2" style="background-color: #00CC99">Третий</div>
		<div class="col-md-2" style="background-color: #00F999">Четвертый</div>
		<div class="col-md-2" style="background-color: #fafafa">Пятый</div>
		<div class="col-md-2" style="background-color: #cccccc">Шестой</div>
	</div>
	<br>
	
	<div class="row">
		<div class="col-md-3" style="background-color: #ff9999">Первый</div>
		<div class="col-md-3" style="background-color: #99CCFF">Второй</div>
		<div class="col-md-2" style="background-color: #ff9999">Первый</div>
		<div class="col-md-2" style="background-color: #99CCFF">Второй</div>
		<div class="col-md-2" style="background-color: #00CC99">Третий</div>
	</div>
</div>

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Bootstrap

HTML5