Bootstrap 3 — Настройка компонента Navbar
На этом уроке мы научимся настраивать (оформлять) компонент Twitter Bootstrap Navbar (навигационное меню) под дизайн сайта, а также рассмотрим различные варианты совмещения данного меню с фоном веб-страницы.
Изменение цвета navbar (навигационного меню) с помощью CSS
Навигационное меню в Twitter Bootstrap 3 имеет следующие цветовые стили:
Данные цветовые стили некоторых веб-разработчиков и дизайнеров могут не устраивать, из-за того что они не будут вписываться в остальной дизайн сайта. Решить данную проблему можно только посредством изменения цветовой палитры навигационного меню.
Но прежде чем переходить к изменению цветовой палитры компонента navbar, необходимо знать какие стили Bootstrap CSS отвечают за установления цвета данного компонента. Приведём с пояснениями часть кода CSS платформы Twitter Bootstrap 3, который отвечает за установление цвета компонента «Navbar» (навигационное меню).
Код HTML
Код CSS
/* цвет фона и рамки навигационного меню */ .navbar-default { background-color: #F8F8F8; border-color: #E7E7E7; } /* цвет текста, содержащий название сайта или бренда */ .navbar-default .navbar-brand { color: #777; } /* цвет текста (название сайта или бренда), при поднесении к нему курсора мышки или при его нахождении в фокусе */ .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #5E5E5E; } /* Цвет пунктов навигационного меню */ .navbar-default .navbar-nav > li > a { color: #777; } /* Цвет пункта меню, при поднесении к нему курсора мышки или при его нахождении в фокусе */ .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #333; } /* Цвет и фон активного пункта меню, а также поднесении к нему курсора мышки или при его нахождении в фокусе */ .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #555; background-color: #E7E7E7; } /* Цвет и фон открытого пункта меню, а также поднесении к нему курсора мышки или при его нахождении в фокусе */ .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #555; background-color: #D5D5D5; } /* Цвет стрелочки (треугольничка) у раскрывающихся пунктов меню */ .navbar-default .navbar-nav > .dropdown > a .caret { border-top-color: #777; border-bottom-color: #777; } /* Цвет стрелочки (треугольничка) при поднесении к нему курсора мышки или при его нахождении в фокусе */ .navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret { border-top-color: #333; border-bottom-color: #333; } /* Цвет стрелочки (треугольничка), открывшегося пункта меню */ .navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret { border-top-color: #555; border-bottom-color: #555; } /* CSS стили для мобильных устройств */ /* Цвет рамки у кнопки, которая открывает меню */ .navbar-default .navbar-toggle { border-color: #DDD; } /* Цвет фона кнопки (которая открывает меню) при поднесении к ней курсора мышки или при нахождении её в фокусе */ .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #DDD; } /* Цвет полосочек в кнопочке, которая открывает меню */ .navbar-default .navbar-toggle .icon-bar { background-color: #CCC; } @media (max-width: 767px) { /* Цвет пунктов меню в раскрывающихся списках */ .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #777; } /* Цвет и фон пункта меню в раскрывающихся списках, при поднесении к нему курсора мышки или при нахождении его в фокусе */ .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #333; background-color: transparent; } } 
Для изменения цвета компонента «Navbar» мы будем использовать цветовую палитру, состоящую из 4 цветов.
Первые два цвета будем использовать для задания цвета пунктам меню. Первый цвет для установления цвета текста и стрелочки. Второй цвет для установления цвета пункта меню (текста), при поднесении к нему курсора мышки или при его нахождении в фокусе, а также для задания цвета активного пункта меню (текста).
Остальные два цвета будем применять для задания фона пунктов меню и рамок. Первый цвет будем использовать для установления фона меню. Второй цвет будем использовать для установления цвета фона пункта меню при поднесении к нему курсора мышки, установления цвета фона активного пункта меню, а также для открытого пункта меню и рамок.
Например: создадим навигационное меню зелёного цвета (текст: 1 цвет — #ecf0f1 , 2 цвет — #d1ffed ; фон: 1 цвет — #2ecc71 , 2 цвет — #27ae60 ).
/* цвет фона и рамки навигационного меню */ .navbar-default { background-color: #2ecc71; border-color: #27ae60; } /* цвет текста, содержащий название сайта или бренда */ .navbar-default .navbar-brand { color: #ecf0f1; } /* цвет текста (название сайта или бренда), при поднесении к нему курсора мышки или при его нахождении в фокусе */ .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #d1ffed; } /* Цвет пунктов навигационного меню */ .navbar-default .navbar-nav > li > a { color: #ecf0f1; } /* Цвет пункта меню, при поднесении к нему курсора мышки или при его нахождении в фокусе */ .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #d1ffed; } /* Цвет и фон активного пункта меню, а также поднесении к нему курсора мышки или при его нахождении в фокусе */ .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #d1ffed; background-color: #27ae60; } /* Цвет и фон открытого пункта меню, а также поднесении к нему курсора мышки или при его нахождении в фокусе */ .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #d1ffed; background-color: #27ae60; } /* Цвет стрелочки (треугольничка) у раскрывающихся пунктов меню */ .navbar-default .navbar-nav > .dropdown > a .caret { border-top-color: #ecf0f1; border-bottom-color: #ecf0f1; } /* Цвет стрелочки (треугольничка) при поднесении к нему курсора мышки или при его нахождении в фокусе */ .navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret { border-top-color: #d1ffed; border-bottom-color: #d1ffed; } /* Цвет стрелочки (треугольничка), открывшегося пункта меню */ .navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret { border-top-color: #d1ffed; border-bottom-color: #d1ffed; } /* CSS стили для мобильных устройств */ /* Цвет рамки у кнопки, которая открывает меню */ .navbar-default .navbar-toggle { border-color: #27ae60; } /* Цвет фона кнопки (которая открывает меню) при поднесении к ней курсора мышки или при нахождении её в фокусе */ .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #27ae60; } /* Цвет полосочек в кнопочке, которая открывает меню */ .navbar-default .navbar-toggle .icon-bar { background-color: #ecf0f1; } /* Цвет пунктов меню в раскрывающихся списках */ @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #ecf0f1; } /* Цвет и фон пункта меню в раскрывающихся списках, при поднесении к нему курсора мышки или при нахождении его в фокусе */ .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #d1ffed; background-color: #27ae60; } } 
| Зелёный цвет | Красный цвет | Фиолетовый цвет | Оранжевый цвет | |
|---|---|---|---|---|
| Цвет пункта меню (текст) | #ecf0f1 | #ecf0f1 | #ecf0f1 | #ecf0f1 |
| Цвет пункта меню (текст), при поднесении к нему курсора мышки, а также цвет активного пункта меню | #d1ffed | #ffbbbc | #ecdbff | #ffe6d1 |
| Цвет фона пункта меню | #2ecc71 | #e74c3c | #9b59b6 | #e67e22 |
| Цвет фона пункта меню, при поднесении к нему курсора мышки, а также цвет рамки меню | #27ae60 | #c0392b | #8e44ad | #d35400 |
| Ссылка для скачивания CSS | Скачать | Скачать | Скачать | Скачать |
В зависимости от дизайна сайта Вы можете создать свою цветовую палитру для навигационного меню, состоящую из 4 цветов. Применить данные цвета можно посредством замены в файле CSS исходных цветов (например: красного navbar) на Ваши подобранные цвета.
Изменение цвета навигационного меню при создании пользовательской сборки
Изменить цвет компонента «Navbar» (навигационного меню) также можно с помощью изменения значения переменных, отвечающих за цветовую палитру данного меню, во время создания пользовательской сборки. Для этого Вам необходимо перейти на страницу Customize веб-сайта Twitter Bootstrap, на которой в разделе «Navbar» необходимо изменить значения переменных, отвечающих за цвета, на необходимые значения. После чего переместиться вниз страницы и нажать на кнопку «Compile and Download» для получения пользовательской сборки Bootstrap.
Данный способ в отличие от вышеприведенного (с помощью файла CSS) является более предпочтительным, т.к. он не требует дополнительного подключения файла со стилями. В итоге это приводит к уменьшению времени, необходимой для загрузки веб-страницы сайта, выполненной по данному способу.
Навигационное меню и фоновое изображение
Многие веб-разработчики на сайтах размещают после навигационного меню фоновое изображение, которое придаёт веб-странице некоторый стиль и делает дизайн сайта более завершённым. В этом разделе мы рассмотрим несколько вариантов совмещения навигационного меню и фона веб-страницы.
1 Вариант
В первом варианте заставку выполним в виде фонового изображения, на которой поместим текст и расположим её после навигационного меню. Код HTML, CSS и JavaScript приведём ниже с пояснениями.
.Lorem ipsum dolor sit amet.
Totam rem aperiam eaque ipsa, quae ab illo inventore. Dolorum fuga deleniti atque corrupti, quos dolores et accusamus.
/* Отступ сверху для содержимого body (высота navbar = 50px)*/ body { padding-top: 50px; } /* Заставка */ .splash { /* Отступ для содержимого, помещенного в splash */ padding:9em 0 2em; /* Картинка, которая используются для splash */ background-image:url(../img/bg.jpg); /* Масштабируем картинку с сохранением пропорций */ background-size:cover; /* Запрещаем фоновому изображению прокручиваться, т.е. делаем его неподвижным */ background-attachment:fixed; /* Цвет текста */ color:#fff; /* Выравниваем текста внутри splash по центру */ text-align:center; } Код JavaScript (можно не использовать, предназначен для изменения позиции фонового изображения):
(function(){ $(window).scroll(function () { // значение, на которое сместилась страница при прокрутке var top = $(document).scrollTop(); $('.splash').css({ //задаём позицию фонового изображения 'background-position': '0px -'+(top/3).toFixed(2)+'px' }); }); })(); 
2 Вариант
Во втором варианте фоновое изображение для веб-страницы создадим с помощью плагина Backstretch. Он предназначен для автоматической подгонки, установленного в качестве параметра изображения под размеры веб-страницы.
Заголовок страницы
/* Отступ сверху для содержимого body */ body { padding-top:250px; } /* Прозрачный фон для основного содержимого */ .article { background:rgba(255,255,255,0.88); padding-top: 20px; margin-bottom: 10px; } /* Стили для подвала страницы */ footer { background:rgba(255,255,255,0.7); line-height: 30px; padding: 0 15px 0 15px; }