Подбробно о bootstrap сетке в дизайне сайта и верстке

При создании дизайна сайта в фотошопе не обойтись без использовании сетки.

Есть готовая сетка в формате psd.

Такая стандартизация позволяет быстро выполнять html верстку по созданному макету.

Bootstarp сетку можно скачать по ссылке ниже.

Скачать сетку.

Параметры стандартной bootstrap сетки.

• Общая ширина рабочей области составляет 1920 пикселей.
• Ширина контейнера с отступами будет 1170 пикселей.
• 68 пикселей ширина колонки без отступов.
• Ширина отступа 15 пикселей.
• В сетке двенадцать колонок.

Правило работы с bootstrap сеткой.

Если дизайнер не будет учитывать правила, то будут не понимание между верстальщиком и дизайнером.

Сетка psd формата для дизайна сайта основана на физических свойствах css фреймворка bootstrap.

Разберем подробно правила.

1. Крайние поля служат для отступов на малых разрешениях экрана и не могут быть использованы для размещения элементов дизайна и контента.
2. Можно использовать любое количество колонок для блоков сайта.
3. после разделения на колонки, промежутки между не могут быть использованы в дизайне.
4. Если дизайн выходит за рамки сетки, то решение должно быть внутри сетки относительно цетра макета.

Соблюдайте кратность элементов.

Картинки, которые не несут функции, можно располагать в любом месте макета.

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.

Зададим стили в 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. Для этого добавим классу btn новый класс hidden-md и hidden-lg, этим будем скрывать икону регистрации на больших мониторах.
2. Для маленьких экранов уберем текст вход и регистрация. Уберем через файл media.sass. Откроем файл, в нем заготовка для различных разрешений экрана. Есть два метода для мобильного устройства и большого экрана. Для мобильных метод сейчас практически не используется. Мало кто рисует дизайн сайта для маленьких устройств. Делают бод большие а дальше адаптируют под маленькие экраны. Задаем экрану с max-width : 768px, чтобы класс link не отображался display: none.

Код media.sass.

Скрипт для иконки входа.

Добавим код в common.js, чтобы при нажатии на иконку появлялся блок с текстом вход и регистрация.

Для класса кнопки btn $(.btn) задаем функцию нажатия мышки click (function (), по клику будем выполнять действия.

В фигурных скобках мы делаем $(this) следующим будет переключение слайда slideToggle ().

Код в common.js.