Как поменять цвет в bootrap 4?

Question

[a16a]

Всем привет.
Я новичок в бутстрапе, никак не хотел признавать 3 версию, но 4 версия мне понравилась. Использую bootrap 4 alpha 6.
Создал вот такое меню. Но не могу найти те классы, которые отвечает за цвета в меню. (обычный, при наводке, активный). Пытался всякие использующие классы тут присваивать новые стили. но без толку. какой серым была, таким и остался.

<nav class="navbar navbar-inverse navbar-toggleable-md fixed-top custom-navbar" style="background-color: #ff3300;">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav d-flex justify-content-center" style="width:100%">
              <li class="nav-item">
                <a class="nav-link" href="#top">Начало</a>
              </li>
              <li class="nav-item">
                <a class="nav-link " href="#about">О нас</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#service">Наши услуги</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#portfolio">Портфолио</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#reviews">Отзывы</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#map">Карта</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#footer">Контакты</a>
              </li>
            </ul>
        </div>
</nav>

Answer 1

[xtala zen]

Но не могу найти те классы, которые отвечает за цвета в меню. (обычный, при наводке, активный). Пытался всякие использующие классы тут присваивать новые стили. но без толку. какой серым была, таким и остался.

Судя по всему вам надо сделать шаг назад и попробовать толком освоить CSS и его правила. В частности понять что такое приоритет (или вес) стиля элемента и как он считается, а так же как его поднимать. Неплохо было бы еще изучить средства отладки встроенные в браузер, чтобы понимать какое свойство отвечает за выбранный элемент.
В данном случае страницу надо открыть в браузере ткнуть правой кнопкой мышки --> просмотреть код, на интересующий элемент и понять каким правилом CSS он описывается. Затем создать для этого элемента свое правило с более высоким приоритетом. Самый простой путь присвоить правилу свойство !important, но это плохая практика, которая простительна только новичкам, т.к. при дальнейшей доработке это свойство может смешать все карты.
Подробнее про приоритеты стиля элемента здесь:
htmlbook.ru/samcss/kaskadirovanie

Comments

[Юрий]

А если править css стили бутстрапа создавая свой стиль к данному классу, но подключать его перед основными стилями? Я так менял свойства класса и хром сначала подгружал поля моего класса, затем не переопределенные поля уже существующего в bootstrap.

[xtala zen]

Юрий: я думаю стили бутстрапа вообще не стоит трогать, а просто подключить свой кастомный css файл, где можно будет дописывать свои стили с более высоким приоритетом. Так проще избежать путаницы.

Answer 2

[Иван Бабий]

Попробуй ТУТ поискать, возможно найдешь ответ на свой вопрос

Answer 3

[Павел]

Посмотреть в исходном коде?
Задать свои цвета?

.navbar-nav .nav-link:hover

Comments

[a16a]

Пробовал, не хочет. где-то рядом все но хз)

Answer 4

[Юрий]

Меняй в CSS стилях нужный тебе класс. Если не хочешь править исходники бутстрапа, создай отдельный стиль и поменяй в нем свойство для определенного класса. К примеру:

.navbar-inverse {
background-color: #e7e7e7;
border-color: #e7e7e7;
}

Comments

[a16a]

Я все так делаю. создал поверх бутсрапа свои стили. не помогло. зашел на бутрасп.ксс. там нашел классы с navbar. и менял там цветы. тоже хз, не хочет. я не знаю что дальше делать)

[Юрий]

a16a: вот можешь глянуть как слепил я, вроде все работает: https://github.com/YuriyKlepka/website/tree/master...

[Ankhena]

a16a: кеш почистить?
Либо выложить сюда ссылку.

Answer 5

[Егор Живагин]

Я не знаю, специально или нет, но у тебя style="background-color: #ff3300;" прописано... Тут правь-не правь css, а style всё равно перекроет всё) А вообще, в стили бутстрапа лучше не лезть. Правильнее добавлять свой класс и ему прописывать свойства, чаще всего это перекроет бутстрап

Comments

[a16a]

да специально) ото стандартный фон серый какой то)