Рубрики

Как изменить цвет панели навигации в 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: устанавливает прозрачность панели навигации.

Пример:

<!DOCTYPE html>

<html>

  

<head>

    <title>

      How to change navigation bar color in Bootstrap ?

  </title>

  

    <! - Включить Bootstrap CSS ->

    <link rel="stylesheet" href=

"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

</head>

  

<body>

    <! - Текст на панели навигации темный, а фон светлый ->

    <nav class="navbar navbar-light bg-light">

        <a class="navbar-brand" href="#">

          Light color background

      </a>

    </nav>

  

    <nav class="navbar navbar-light bg-warning">

        <a class="navbar-brand" href="#">

          Warning color background

      </a>

    </nav>

  

    <! - Текст на панели навигации светлый, а фон темный ->

    <nav class="navbar navbar-dark bg-dark">

        <a class="navbar-brand" href="#">

          Dark color background

      </a>

    </nav>

  

    <nav class="navbar navbar-dark bg-primary">

        <a class="navbar-brand" href="#">

          Primary color background

      </a>

    </nav>

  

    <nav class="navbar navbar-dark bg-secondary">

        <a class="navbar-brand" href="#">

          Secondary color background

      </a>

    </nav>

  

    <nav class="navbar navbar-dark bg-success">

        <a class="navbar-brand" href="#">

          Success color background

      </a>

    </nav>

  

    <div class="container">

        <h1 style="color: green">GeeksforGeeks</h1>

        <b>

          How to change navigation bar color in Bootstrap ?

      </b>

        <p>The above navigation bars use some of the

          default color classes available in Bootstrap4.</p>

    </div>

</body>

  

</html>

Выход:

Метод 2: Создание пользовательского класса для панели навигации

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

Цвет фона устанавливается путем непосредственного указания свойства background-color с необходимым цветом.

/* Modify the backgorund color */
.navbar-custom {

    background-color: lightgreen;

}

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

/* Modify brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {

    color: green;

}

Пример:

<!DOCTYPE html>

<html>

  

<head>

    <title>

      How to change navigation bar color in Bootstrap ?

  </title>

  

    <! - Включить Bootstrap CSS ->

    <link rel="stylesheet" 

          href=

"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  

    <style>

        /* Modify the background color */

          

        .navbar-custom {

            background-color: lightgreen;

        }

        /* Modify brand and text color */

          

        .navbar-custom .navbar-brand,

        .navbar-custom .navbar-text {

            color: green;

        }

    </style>

</head>

  

<body>

    <! - Текст на панели навигации темный, а фон светлый ->

    <nav class="navbar navbar-custom">

        <a class="navbar-brand" href="#">

          Custom color background navbar

      </a>

    </nav>

  

    <div class="container">

        <h1 style="color: green">GeeksforGeeks</h1>

        <b>How to change navigation bar 

          color in Bootstrap ?</b>

        

        <p>The above navigation bar uses a 

          custom class for changing the colors.</p>

    </div>

</body>

  

</html>

Выход:

Рекомендуемые посты:

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

0.00 (0%) 0 votes