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

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

В этом руководстве мы рассмотрим следующие методы изменения цвета текста панели навигации:

• Использование классов CSS панели навигации Bootstrap
• Пользовательский CSS
• Переменные Sass (для расширенной настройки)

Мы также рассмотрим несколько примеров изменения цвета текста на распространенные цвета, такие как белый, синий, красный и т. д. Давайте начнем!

Предварительные условия

Прежде чем изменять цвет текста панели навигации, убедитесь, что у вас есть следующее:

• CSS Bootstrap включен на вашу страницу
• Разметка панели навигации Bootstrap на вашей странице

Вот пример HTML для базовой панели навигации:

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </nav> 

Это даст вам базовую белую панель навигации для начала. Теперь давайте рассмотрим различные способы изменения цвета текста.

Использование CSS-классов панели навигации Bootstrap

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

• navbar-light — для светлых цветов фона используйте класс navbar-light и задайте темный цвет текста, например черный или темно-серый.
• navbar-dark — для темных цветов фона используйте класс navbar-dark и задайте светлый цвет текста, например белый или светло-серый.

Чтобы использовать эти классы:

1. Добавьте либо navbar-light, либо navbar-dark в div .navbar.
2. Задайте свойству CSS color нужный цвет текста.

Вот пример изменения цвета текста на белый:

<nav class="navbar navbar-dark bg-primary" style="color: white;"> 

И пример изменения цвета на черный:

 <nav class="navbar navbar-light bg-light" style="color: black;"> 

Классы navbar-light и navbar-dark автоматически устанавливают цвет фона и границы, поэтому вам нужно указать только цвет текста.

Это позволяет легко и быстро изменить цвет текста панели навигации на распространенные варианты, такие как черный, белый или серый.

Примеры цвета текста панели навигации

Вот несколько примеров использования navbar-light и navbar-dark для изменения цвета текста:

<nav class="navbar navbar-dark bg-primary" style="color:white;"> 

 <nav class="navbar navbar-light bg-light" style="color:black;"> 

<nav class="navbar navbar-light bg-light" style="color:#333;"> 

<nav class="navbar navbar-dark bg-dark" style="color:blue;"> 

Это позволяет легко и быстро настроить цвет текста панели навигации. Далее рассмотрим использование пользовательского CSS для более сложных изменений.

Пользовательский CSS

Для более сложной настройки цвета текста можно использовать пользовательский CSS. Это позволяет задать цвету любое значение.

Чтобы изменить цвет текста с помощью CSS:

1. Добавьте идентификатор или класс в .navbar div, чтобы указать его.
2. Используйте CSS для установки свойства color.

Например:

<nav class="navbar" id="mynavbar"> <style> #mynavbar { color: hotpink; } </style> 

Вы можете использовать названия цветов CSS, шестнадцатеричные коды, значения rgb/rgba и т. д. Вот несколько примеров:

#mynavbar { color: hotpink; /* название цвета */ } #mynavbar { color: #6da552; /* шестнадцатеричный код */ } #mynavbar { color: rgb(100, 150, 200); /* значение rgb */ } 

Это позволяет более точно управлять цветом текста.

Больше примеров

Вот еще несколько примеров кода для разных цветов текста:

 <nav class="navbar" id="mynavbar"> 

#mynavbar { color: red; } 

<nav class="navbar" id="mynavbar"> 

 #mynavbar { color: orange; } 

<nav class="navbar" id="mynavbar"> 

#mynavbar { color: cyan; } 

Таким образом, вы можете использовать CSS, чтобы настроить цвет на любое значение. Далее давайте рассмотрим, как вносить изменения на уровне переменных Sass.

Переменные Sass

При использовании скомпилированного Bootstrap Sass вы можете изменять цвета через переменные Sass. Это позволяет вам изменять цвет текста панели навигации глобально.

Bootstrap определяет следующие переменные Sass для панели навигации:

• $navbar-light-color — цвет текста для navbar-light
• $navbar-light-hover-color — цвет текста при наведении для navbar-light
• $navbar-dark-color — цвет текста при наведении для navbar-dark
• $navbar-dark-hover-color — цвет текста при наведении для navbar-dark

Чтобы изменить цвет текста, установите соответствующую переменную на нужный цвет в вашем файле Sass перед импортом Bootstrap:

// Светлая панель навигации $navbar-light-color: purple; // Темная панель навигации $navbar-dark-color: white; @import "bootstrap"; 

Это сделает весь текст панели навигации этого цвета по умолчанию.

Больше примеров Sass

 $navbar-dark-color: blue; 

$navbar-light-color: green; 

 $navbar-light-color: pink; 

Итак, переменные Sass могут быть полезны для глобального управления цветами текста панели навигации.

Заключение

Подведем итог: существует несколько различных способов изменить цвет текста по умолчанию для панелей навигации Bootstrap:

• Использование CSS-классов панели навигации, таких как navbar-light и navbar-dark
• Пользовательский CSS, нацеленный на элемент .navbar
• Переменные Sass для глобального управления

Классы панели навигации полезны для быстрой смены распространенных цветов, таких как черный, белый или серый. Для более сложной настройки любого цвета используйте пользовательские переменные CSS или Sass.

Вот несколько последних примеров:

 <nav class="navbar navbar-dark bg-primary" style="color:white;"> 

<nav class="navbar" id="mynavbar"> #mynavbar { color: purple; } 

$navbar-light-color: orange; 

Надеюсь, это руководство показало некоторые полезные приемы настройки цвета текста панели навигации в Bootstrap в соответствии с вашими дизайнерскими потребностями! Дайте мне знать, если у вас возникнут какие-либо другие вопросы.