Cách thay đổi màu btn trong Bootstrap

Question 1

Có cách nào để thay đổi tất cả các .btnthuộc tính trong Bootstrap không? Tôi đã thử những cái bên dưới, nhưng đôi khi nó vẫn hiển thị màu xanh lam mặc định (giả sử sau khi nhấp và xóa chuột, v.v.). Làm cách nào để thay đổi toàn bộ chủ đề?

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

Question 2

Cách dễ nhất để xem bạn cần ghi đè thuộc tính nào là xem mã nguồn của Bootstrap , cụ thể là .button-variantmixin được định nghĩa trong mixins / button.less . Bạn vẫn cần phải ghi đè lên khá nhiều tài sản để thoát khỏi tất cả các .btn-primaryphong cách (ví dụ :focus, disabled, sử dụng trong Dropdowns vv).

Một cách tốt hơn có thể là:

Tạo phiên bản Bootstrap tùy chỉnh của riêng bạn bằng công cụ tùy chỉnh trực tuyến của Bootstrap
Tự tạo lớp màu của riêng bạn theo cách thủ công, ví dụ: .btn-whatever
Sử dụng trình biên dịch LESS và sử dụng .button-variantmixin để tạo lớp màu của riêng bạn, ví dụ:.btn-whatever

Question 3

Nếu bạn muốn ghi đè bất kỳ thuộc tính mặc định nào trong bootstrap, bạn phải làm cho các thuộc tính trở nên quan trọng.

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

tôi hy vọng điều này sẽ làm việc cho bạn.

Question 4

Cập nhật 2019 cho Bootstrap 4

Bây giờ Bootstrap 4 sử dụng SASS, bạn có thể dễ dàng thay đổi màu nút chính bằng cách sử dụng các button-variantmixin:

$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/2bHYxYSC0n ( SASS demo )

SASS này biên dịch thành CSS sau ...

.btn-primary {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:hover {
    color: #212529;
    background-color: #52bebe;
    border-color: #8ad3d3
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    color: #212529;
    background-color: #9cdada;
    border-color: #2e7c7c
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-outline-primary {
    color: #7cc;
    background-color: transparent;
    background-image: none;
    border-color: #7cc
}

.btn-outline-primary:hover {
    color: #222;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: #7cc;
    background-color: transparent
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
    color: #212529;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

https://www.codeply.com/go/lD3tUE01lo (Bản trình diễn CSS )

Để thay đổi màu chính cho tất cả các lớp, hãy xem: Tùy chỉnh mẫu CSS Bootstrap và Cách thay đổi màu chính của bootstrap?

Question 5

Tôi đoán bạn đã quên thuộc .btn-primary:focustính và dấu phẩy sau khi .btn-primary

Bạn cũng có thể sử dụng ít hơn và xác định lại một số màu trong tệp variable.less

Với điều này trong tâm trí mã của bạn sẽ giống như sau:

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

Mở rộng đoạn mã

Question 6

Chỉ cần tạo nút của riêng bạn trên:

http://blog.koalite.com/bbg/
thêm CSS vào cuối boottrap.min.css của bạn

Chúc mừng

Question 7

Bạn đã bỏ lỡ một kiểu ".btn-primary: active: focus", điều này khiến màu bootstrap mặc định vẫn hiển thị trong một giây trong khi nhấp chuột btn. Điều này hoạt động trong mã của tôi:

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

Question 8

Loại bỏ lớp màu nút như "btn-success" và đặt một lớp tùy chỉnh như "btn-custom" và viết css cho lớp đó. Điều đó chỉ đơn giản làm việc cho tôi.

HTML :

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

CSS:

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

Question 9

Cách đơn giản nhất là:

1) chặn mọi trạng thái nút

2) thêm !importantđể ghi đè các trạng thái

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

Cách giao diện người dùng thực tế hơn là làm cho trạng thái di chuột của nút tối hơn trạng thái ban đầu:

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

Question 10

Đây là hương vị của tôi mà không bị mất khi di chuột. Cá nhân tôi thích nó hơn so với chuyển đổi bootstrap tiêu chuẩn.

.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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary">Hover me!</button>

Mở rộng đoạn mã

Question 11

Tôi đã gặp phải sự cố tương tự gần đây và đã tìm cách khắc phục bằng cách thêm lớp

  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; }

Cũng chú ý đến [đã tắt] và [đã tắt]: di chuột, nếu lớp này được sử dụng trên đầu vào [type = submit]. Như thế này:

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

Question 12

Tôi nghĩ rằng sử dụng !importantkhông phải là một lựa chọn rất khôn ngoan. Nó có thể gây ra nhiều vấn đề khác, đặc biệt khi làm cho trang web đáp ứng. Vì vậy, tôi hiểu rằng, cách tốt nhất để làm điều này là sử dụng lớp CSS nút tùy chỉnh với .btnlớp bootstrap. .btnlà lớp kiểu cơ sở cho nút bootstrap. Vì vậy, hãy giữ nguyên đó làm bố cục, chúng ta có thể thay đổi các kiểu khác bằng cách sử dụng lớp css tùy chỉnh của mình. Một điều nữa tôi muốn đề cập ở đây. Một số người đang cố gắng xóa đường viền màu xanh lam khỏi các nút. Đó không phải là một ý kiến hay vì vấn đề trợ năng khi sử dụng bàn phím. Thay đổi màu của nó bằng cách sử dụng outline-color:thay thế.

Question 13

Thêm hướng dẫn từng bước cho câu trả lời của @ Codeply-er ở trên cho người mới SASS / SCSS như tôi.

Lưu lại 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);
}

Tải xuống trình biên dịch SASS chẳng hạn như Koala để tệp SCSS ở trên có thể được biên dịch sang CSS.
Sao chép repo github Bootstrap vì trình biên dịch cần các bản mixin biến thể nút ở đâu đó.
Nhập các hàm bootstrap một cách rõ ràng bằng cách tạo một _bootstrap.scsstệp như bên dưới. Điều này sẽ cho phép trình biên dịch truy cập các hàm và biến 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";

Biên dịch btnCustom.scssvới trình biên dịch đã tải xuống trước đó thành css.

Question 14

Tôi không phải là OP của câu trả lời này nhưng nó đã giúp tôi như vậy:

Tôi muốn thay đổi màu của các nút tiếp theo / trước đó của băng chuyền bootstrap trên trang chủ của mình.

Giải pháp: Sao chép tên bộ chọn từ bootstrap.css và di chuyển chúng sang style.css của riêng bạn (với tiền thân của riêng bạn ..):

.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;
}

Mở rộng đoạn mã