В этом уроке основываясь на полученных знаниях я покажу как создать простой шаблон. Шаблон будет иметь следующую структуру
Для того чтобы приступить к созданию шаблона качаем заготовку Скачать
Для редактирования файлов я буду использовать 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;
}
Обновите страницу и увидите все блоки. Высоту и цвет у всех блоков я задал для того чтобы можно было просмотреть структуру шаблона. Должно получиться так
Второй шаг
Желаемая структура шаблона создана теперь остается заполнить все блоки чтобы получить готовый шаблон которым можно пользоваться.
План действий (то что нужно сделать)
- Сделать шапку
- Сделать меню
- Добавить важные новости
- Добавить сайдбар
- Добавить содержание
Прежде чем приступать к оформлению шаблона надо удалить стили которые мы прописали для того чтобы увидеть шаблон очистите файл 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;
}
Обновите страницу и увидите результат. У меня получилось так
Добавить важные новости
В этом разделе я добавлю четыре новости как делить строку на колонки я показывал в 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>
Обновите страницу и увидите результат
Остальные пункты я делать не стану. Оставлю для самостоятельной работы =)
Скачать полушаблон
У меня есть сайт который я когда верстал вручную теперь хочу добавить бутстрап но перевёрстывать не хочу а при добавлении бутстрап старая вёрстка едит как это избежать?
Переверстывать придется в любом случае у Bootstrap есть свои правила по которым необходимо верстать поэтому и «едит» старая верстка.
В index.html пропущена строчка:
Где это? вроде все есть
Честно говоря, уроки не совсем корректные. В смысле, приучают халтурить, что ли.. В частности, для Top Menu было бы хорошо использовать Navbar (http://getbootstrap.com/components/#navbar), например, и я бы с удовольствием про него почитал 😉 Так же, сомнения вызывает прием запихивания всех блоков сайта в один «row»..
А так, на данный момент создается впечатление что от Bootstrap используются лишь базовые CSS классы.. Ну Grid еще.
Уроки в большей степени нацелены на ознакомления. Иногда люди ищут готовые примеры по-которым можно понять как это все работает. Про navbar можно сделать урок, но честно говоря он мне не много не нравится.
Спасибо за ответ. Если будете писать про NavBar, опишите самый базовый пример, пожалуйста (т.е., буквально аналог меню из этого примера, но на компоненте NavBar). На сайте getbootstrap такого нет, а если брать более навороченные примеры — то они немного по-разному сделаны (особенно, в плане что во что обернуто) и непонятно который «православнее» 🙂
Не посоветуете где про отступы почитать и промежутки между блокам, или ждем урок по отступам. Видимо буду на 2 Bootstrape сайт делать, в отступах 3 версии не разобрался.
Отступы те, что между блоками? Если да, то нужно изменить настройки bootstrap тут http://getbootstrap.com/customize/ там есть параметр @grid-gutter-width можно задать любое значение и сохранить измененный bootstrap. Можно еще задавать отступы с помощью padding и margin
Менять мне их не надо. Просто есть уже встроенные межколонники и отступы от краев. (они есть во 2 bootstrape в grid 960, в bootstap 3 тоже что то есть но никак не въеду как работает).
Например при задании well появляется отступ от контейнера, но отступа между колонками не появляется. При вложении в колонку well появляются отступы с обоих краев и от межколонника и от контейнера.
Хотя на всех примерах в руководстве межколонник отсутствует, но во всех описаниях можно менять его ширину….. И по факту отступы то какие то появляются при вложении блоков и при использовании well и panel. Но как это работает понять не могу то есть то нет.
Либо Третий несколько сырой, например все мои попытки отключить адаптивность ни к чему не привели, ну не отключается она, даже если везде все поменять. Решил только найдя ветку Twitter’s Bootstrap 3 without responsive features на Гитхабе.
У класса 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 использовать нужно новый стиль.
(:smile:)
Либо Третий несколько сырой, например все мои попытки отключить адаптивность ни к чему не привели, ну не отключается она, даже если везде все поменять. Решил только найдя ветку Twitter’s Bootstrap 3 without responsive features на Гитхабе.
Нехватает информации о офф сайте бутстрапа,вчасности о возможности скачивать некоторые готовые елементы и о кастомизации шаблонного CSS’а под себя.
Вот ссылка,кому интересно и кто не слаб в английском,хотя и с плохим английским можна разобраться http://getbootstrap.com/