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 місяця

Також варто подивитися