Уроки 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>

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

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

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

  1. Evgeny:

    У меня есть сайт который я когда верстал вручную теперь хочу добавить бутстрап но перевёрстывать не хочу а при добавлении бутстрап старая вёрстка едит как это избежать?

    • TSergey:

      Переверстывать придется в любом случае у Bootstrap есть свои правила по которым необходимо верстать поэтому и «едит» старая верстка.

  2. Анатолий:

    В index.html пропущена строчка:

  3. Vladimir Mityukov:

    Честно говоря, уроки не совсем корректные. В смысле, приучают халтурить, что ли.. В частности, для Top Menu было бы хорошо использовать Navbar (http://getbootstrap.com/components/#navbar), например, и я бы с удовольствием про него почитал 😉 Так же, сомнения вызывает прием запихивания всех блоков сайта в один «row»..

    А так, на данный момент создается впечатление что от Bootstrap используются лишь базовые CSS классы.. Ну Grid еще.

    • TSergey:

      Уроки в большей степени нацелены на ознакомления. Иногда люди ищут готовые примеры по-которым можно понять как это все работает. Про navbar можно сделать урок, но честно говоря он мне не много не нравится.

      • Vladimir Mityukov:

        Спасибо за ответ. Если будете писать про NavBar, опишите самый базовый пример, пожалуйста (т.е., буквально аналог меню из этого примера, но на компоненте NavBar). На сайте getbootstrap такого нет, а если брать более навороченные примеры — то они немного по-разному сделаны (особенно, в плане что во что обернуто) и непонятно который «православнее» 🙂

  4. tvlad:

    Не посоветуете где про отступы почитать и промежутки между блокам, или ждем урок по отступам. Видимо буду на 2 Bootstrape сайт делать, в отступах 3 версии не разобрался.

    • TSergey:

      Отступы те, что между блоками? Если да, то нужно изменить настройки bootstrap тут http://getbootstrap.com/customize/ там есть параметр @grid-gutter-width можно задать любое значение и сохранить измененный bootstrap. Можно еще задавать отступы с помощью padding и margin

      • tvlad:

        Менять мне их не надо. Просто есть уже встроенные межколонники и отступы от краев. (они есть во 2 bootstrape в grid 960, в bootstap 3 тоже что то есть но никак не въеду как работает).
        Например при задании well появляется отступ от контейнера, но отступа между колонками не появляется. При вложении в колонку well появляются отступы с обоих краев и от межколонника и от контейнера.
        Хотя на всех примерах в руководстве межколонник отсутствует, но во всех описаниях можно менять его ширину….. И по факту отступы то какие то появляются при вложении блоков и при использовании well и panel. Но как это работает понять не могу то есть то нет.

        Либо Третий несколько сырой, например все мои попытки отключить адаптивность ни к чему не привели, ну не отключается она, даже если везде все поменять. Решил только найдя ветку Twitter’s Bootstrap 3 without responsive features на Гитхабе.

        • TSergey:

          У класса well действительно появляются не понятные отступы. Скорее всего это регулируется стилями. Container отталкивает вложенные элементы по краям на 15px, если расположить внутри container блок с классом row, то блок наоборот по краям расширяется на -15px .

          Чтобы понять как всё это работает можно воспользоваться дополнением для Firefox — Firebug.

          Резиновость отключается заданием нового контейнера с фиксированными параметрами

          .container-non-responsive {
          margin-left: auto;
          margin-right: auto;
          padding-left: 15px;
          padding-right: 15px;
          width: 1000px;
          min-width:1000px;
          }

          после вместо container использовать нужно новый стиль.

  5. Сергей Луковников:

    (:smile:)

  6. Сергей Луковников:

    Либо Третий несколько сырой, например все мои попытки отключить адаптивность ни к чему не привели, ну не отключается она, даже если везде все поменять. Решил только найдя ветку Twitter’s Bootstrap 3 without responsive features на Гитхабе.

  7. Ant:

    Нехватает информации о офф сайте бутстрапа,вчасности о возможности скачивать некоторые готовые елементы и о кастомизации шаблонного CSS’а под себя.

  8. Ant:

    Вот ссылка,кому интересно и кто не слаб в английском,хотя и с плохим английским можна разобраться http://getbootstrap.com/

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *