Меню

Как изменить цвет navbar bootstrap



Как изменить цвет navbar bootstrap

66469 просмотра

6 ответа

В Bootstrap 4, как мне изменить цвет фона панели навигации? Код из twbscolor не работает. Я хочу сделать цвет фона другим, а цвет шрифта — белым.

Ответы (6)

25 плюса

Обновление 2018

Помните, что любые переопределения CSS, которые вы определяете, должны иметь ту же специфику CSS или более , чтобы правильно переопределить CSS Bootstrap.

Bootstrap 4.1+

Если вы только хотите изменить цвет фона, это может быть сделано просто путем применения цвета к , но помните , что не изменит другие цвета , такие как ссылки, парить и цвета в раскрывающемся меню.

Вот CSS, который изменит любые соответствующие цвета Navbar в Bootstrap 4 .

Переопределить Navbar Light или Dark

Если вы используете Bootstrap 4 Navbar navbar-light или navbar-dark классы, используйте это в переопределениях. Например, изменение цвета ссылки Navbar .

При выполнении любых настроек Bootstrap вам необходимо понимать специфику CSS . Переопределения в вашем пользовательском CSS должны использовать селекторы, которые так же специфичны, как bootstrap.css. Прочитайте больше

Прозрачный Навбар

Обратите внимание, что панель Bootstrap 4 Navbar по умолчанию прозрачна. Используйте navbar-dark для темного / жирного фона и используйте, navbar-light если навигационная панель имеет более светлый цвет. Это повлияет на цвет текста и цвет значка переключателя, как описано здесь .

Автор: Zim Размещён: 13.04.2017 01:52

19 плюса

Обновление 2018 — Bootstrap v4.1 +

Вот гораздо более простой способ изменить цвет фона панели навигации.

Просто используйте .navbar-dark вместо .navbar-light и добавьте свой собственный класс цвета фона, как .bg-company-red

.navbar-dark сделает все ваши ссылки белыми.

Автор: Chad Размещён: 27.09.2017 09:48

плюса

Я понял. Это очень просто. Используя класс bg, вы можете легко достичь этого. Позволь мне показать тебе:

Это дает вам синий Navbar по умолчанию

Если вы хотите изменить свой любимый цвет, просто используйте тег style в nav:

Автор: INONAME Размещён: 18.11.2017 03:12

плюса

Если вы прочитаете документацию по начальной загрузке, Цветовые схемы , она ответит на ваши вопросы.

Автор: antonjs Размещён: 01.12.2017 11:20

плюса

Вы можете написать! важное перед значением свойства background-color, как это, оно изменит цвет ссылок.

плюса

Если вы хотите переопределить цвет фона начальной загрузки, вы должны добавить! Важный после цвета.

Источник

Как изменить цвет панели навигации в Bootstrap?

Цвет панели навигации можно изменить в Bootstrap двумя способами:

Метод 1: Использование встроенных классов цвета

Изменение цвета текста

Цвет текста панели навигации можно изменить с помощью двух встроенных классов:

  • navbar-light: этот класс устанавливает цвет текста на темный. Это используется при использовании светлого цвета фона.
  • navbar-dark: этот класс установит цвет текста на свет. Это используется при использовании темного фона.

Изменение цвета фона:

Bootstrap 4 имеет несколько встроенных классов для цветов любого фона. Их можно использовать для установки цвета фона панели навигации. Доступны следующие классы фона:

  • .bg-primary: устанавливает основной цвет.
  • .bg-second: устанавливает цвет вторичного цвета.
  • .bg-success: устанавливает цвет для успеха.
  • .bg-danger: устанавливает цвет опасности.
  • .bg-warning: устанавливает цвет предупреждения.
  • .bg-info: устанавливает цвет информационного цвета.
  • .bg-light: Устанавливает цвет на светлый.
  • .bg-dark: устанавливает темный цвет.
  • .bg-white: устанавливает белый цвет.
  • .bg-transparent: устанавливает прозрачность панели навигации.
Читайте также:  Оформление свадебного зала зеленый цвет

Пример:

How to change navigation bar color in Bootstrap ?

Источник

Навигационная панель

Документация и примеры для мощного и отзывчивого навигационного заголовка Bootstrap и навигационной панели. Включает поддержку брендинга, навигации и прочего, включая поддержку нашего плагина для сворачивания.

Как это работает

