Измените цвет NAVBAR для фреймворка начальной загрузки

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

Вот фрагмент кода:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width-device-width, initial-scale=1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
    <link rel = "stylesheet" a href = "css/bootstrap.css">
    <link rel = "stylesheet" a href = "css/fonts.css">
    <link rel = "stylesheet" href = "css/mystyle.css">
    <script src = "js/bootstrap.jquery.js"></script>
    <script src = "ja/bootstrap.js"></script>
    <script src = "js/proper.js"></script>
    <title>Python Buddha</title>
</head>
<body>

    <!-- Navbar -->
    <div id = "Header">
        <nav class = "navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
            <div class = "container">
                <button class = "navbar-toggler" data-toggle = "collapse" data-target = "#Navbar">
                    <span class = "navbar-toggler-icon"></span>
                </button>

                <a href = "#" class = "navbar-brand"><h3>Python Buddha</h3></a>
                <div class = "collapse navbar-collapse" id = "Navbar">
                    <ul class = "navbar-nav ml-auto">
                        <li class = "nav-item"><a href = "#" class = "nav-link">About Me</a></li>
                        <li class = "nav-item"><a href = "#" class = "nav-link">CV</a></li>
                        <li class = "nav-item"><a href = "#" class = "nav-link">Projects</a></li>
                        <li class = "nav-item"><a href = "#" class = "nav-link">Volunteering</a></li>
                    </ul>
                </div>
            </div>
            </div>
        </nav>
    </div>

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

— 01.07.2019 13:27

проголосовал. Благодарю. на мой вопрос тоже пожалуйста!

— 01.07.2019 13:32

ты....так держать...☺

— 01.07.2019 14:20

html css twitter-bootstrap

30.06.2019 10:16

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Попробуй это:

Встроенный CSS в HTML:

 <nav class = "navbar navbar-expand-sm bg-dark fixed-top" style = "background-color: red !important">

ИЛИ

добавить пользовательский класс CSS в HTML и переопределить CSS, который будет !important

рабочая демонстрация codepen

могу я спросить, почему <h3>Python Buddha</h3> показывает мне синий цвет?

— 01.07.2019 10:46

проверьте цвет тега <h3>, который вы добавили в свой CSS

— 01.07.2019 11:41

30.06.2019 10:26

Все, что вам нужно сделать, это указать background-color как встроенный css (не нужно использовать !important). См. начальную загрузку документ

<nav class = "navbar navbar-expand-sm fixed-top" style = "background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

могу я спросить, почему <h3>Python Buddha</h3> показывает мне синий цвет?

— 01.07.2019 10:46

Взгляните на стиль, примененный к вашему h3. Не знаю, поможет ли это, но я только что заметил опечатку в родительском теге ˋaˋ (class вместо ˋclass`) вашего кода.

— 01.07.2019 11:10

30.06.2019 11:16

Ответ принят как подходящий

Это ваше решение с синей панелью навигации

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'); /* remove this link u already given this link in ur html code */

.navbar-dark{
  background-color: blue !important; /* your navbar color blue */
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width-device-width, initial-scale=1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
    <link rel = "stylesheet" a href = "css/bootstrap.css">
    <link rel = "stylesheet" a href = "css/fonts.css">
    <link rel = "stylesheet" href = "css/mystyle.css">
    <script src = "js/bootstrap.jquery.js"></script>
    <script src = "ja/bootstrap.js"></script>
    <script src = "js/proper.js"></script>
    <title>Python Buddha</title>
</head>
<body>

    <!-- Navbar -->
    <div id = "Header">
        <nav class = "navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
            <div class = "container">
                <button class = "navbar-toggler" data-toggle = "collapse" data-target = "#Navbar">
                    <span class = "navbar-toggler-icon"></span>
                </button>
                <a href = "#" class = "navbar-brand"><h3>Python Buddha</h3></a>
                <div class = "collapse navbar-collapse" id = "Navbar">
                    <ul class = "navbar-nav ml-auto">
                        <li class = "nav-item"><a href = "#" class = "nav-link">About Me</a> </li>
                        <li class = "nav-item"><a href = "#" class = "nav-link">CV</a> </li>
                        <li class = "nav-item"><a href = "#" class = "nav-link">Projects</a> </li>
                        <li class = "nav-item"><a href = "#" class = "nav-link">Volunteering</a> </li>
                    </ul>
                </div>
            </div>
            </div>

        </nav>
    </div>

Если вы хотите, вы можете отредактировать этот файл Связь

Это ссылка с цветовым кодом ссылка на код цвета

могу я спросить, почему <h3>Python Buddha</h3> показывает мне синий цвет?

— 01.07.2019 10:46

какой цвет вы хотите? потому что вы написали классы вместо класса

— 01.07.2019 13:19

30.06.2019 13:56

Вы можете использовать SASS и в своем пользовательский файл sass перезаписать цветовую схему Bootstrap по умолчанию:

$theme-colors: (
  "primary": #006699,
  "danger": #cc0000
);

И так далее.

Вы можете использовать Gulp для компиляции SASS в CSS. В файле с именем gulpfile.js у вас должно быть что-то вроде:

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("build/css"))
        .pipe(browserSync.stream());
    });


    // Static Server + watching scss/html files
    gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./build"  
    });

    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass']);
    gulp.watch(['node_modules/bootstrap/dist/js/bootstrap.min.js'], ['js']);
    gulp.watch("src/*.html").on('change', browserSync.reload);
});

gulp.task('default', ['js','serve']);

могу я спросить, почему <h3>Python Buddha</h3> показывает мне синий цвет?

— 01.07.2019 10:45

30.06.2019 14:12