Уроки по программированию

Уроки Bootstrap 3.0 для начинающих (Четвертый урок)

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

shablon-bootstrap

Для того чтобы приступить к созданию шаблона качаем заготовку Скачать

Для редактирования файлов я буду использовать NotePad++ поэтому рекомендую установить этот редактор. Скачивать его лучше с официального сайта он бесплатный.

Распакуйте архив zagatovka.zip и откройте файл index.html (с помощью NotePad++).

Первый шаг

Создадим контейнер и «строку» (под строкой я имею ввиду row). Для этого между тегами body пропишем следующий код:

<div class="container">
	<div class="row">
		<div class="col-md-12 head-block"></div>
		<div class="col-md-12 top-menu"></div>
		<div class="col-md-12 top-material"></div>
		<div class="col-md-3 left-sidebar"></div>
		<div class="col-md-9 content"></div>
	</div>
</div>

Для того чтобы увидеть все блоки шаблона нужно добавить в файл со стилями стиль, для каждого блока. Откройте файл css/dopstyle.css и добавьте следующий код

/*ЦВЕТ И ОТСТУП СНИЗУ ДЛЯ БЛОКОВ*/
.head-block,.top-menu,.top-material,.left-sidebar,.content{
	background:#ccc;
	margin-bottom:1px;
}
/*ВЫСОТА ШАПКИ*/
.head-block{
	height:150px;
}
/*ВЫСОТА МЕНЮ*/
.top-menu{
	height:30px;
}
/*ВЫСОТА БЛОКА ВАЖНЫЕ МАТЕРИАЛЫ*/
.top-material{
	height:200px;
}
/*ВЫСОТА САЙДБАРА И БЛОКА КОНТЕНТ*/
.left-sidebar,.content{
	height:300px;
}
/*ГРАНИЦА У КОНТЕНТА*/
.content{
	border-left:1px solid #fff;
}

Обновите страницу и увидите все блоки. Высоту и цвет у всех блоков я задал для того чтобы можно было просмотреть структуру шаблона. Должно получиться так

shablon-bootstrap-urok

Второй шаг

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

План действий (то что нужно сделать)

  • Сделать шапку
  • Сделать меню
  • Добавить важные новости
  • Добавить сайдбар
  • Добавить содержание

Прежде чем приступать к оформлению шаблона надо удалить стили которые мы прописали для того чтобы увидеть шаблон очистите файл dopstyle.css

Шапка

Шапку не стал делать сам а скачал с сайта http://nika-sait.ru из раздела шапки для сайта. Шапку переименовал в head.jpg и сохранил в папку images затем добавил css в файл dopstyle.css

.head-block{
	height:250px;
	background:url(../images/head.jpg)left center no-repeat;
}

параметр left нужен для того чтобы выровнять по левому краю параметр center выравнивает по вертикали важно учитывать порядок (если переводить на координаты, то первым параметр отвечает за горизонталь, а второй за вертикаль. Можно задавать даже значения в пикселях). После выполненных операции нужно обновить страницу. После обновления вы увидите шапку.

Меню

Создадим меню в котором будут пункты (цены, услуги, о нас, контакты, товары) для этого в файле index.html заменим код

<div class="col-md-12 top-menu"></div>

на

<div class="col-md-12 top-menu">
	<ul>
		<li><a href="#">Цены</a></li>
		<li><a href="#">Услуги</a></li>
		<li><a href="#">О нас</a></li>
		<li><a href="#">Контакты</a></li>
		<li><a href="#">Товары</a></li>
	</ul>
</div>

и добавим стили для меню в файл dopstyle.css

.top-menu{
	background:#daf2fe;
}
.top-menu ul{
	padding-left:0;
	margin-bottom:0;
}
.top-menu li{
	display:inline-block;
	margin-left:10px;
	padding:3px 10px;
}

Обновите страницу и увидите результат. У меня получилось так

bootstrap-4-urok

Добавить важные новости

В этом разделе я добавлю четыре новости как делить строку на колонки я показывал в 3 уроке
Замените код в index.html

<div class="col-md-12 top-material"></div>

на

<div class="col-md-3 top-material">
	<h3>Шапки для сайта</h3>
	Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/>
</div>
<div class="col-md-3 top-material">
	<h3>Шапки для сайта</h3>
	Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/>
</div>
<div class="col-md-3 top-material">
	<h3>Шапки для сайта</h3>
	Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/>
</div>
<div class="col-md-3 top-material">
	<h3>Шапки для сайта</h3>
	Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/>
</div>

Обновите страницу и увидите результат

Остальные пункты я делать не стану. Оставлю для самостоятельной работы =)
Скачать полушаблон

Комментарии к статье

    ValueError thrown

    Unknown format specifier "a"