Вот что вам надо знать перед использованием навбара:

  • Навбары требуют «обертки» из классов .navbar и .navbar-expand <-sm|-md|-lg|-xl>для отзывчивости при «складывании»и классы , а также классы цветовых схем.
  • Навбары и их содержимое по умолчанию занимают 100% ширины. Используйте опциональные контейнеры для ограничения их горизонтальной ширины.
  • Используйте наши классы отступов и «флекс» для контроля над пространством и выравниванием внутри навбаров.
  • Навбары отзывчивы по умолчанию, но вы можете легко изменить это. Отзывчивое поведение зависит от нашего «плагина свертывания» JavaScript.
  • Навбары скрыты по умолчанию при печати. Сделайте их печатаемыми, добавив класс .d-print в .navbar . Смотри класс отображения.
  • Придайте им доступность использованием элемента

В этом примере использованы классы цвета bg-light и спейсинга my-2 , my-lg-0 , mr-sm-0 , my-sm-0 .

Бренд

.navbar-brand можно применять к большинству элементов, но лучше всего – к ссылке, т.к. некоторые элементы могут потребовать классы или стили.

Добавление изображений к .navbar-brand почти всегда потребует дополнительной стилизации CSS и классов.

Навбар

Ссылки в навигации навбара сделаны на параметрах класса .nav , с их собственными классами-модификаторами; и требуют использования классов тогглера для правильного «отзывчивого» поведения. Навигация в навбарах также займет максимально возможное количество горизонтального места, для правильного выравнивания элементов навбара.

Активные состояния – с классом .active – нужны для индикации возможности применения текущей страницы напрямую к .nav-link или их непосредственному «родителю» .nav-item .

И т.к. мы используем классы в наших навбарах, вы можете избегать «списочного» подхода к разметке, если вам надо.

Выпадающие меню требуют оборачивающего элемента для позиционирования, так что удостоверьтесь в использовании раздельных и вложенных элементов для .nav-item и .nav-link , как в примере ниже.

Формы

Размещайте внутри навбара различные элементы контроля форм и компоненты, добавив в них класс .form-inline .

Непосредственные дочерние элементы в .navbar используют гибкую компоновку и по умолчанию имеют занчение justify-content: between . Используйте дополнительные гибкие утилиты, необходимые для настройки их поведения.

Работают и формы ввода, также:

Разные кнопки поддерживаются как часть этих форм в навбарах. Это также хорошее напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов различных размеров.

Текст

Благодаря классу .navbar-text навбары могут содержать «крупицы» текста. Этот класс придает строкам текста вертикальное выравнивание и горизонтальный спейсинг.

Смешивайте и добивайтесь необходимого соответствия с другими компонентами и утилитами, как вам надо.

Цветовые схемы

Настройка оформления навбаров в BS4 стала столь легкой благодаря сочетанию классов оформления и утилит background-color . Выбирайте .navbar-light для навбара со светлым фоном, или .navbar-dark для навбара с темным фоном. Далее настраивайте их классами .bg-* .

Контейнеры

Хотя это и не требуется, вы можете обернуть навбар в .container для центрирования навбара на странице или добавить один навбар в .container лишь для центрирования содержимого навбара с фиксированной позицией “top”.

Когда контейнер внутри вашего навбара, его горизонтальный паддинг удаляется на брейкпойнтах, меньших чем заданный вами .navbar-expand <-sm|-md|-lg|-xl>. Это гарантирует, что не произойдет ненужного удвоения паддинга на меньших вьюпортах, когда ваш навбар свернут.

Размещение

Используйте наши утилиты позиционирования для размещения навбаров в нестатичных позициях. Выбирайте из фиксированного наверху, внизу или «приклеивающегося» (прокручивается со страницей, пока не достигнет верха, и остается там). Фиксированные навбары используют position: fixed , поэтому они «исключены» из нормального строения DOM и могут потребовать добавления CSS (например, padding-top в ).

Также обратите внимание, что .sticky-top использует position: sticky , которая не поддерживается полностью в каждом браузере.

Источник

Bootstrap 4 Navigation Bar — меню

Панели навигации

Панель навигации — это заголовок навигации, расположенный в верхней части страницы:

Базовая навигационная

С помощью Bootstrap панель навигации может расширяться или сворачиваться в зависимости от размера экрана.

Стандартная панель навигации создается с помощью .navbar класса, за которым следует адаптивный класс свертывания: (стеки навигационной панели .navbar-expand-xl|lg|md|sm по вертикали на очень больших, больших, средних или маленьких экранах).

Чтобы добавить ссылки внутри навигационной области, используйте

    элемент с class=»navbar-nav» . Затем добавьте
    элементы с .nav-item классом за которым следует элемент с .nav-link классом:

Пример

Вертикальная навигационная

Удалите .navbar-expand-xl|lg|md|sm класс для создания вертикальной панели навигации:

Пример

Центрированная навигационная

Добавьте .justify-content-center класс для центрирования панели навигации.

