При создании дизайна сайта в фотошопе не обойтись без использовании сетки.
Есть готовая сетка в формате psd.
Такая стандартизация позволяет быстро выполнять html верстку по созданному макету.
Bootstarp сетку можно скачать по ссылке ниже.
Скачать сетку.
Содержание статьи
Параметры стандартной bootstrap сетки.
- Общая ширина рабочей области составляет 1920 пикселей.
- Ширина контейнера с отступами будет 1170 пикселей.
- 68 пикселей ширина колонки без отступов.
- Ширина отступа 15 пикселей.
- В сетке двенадцать колонок.
Правило работы с bootstrap сеткой.
Если дизайнер не будет учитывать правила, то будут не понимание между верстальщиком и дизайнером.
Сетка psd формата для дизайна сайта основана на физических свойствах css фреймворка bootstrap.
Разберем подробно правила.
- Крайние поля служат для отступов на малых разрешениях экрана и не могут быть использованы для размещения элементов дизайна и контента.
- Можно использовать любое количество колонок для блоков сайта.
- после разделения на колонки, промежутки между не могут быть использованы в дизайне.
- Если дизайн выходит за рамки сетки, то решение должно быть внутри сетки относительно цетра макета.
Соблюдайте кратность элементов.
Картинки, которые не несут функции, можно располагать в любом месте макета.
Bootstrap сетка в верстке.
В чистом шаблоне изначально сетка подключена к проекту в файле libs.sass.
bootstrap сетка нужна только, чтобы сайт сделать адаптивным, под разные разрешения экранов.
Сверстаем шапку сайт, для примера, с использованием bootstrap.
Верхняя часть сайта вход и регистрация на сайте с иконкой слева, справа социальные иконки.
Должно получится, что на больших экранах видно вход и регистрация без иконки, на маленьких экранах видна иконка, если ее нажать выпадает окошко с текстом вход и регистрация.
Подробная инструкция на официальном сайте Bootstrap.
Начнем верстку в index.html
Добавим тег header с классом line. Header состоит из container.
В контейнере всегда есть строка row.
Класс row нужен, чтобы когда было маленькое разрешение по бокам были отступы, элементы не прилипали.
После row пишем из какого количества колонок состоит блок.
В нашем случае из двенадцати col-md-12.
Если будем писать col-sm-12, то схлопывание элементов будет позже чем у md.
Внутри идет кнопка button с классом btn иконка вход регистрация.
Подключаем иконку fontawesome.
Две ссылки у класса link от входа и регистрации.
Сделаем шрифт оригинальным у регистрации.
Зайдем на сайт шрифтов скачаем шрифт, например, flow и подключим его в файле проекта fonts.sass, как на картинке.
Добавим три социальные иконки справа экрана.
Для этого сделаем див с классом soc_buttons и тремя ссылками.
Получилось в index.html.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<header class="line"> <div class="container"> <div class="row"> <div class="col-md-12"> <button class="btn hidden-md hidden-lg"><i class="fa fa-user-circle-o" aria-hidden="true"></i></button> <div class="link"> <a href="#">Вход</a> <a href="#">Регистрация</a> </div> <div class="soc_buttons"> <a href="#"><i class="fa fa-facebook-square"></i></a> <a href="#"><i class="fa fa-vk"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> </div> </div> </div> </div> </header> |
Зададим стили в main.sass.
- У класса line сделаем фон серым.
- Отступы сделаем сделаем 10 пикселей, а по бокам ноль.
- Текст у ссылок line a сделаем синий.
- Чтобы у ссылок было подчеркивание внизу пропишем text-decoration: underline.
- Но если навести мышкой на ссылку link a:hover линия должна пропадать text-decoration: none.
- Добавим display: inline-block и vertical-align: middle, чтобы выравнять посередине текст относительно социальных иконок.
Перейдем к оформлению социальных иконок.
Сделаем float: right, поместим их справа с отступом влево margin-left: 10px.
Код в main.sass.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.line background-color: #c6c6c6 padding: 10px 0 color: blue .line a color: blue .link font-family: "Flow-examle" font-size: 24px display: inline-block vertical-align: middle .link a text-decoration: underline .link a:hover text-decoration: none .soc_buttons float: right .soc_buttons a font-size: 30px margin-left: 10px .btn background-color: transparent border: medium none font-size: 30px |
Сделаем шапку сайта, которая получилась, адаптивной под разные экраны.
- Для этого добавим классу btn новый класс hidden-md и hidden-lg, этим будем скрывать икону регистрации на больших мониторах.
- Для маленьких экранов уберем текст вход и регистрация. Уберем через файл media.sass. Откроем файл, в нем заготовка для различных разрешений экрана. Есть два метода для мобильного устройства и большого экрана. Для мобильных метод сейчас практически не используется. Мало кто рисует дизайн сайта для маленьких устройств. Делают бод большие а дальше адаптируют под маленькие экраны. Задаем экрану с max-width : 768px, чтобы класс link не отображался display: none.
Код media.sass.
1 2 3 4 5 6 7 8 9 |
@media only screen and (max-width : 768px) .link background-color: #c3c3c3 display: none margin-top: 10px padding: 10px position: absolute vertical-align: middle width: 100% |
Скрипт для иконки входа.
Добавим код в common.js, чтобы при нажатии на иконку появлялся блок с текстом вход и регистрация.
Для класса кнопки btn $(.btn) задаем функцию нажатия мышки click (function (), по клику будем выполнять действия.
В фигурных скобках мы делаем $(this) следующим будет переключение слайда slideToggle ().
Код в common.js.
1 2 3 4 5 |
$(function() { $(".btn").click(function(){ $(this).next().slideToggle(); }); }); |