Кнопки и панели
Визуальное оформление элементов
Для оформления сайта вашего сообщества, платформа SAVANT.PRO предлагает использовать некоторые классы декоративного оформления элементов. Это классы .primary
, .alternate
, .important
, а так же класс .inverse
который используется с выше описанными классами.
<div class="primary example-panel"> <p>Демонстрационный блок</p> </div>
<div class="primary inverse example-panel"> <p>Демонстрационный блок</p> </div>
<div class="alternate example-panel"> <p>Демонстрационный блок</p> </div>
<div class="alternate inverse example-panel"> <p>Демонстрационный блок</p> </div>
<div class="important example-panel"> <p>Демонстрационный блок</p> </div>
<div class="important inverse example-panel"> <p>Демонстрационный блок</p> </div>
Демонстрационный блок
Демонстрационный блок
Демонстрационный блок
Демонстрационный блок
Демонстрационный блок
Демонстрационный блок
Панели навигации
Кроме того, существуют классы для создания специализированных панелей навигации. Начнем с класса .breadcrumb
, который создает вертикальную панель навигации, используемую для указания пользователю его местоположение на сайте. Так же можно использовать с классами декоративного оформления элементов.
<div class="important breadcrumbs example-panel"> <a href class=" ">Демонстрационная ссылка</a> <a href class=" ">Демонстрационная ссылка</a> </div>
Для сгруппированных панелей навигации, существует класс .stack-panel
.
<div class="important stack-nav"> <div class="title">Заголовок группы меню</div> <a href="" class="">Демонстрационная ссылка</a> <a href="" class="">Демонстрационная ссылка</a> </div>
- Заголовок группы меню
Так же существуют 2 класса для создания вертикальных меню. .section-tabs
, .panel-nav
. Различия в выделении активной ссылки. Использование класса .active
у ссылок вызвавано отсутствием возможности сделать эти ссылки активными, тоесть сослаться на текущую страницу.
<div class="important section-tabs example-panel"> <a href="" class="active">Демонстрационная ссылка</a> <a href="" class="">Демонстрационная ссылка</a> </div>
<div class="important panel-nav"> <a href="" class="active">Демонстрационная ссылка</a> <a href="" class="">Демонстрационная ссылка</a> </div>
Кнопки
Помимо панелей, SAVANT.PRO предлагает использовать встроенный класс кнопок .btn
. Так же, к элементам с классом .btn
можно добавлять классы панелей .primary
, .alternate
, .important
и их вариантов с добавлением класса .inverse
, для достижения более широкого выбора стиля кнопки.
<div class="example"> <a href="" class="btn"> Демонстрационный блок </a> </div>
<div class="example"> <a href="" class="btn primary inverse"> Демонстрационный блок </a> </div>
Так же можно создавать группы кнопок с помощью класса .btn-group
.
<div class="btn-group"> <a href="" class="btn primary inverse"> Демонстрационная кнопка </a> <a href="" class="btn alternate inverse"> Демонстрационная кнопка </a> </div>