Следующий пример будет центрировать панель навигации на средних, больших и очень больших экранах. На маленьких экранах она будет отображаться по вертикали и по левому краю (из-за. навигации-развернуть-SM класса):

Пример

Цветной навигационной

Используйте любой из .bg-color классов для изменения цвета фона навигационной области (. .bg-primary .bg-success .bg-info .bg-warning .bg-danger .bg-secondary .bg-dark и .bg-light )

Совет: Добавьте белый цвет текста ко всем ссылкам в навигационной навигации с помощью .navbar-dark класса или используйте .navbar-light класс для добавления черного цвета текста.

Источник

Компоненты

Более десятка компонентов, созданных для отображения кнопок, выпадающих списков, навигации, предупреждений и многого другого.

Навигационная панель

Навигационная панель — это оболочка, которая позиционирует брендинг, навигацию и другие элементы в хедере. Он легко расширяется и, благодаря нашему плагину Collapse, может легко интегрировать адаптивное поведение.

Содержание

Как это работает

Вот что вам необходимо знать перед началом работы с навигационной панелью:

  • Навигационная панель требует обертывания .navbar с .navbar-toggleable-* for responsive collapsing и классов цветовой схемы.
  • Навигационные панели и их контент по умолчанию подвижные. Используйте дополнительные контейнеры, чтобы ограничить их горизонтальную ширину.
  • Навигационные панели и их содержимое построены с помощью flexbox, что обеспечивает легкость выравнивания через классы утилиты.
  • Навигационные панели по умолчанию адаптивны, но вы можете легко модифицировать их, чтобы изменить это. Адаптивное поведение зависит от нашего плагина Collapse JavaScript.
  • Обеспечьте доступность с помощью элемента

Brand

.navbar-brand может быть применена к большинству элементов, но якорь лучше всего работает, поскольку некоторым элементам могут потребоваться классы утилит или пользовательские стили.

Добавление изображений в .navbar-brand вероятно, всегда требует пользовательские стили или утилиты для правильного размера. Ниже представлены несколько примеров для демонстрации.

Навигация

Навигационные ссылки навигационной панели строятся на наших опциях .nav со своим собственным классом-модификатором и требуют использования toggler классов для правильного адаптивного дизайна. Навигация в навигационной панели также будет расти, чтобы занять как можно больше горизонтального пространства, чтобы обеспечить безопасное выравнивание содержимого навигационной панели.

Активные состояния — с .active — для указания текущей страницы могут быть применены напрямую к .nav-link или их непосредственным родительским .nav-item .

И поскольку мы используем классы для наших навигаций, вы можете полностью избежать использования подхода, основанного на списках, если хотите.

Вы также можете использовать выпадающие списки в вашей навигации навигационной панели. Для раскрывающихся меню требуется обернуть элемент для позиционирования, поэтому обязательно используйте отдельные и вложенные элементы для .nav-item и .nav-link , как показано ниже.

Формы

Разместите различные элементы управления формы и компоненты в навигационную панель с помощью .form-inline .

При необходимости совместите содержимое своих встроенных форм с утилитами.

Группы входных данных также работают:

В этих формах навигационной панели также поддерживаются различные кнопки. Это также отличное напоминание о том, что утилиты выравнивания по вертикали могут использоваться для выравнивания элементов разных размеров.

Текст

Навигационная панель может содержать биты текста с помощью .navbar-text . Этот класс регулирует вертикальное выравнивание и горизонтальное расстояние для строк текста.

При необходимости совместите их с другими компонентами и утилитами.

Цветовые схемы

Theming для навигационной панели никогда не была проще, благодаря сочетанию тематических классов и утилит background-color . Выберайте из .navbar-light для использования со светлыми цветами фона, или .navbar-inverse для темных цветов фона. Затем, настройте с помощью .bg-* утилиты.

Контейнеры

Хотя это и необязательно, вы можете обернуть навигационную панель в .container чтобы центрировать ее на странице или добавить один внутри, чтобы центрировать содержимое фиксированного или статического верха навигационной панели.

Когда контейнер находится в вашей навигационной панели, его горизонтальное заполнение удаляется в точках останова ниже указанного вами класса .navbar-toggleable-* . Это гарантирует, что мы не дублируем излишнее заполнение на небольших экранах, когда ваша навигационная панель свернута.

Размещение

Используйте наши утилиты для размещения навигационных панелей в нестатических позициях. Выберите один из следующих вариантов: фиксированная сверху, фиксированная снизу или прикрепленная к верхней части. Обратите внимание, что position: sticky , используемый для .sticky-top , поддерживается не в каждом браузере.

Источник