Создаём административную панель на Bootstrap, CSS(LESS) и JavaScript. #2

2
10135

Продолжаем создавать административную панель используя Bootstrap, LESS и JQuery. В прошлом уроке мы сделали все заготовки для дальнейшей разработки. Теперь наша задача сделать основную разметку главных элементов. В дальнейшем на базе этих элементов будут строиться все остальные, внутренние. Давайте посмотрим на прототип и выделим эти основные элементы.


Мы разделили всё рабочее пространство будущей административной панели на три части:

  1. Main Content — основная часть в которой будут размещается все виджеты.
  2. Left-Sidebar — Левый сайдбар с меню, также туда можно будет добавить элементы с информацией о пользователе и, к примеру, поиск.
  3. Top-Nav — Верхняя шапка.

Делаем базовую разметку страницы

Разметим основные элементы и дадим им свои классы и идентификаторы, чтобы потом было удобно обращаться к ним через CSS селекторы.

Чтобы было понятно, распишу назначение каждого div’а:

  • main-wrapper — основная оболочка, в которой находится всё содержимое.
  • left-sidebar — левый сайдбар, как вы поняли.
  • container-fluid — является Bootstrap классом, который предоставляет плавающую структуру страницы
  • top-nav — верхняя навигация
  • main-content — основная часть сайта

Действуя по порядку, теперь напишем первые правила css, открываем color-config.less и пишем переменные с цветовой палитрой:

Названия переменных говорят сами за себя. Эти цвета мы будем использовать часто, поэтому будем хранить их в переменных, в дальнейшем будет легко изменить цветовую схему, поменяв значения в этом файле. Открываем файл general.less и пишем правила для тега body:

Можете заметить, уже здесь мы начали применять переменные с цветовой палитрой из файла color-config.less, также мы задали всему документу шрифт Open Sans.

Открываем файл main-content.less и напишем в нём правило для основной оболочки main-wrapper:

Основная оболочка задаёт размеры, абсолютно позиционирована и отображается, а также ведёт себя как таблица. Мы использовали правило display: table; не просто так, данное правило дает некоторые свойства. Правило говорит блоку, чтобы он вёл себя как таблица, таким образом блок приобретает следующие свойства:

  • по умолчанию имеет ширину по содержанию, но занимает целую строку, подобно блочным элементам;
  • по умолчанию прижимается к левой границе контейнера, даже если контейнеру задано выравнивание по правому краю (text-align: right). Чтобы прижать таблицу к правому краю, надо применять float: right или же делать её display: inline;
  • ширину и высоту таблицы можно задавать в css;
  • у таблицы может быть свойство margin, в том числе с отрицательными значениями;

В будущем, эти свойства сыграют свою роль, а пока мы продолжим. Напишем основные правила стилей для всех элементов на странице, открываем файл main-content.less и дописываем:

Внутреннему контейнеру и сайдбару мы задали отображение display: table-cell. Данный тип отображения, так же, имеет свойства, как и display: table;. table-cell означает — веди себя как ячейка таблицы, блок приобретает следующие свойства:

  • идущие подряд ячейки находятся на одной строке с себе подобными, не переходя на следующую; если ячейкам на строке тесно, они сначала ужимаются по ширине, а затем начинают распяливать контейнер и/или окно браузера;
  • ширина ячеек по умолчанию распределяется пропорционально содержанию (с учётом всех ячеек в данной строке), однако может прямо задаваться через css;
  • все ячейки в строке имеют одинаковую высоту, которая определяется содержанием самой большой ячейки в данной строке;
  • ячейка может иметь внутренние отступы (padding), но не может иметь полей (margin);
  • к табличным ячейкам применимо вертикальное выравнивание по табличному принципу: свойство vertical-align выравнивает содержание ячейки по высоте относительно самой ячейки, при этом ячейки в строке сохраняют одинаковую высоту, в отличие от строчных или строчно-блочных элементов. Значения vertical-align не бывают отрицательными;
  • содержание ячейки может выравниваться по горизонтали (text-align);

В паре с правилом vertival-align: top; проиcходит выравнивание верхнего края элемента по верху самого высокого элемента строки. Ширина сайдбара была установленна в размере 280px. Если Вам что-либо не понятно, рекомендую воспользоваться любым html справочником и разобраться подробнее.

Если Вы посмотрите на то, что получилось, то можете заметить, что top-nav выглядит не так, как нам нужно. Bootstrap уже имеет правила для класса .navbar, давайте переопределим их и сделаем по нашему. Открываем файл main-content.less и добавляем:

После данных изменений, мы получили такой результат:

Заключение

Второй урок на этом заканчивается. В следующем уроке, мы продолжим работу над левым сайдбаром. Если Вам что-то не понятно или возникли какие-либо вопросы, задавайте их ниже в комментариях или в группе vkontakte. Спасибо!

2 КОММЕНТАРИИ

  1. […] завершен! Мы выполнили все подготовительные работы и в следующем уроке, приступим к реализации прототипа. Спасибо за […]

  2. […] Во втором уроке мы начали реализовывать нашу административную панель – написали базовую разметку, установили базовые LESS переменные с основными цветовыми палитрами и установили базовые CSS правила для основных html тегов. […]

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя