Question

有没有办法在Bootstrap中更改所有.btn属性？我尝试了下面的，但有时它仍然显示默认的蓝色（比如点击并删除鼠标等）。如何完全改变整个主题？

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2;
}

Answer 1

如果要覆盖引导程序中的任何默认属性，则必须使属性变得重要。

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2 !important;
}

我希望这对你有用。

Answer 2

我猜您在.btn-primary:focus之后忘记了.btn-primary属性和逗号。
您也可以使用less并重新定义变量中的某些颜色。无文件

考虑到这一点，您的代码将如下所示：

＆＃13;

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
    background-color: #8064A2;
    border-color: #8064A2;
}

＆＃13;

Answer 3

查看需要覆盖哪些属性的最简单方法是查看Bootstrap's source code，特别是mixins/buttons.less中定义的.button-variant mixin。你仍然需要覆盖相当多的属性来摆脱所有.btn-primary样式（例如:focus，disabled，下拉列表中的用法等。）

更好的方法可能是：

使用Bootstrap's online customization tool
手动创建自己的颜色类，例如.btn-whatever
使用LESS编译器并使用.button-variant mixin创建自己的颜色类，例如.btn-whatever

Answer 4

Bootstrap 4的2018更新

现在，Bootstrap 4使用SASS，您可以使用from ..cfg import config mixins轻松地更改主按钮的颜色：

button-variant

https://www.codeply.com/go/2bHYxYSC0n（ SASS演示）

此SASS编译为以下CSS ...

$mynewcolor:#77cccc;

.btn-primary {
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}

.btn-outline-primary {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}

https://www.codeply.com/go/lD3tUE01lo（ CSS演示）

要更改 all 类的原色，请参见：Customizing Bootstrap CSS template和How to change the bootstrap primary color?

Answer 5

只需创建自己的按钮：

http://blog.koalite.com/bbg/
在boottrap.min.css结束时添加CSS

干杯

Answer 6

你错过了一种风格“.btn-primary：active：focus”，这导致仍然在btn点击默认引导颜色显示一秒钟。这适用于我的代码：

    module.exports = (path, app) => {
    app.use(bodyParser.json())
    app.use(bodyParser.urlencoded({ extended: true }))
    app.use((req, res, next) => {
        if(req.rawBody === undefined && req.method === 'POST' && req.headers['content-type'].startsWith('multipart/form-data')){
            getRawBody(req, {
                length: req.headers['content-length'],
                limit: '10mb',
                encoding: contentType.parse(req).parameters.charset
            }, function(err, string){
                if (err) return next(err)
                req.rawBody = string
                next()
            })
        } else {
            next()
        }
    })

    app.use((req, res, next) => {
        if (req.method === 'POST' && req.headers['content-type'].startsWith('multipart/form-data')) {
            const busboy = new Busboy({ headers: req.headers })
            let fileBuffer = new Buffer('')
            req.files = {
                file: []
            }

            busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
                file.on('data', (data) => {
                    fileBuffer = Buffer.concat([fileBuffer, data])
                })

                file.on('end', () => {
                    const file_object = {
                        fieldname,
                        'originalname': filename,
                        encoding,
                        mimetype,
                        buffer: fileBuffer
                    }

                    req.files.file.push(file_object)
                })
            })

            busboy.on('field', function(fieldname, val, fieldnameTruncated, valTruncated) {
              console.log('Field [' + fieldname + ']: value: ' + inspect(val));
            });

            busboy.on('finish', function() {
              next()
            });

            busboy.end(req.rawBody)
            req.pipe(busboy);
        } else {
            next()
        }
    })}

Answer 7

最简单的方法是：

1）拦截每个按钮状态

2）添加----jGRASP exec: javac -encoding UTF-8 -g @BlackJack_source_files_1638219710914506414jgr Dealer.java:20: error: non-static method theDeck() cannot be referenced from a static context hand.add(Deck.theDeck().toString()); ^ 1 error ----jGRASP wedge2: exit code for process is 1. ----jGRASP: operation complete.以覆盖状态

!important

更实用的 UI方法是使按钮的悬停状态比原始状态更暗：

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: black !important;
  border-color: black !important;
}

Answer 8

我最近遇到过类似的问题，并设法通过添加类来修复它

  body .btn-primary {
    background-color: #7bc143;
    border-color: #7bc143;
    color: #FFF; }
    body .btn-primary:hover, body .btn-primary:focus {
      border-color: #6fb03a;
      background-color: #6fb03a;
      color: #FFF; }
    body .btn-primary:active, body .btn-primary:visited, body .btn-primary:active:focus, body .btn-primary:active:hover {
      border-color: #639d34;
      background-color: #639d34;
      color: #FFF; }

还要注意[disabled]和[disabled]：hover，如果在输入[type = submit]上使用此类。像这样：

body .btn-primary[disabled], body .btn-primary[disabled]:hover {
  background-color: #7bc143;
  border-color: #7bc143; }

Answer 9

删除按钮颜色类（例如“ btn-success”），并放置一个自定义类（例如“ btn-custom”），然后为该类编写css。这对我很有效。

HTML :

<button class="btn btn-block login " type="submit">Sign In</button>

CSS:

 .login  {
    background-color: #0057fc;
    color: white;   
}

Answer 10

这是我的风味，而不会失去悬停。我个人喜欢它比标准的引导程序过渡好！

.btn-primary, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2 !important;
}

.btn-primary:hover {
    background-color: #594671 !important;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
}

Answer 11

在上述@ Codeply-er的答案中为像我这样的SASS / SCSS新手添加了逐步指南。

保存btnCustom.scss。

/* import the necessary Bootstrap files */
@import 'bootstrap';

/* Define color */
$mynewcolor:#77cccc;

.btn-custom {
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}

.btn-outline-custom {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}

下载诸如Koala之类的SASS编译器，以便可以将上面的SCSS文件编译为CSS。
克隆Bootstrap github存储库，因为编译器需要将按钮变型mixins放在某个地方。
通过如下创建_bootstrap.scss文件来显式导入引导程序功能。这将允许编译器访问Bootstrap函数和变量。

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/utilities";

使用先前下载的编译器将btnCustom.scss编译为CSS。

Answer 12

我不是这个answer的OP，但是它对我有帮助：

我想更改主页上的启动轮播的下一个/上一个按钮的颜色。

解决方案： 从bootstrap.css复制选择器名称，然后将其移动到您自己的style.css（具有自己的首选项。）：

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 50%;
  border: 1px solid black;
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: red;
}

Answer 13

您可以使用bootstrap theming在配置文件中添加自定义颜色，例如variables.scss，并确保在编译时在引导之前导入该文件。

$theme-colors: (
    "whatever": #900
);

现在您可以.btn-whatever

Answer 14

这是我对“大纲”按钮的参与：

将 #8e5b5b 替换为您的颜色，将 #b3a7a7 替换为您的颜色，但通常更亮。

.btn-outline-uploader{
  color: #8e5b5b;
  border-color: #8e5b5b;
}

.btn-outline-custom:focus{
  box-shadow: 0 0 0 0.2rem #b3a7a7;
  -webkit-box-shadow: 0 0 0 0.2rem #b3a7a7;
  outline: 0;
}

.btn-outline-custom:hover,
.btn-outline-custom:active{
  color: #fff;
    background-color: #8e5b5b;
    border-color: #8e5b5b;
}

如何在Bootstrap中更改btn颜色

14 个答案: