Question

我想更改我的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>

Answer 1

您要做的就是将background-color指定为内联CSS（无需使用!important）。请参阅引导doc

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

Answer 2

这是蓝色导航栏的解决方案

import csv
import requests
from bs4 import BeautifulSoup

with open('cms_scrape.csv', 'w') as csv_file:
    fieldnames = ['name', 'link', 'price']
    csv_writer = csv.DictWriter(csv_file, fieldnames=fieldnames, delimiter='\t')
    csv_writer.writeheader()
    for x in range(0, 70):
        try:
            urls = 'https://www.meisamatr.com/fa/product/cat/2-%D8%A2%D8%B1%D8%A7%DB%8C%D8%B4%DB%8C.html&pagesize[]=24&order[]=new&stock[]=1&page[]=' + str(
                x + 1) + '&ajax=ok?_=1561559181560'
            source = requests.get(urls).text
            soup = BeautifulSoup(source, 'lxml')
            print('Page: %s' % (x + 1))
            for figcaption in soup.find_all('figcaption'):
                price = figcaption.find('span', {'class': 'new_price'}).text.strip()
                name = figcaption.find('a', class_='title').text
                link = figcaption.find('a', class_='title')['href']
                print('%s\n%s\n%s' % (price, name, link))

                dict_row = dict(zip(fieldnames, [price, name, link]))

                csv_writer.writerow(dict_row)
        except:
            continue

@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 */
}

如果需要，您可以编辑此文件 Link

这是颜色代码链接color code link

Answer 3

尝试一下：

HTML内联CSS ：

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

OR

在HTML和CSS覆盖中添加自定义CSS类，它将!important

codepen working demo

Answer 4

您可以使用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']);

更改引导框架的NAVBAR颜色

4 个答案: