Tạo kiểu cho các nút bootstrap twitter

Các nút Twitter-Bootstrap rất đẹp. Hãy thử chúng bằng cách cuộn qua chúng

Nhưng chúng bị hạn chế về màu sắc.

Có cách nào tôi có thể thay đổi màu cơ bản của nút mà vẫn giữ được hiệu ứng di chuột qua tuyệt đẹp mà bootstrap đã tạo ra rất đẹp và dễ dàng không?

Tôi hoàn toàn không biết css / javascript trông như thế nào mà twitter sử dụng để duy trì những hiệu ứng đó.

Về cơ bản, các nút trong Twitter Bootstrap được điều khiển trong CSS bởi ".btn {}". Những gì bạn phải làm là truy cập tệp CSS và tìm nơi nó nói "btn" và thay đổi cài đặt màu sắc. Tuy nhiên, nó không đơn giản như chỉ làm điều đó vì bạn cũng phải thay đổi màu sắc của nút khi bạn đánh dấu nó, v.v. Để làm được điều đó, bạn phải tìm các thẻ khác trong CSS như ".btn: hover {} ", Vân vân.

Thay đổi nó yêu cầu thay đổi CSS. Đây là một liên kết nhanh đến tệp đó:

https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

Tôi tìm thấy cách đơn giản nhất là đặt điều này trong ghi đè của bạn. Xin lỗi vì sự lựa chọn màu sắc không thể tưởng tượng của tôi

Bootstrap 4-Alpha SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

Ví dụ về Bootstrap 4 Alpha SASS

Bootstrap 3 LESS

.my-btn {
  //.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
  .button-variant(red; white; blue);
}

Ví dụ về Bootstrap 3 LESS

Bootstrap 3 SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

Ví dụ về Bootstrap 3 SASS

Bootstrap 2.3 LESS

.btn-primary {
  //.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  .buttonBackground(red, white);
}

Ví dụ về Bootstrap 2.3 LESS

Bootstrap 2.3 SASS

.btn-primary {
  //@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); 
  @include buttonBackground(red, white); 
}

Nó sẽ chăm sóc di chuột / kích hoạt cho bạn

Từ các nhận xét, nếu bạn muốn làm sáng nút thay vì tối khi sử dụng màu đen (hoặc chỉ muốn đảo ngược), bạn cần mở rộng lớp thêm một chút như vậy:

Bootstrap 3 SASS Ligthen

.my-btn {
  // @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  $color: #fff;
  $background: #000;
  $border: #333;
  @include button-variant($color, $background, $border);
  // override the default darkening with lightening
  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: lighten($background, 20%); //10% default
    border-color: lighten($border, 22%); // 12% default
  }
}

Ví dụ về Bootstrap 3 SASS Lighten

Bạn có thể ghi đè các màu trong css của mình, ví dụ như đối với nút Nguy hiểm:

.btn-danger { border-color: #[insert color here]; background-color: #[insert color here];

.btn-danger:hover { border-color: #[insert color here]; background-color: #[insert color here]; }

Đây là một nguồn tốt: http://charliepark.org/bootstrap_buttons/

Bạn có thể thay đổi màu sắc và xem hiệu ứng đang hoạt động.

Nếu bạn đang tải tệp CSS tùy chỉnh của riêng mình sau khi tải bootstrap.css (phiên bản 3), bạn có thể thêm 2 kiểu CSS này vào custom.css của mình và chúng sẽ ghi đè mặc định bootstrap cho kiểu nút mặc định.

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {

  background-color: #A6A8C1;
  border-color: #31347B;
 }

.btn
{
  background-color: #9F418F;
  border-color: #9F418F;
}

Thay vì thay đổi từng giá trị CSS, tôi khuyên bạn nên sử dụng LESS. Bootstrap có phiên bản ÍT NHẤT trên Github: https://github.com/twbs/bootstrap

LESS cho phép bạn xác định các biến để thay đổi màu sắc, giúp thuận tiện hơn rất nhiều. Xác định màu một lần và LESS biên dịch tệp CSS thay đổi các giá trị trên toàn cầu. Tiết kiệm thời gian và công sức.

Để ghi đè hoàn toàn các kiểu nút bootstrap, bạn cần ghi đè danh sách các thuộc tính. Xem ví dụ dưới đây.

    .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, 
    .btn-primary:active, .btn-primary.active, .btn-primary:visited,
    .btn-primary:active:hover, .btn-primary.active:hover{
        background-color: #F19425;
        color:#fff;
        border: none;
        outline: none;
    }

Nếu bạn không sử dụng tất cả các kiểu được liệt kê thì bạn sẽ thấy các kiểu mặc định khi thực hiện các tác vụ trên nút. Ví dụ: khi bạn nhấp vào nút và xóa con trỏ chuột khỏi nút, bạn sẽ thấy màu mặc định hiển thị. Hoặc giữ nút được nhấn, bạn sẽ thấy các màu mặc định. Vì vậy, tôi đã liệt kê tất cả các kiểu giả sẽ được ghi đè.

Đối với Bootstrap for Sass ghi đè nó

.btn-default {

    @include button-variant($color, $background, $border);

}

Bạn có thể xem nguồn của nó tại đây: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

Hoặc thử http://twitterbootstrapbuttons.w3masters.nl/ . Nó tạo css cho các nút dựa trên đầu vào màu html. Thêm css sau css bootstrap. Nó cung cấp ba kiểu nút (sáng, tối và xoay).

Đây là một cách rất dễ dàng và thành thạo: thêm CSS vào lớp của bạn với các màu bạn muốn áp dụng cho nút của mình:

.my-btn{
    background: #0099cc;
    color: #ffffff;
}
.my-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}

và thêm kiểu vào nút hoặc liên kết bootstrap của bạn:

<a href="xxx" class="btn btn-info my-btn">aaa</a>

Trong Twitter Bootstrap bootstrap 3.0.0, nút Twitter phẳng. Bạn có thể tùy chỉnh nó từ http://getbootstrap.com/customize . Màu nút, đường viền rạng rỡ, v.v.

Ngoài ra, bạn có thể tìm thấy mã HTML và các chức năng khác http://twitterbootstrap.org/bootstrap-css-buttons .

Nút Bootstrap 2.3.2 có dạng gradient nhưng 3.0.0 (phiên bản mới) phẳng và trông bắt mắt hơn.

và bạn cũng có thể tìm thấy để tùy chỉnh toàn bộ giao diện và kiểu dáng của bootstrap tài nguyên này: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

Tôi biết đây là một chủ đề cũ hơn, nhưng chỉ để thêm một góc nhìn khác. Tôi khẳng định rằng việc sử dụng ghi đè thực sự có một chút mùi mã và sẽ nhanh chóng bị loại khỏi các dự án lớn hơn. Hôm nay bạn ghi đè Nút, Chế độ ngày mai, ngày hôm sau nó thả xuống, v.v., v.v.

Tôi khuyên bạn nên thử có thể bình luận về bao gồm buttons.lessvà xác định của riêng tôi, hoặc tìm một thư viện Buttons khác phù hợp hơn với dự án của tôi. Shameless plug: đây là một ví dụ về cách dễ dàng kết hợp thư viện Buttons của chúng tôi với TB: Sử dụng Buttons với Twitter Bootstrap . Trong thực tế, một lần nữa, bạn có thể muốn xóa buttons.lesshoàn toàn phần bao gồm để cải thiện hiệu suất nhưng điều này cho thấy cách bạn có thể làm cho mọi thứ trông bớt "chung chung" hơn một chút. Bản thân tôi chưa thực hiện bài tập này nhưng tôi tưởng tượng bạn có thể bắt đầu bằng cách chỉ cần bình luận những dòng như:

https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17

Và sau đó biên dịch lại bằng cách sử dụng `lessc bằng một trong các mô-đun nút của riêng bạn. Bằng cách đó, bạn có được lõi TB đã được thử nghiệm trong trận chiến nhưng vẫn có thể tùy chỉnh mọi thứ mà không cần dùng đến các ghi đè lớn. Hoàn toàn không có lý do gì để không chỉ sử dụng các phần của thư viện như Bootstrap. Tất nhiên, điều tương tự cũng áp dụng cho phiên bản Sass của TB

Đối với Bootstrap (ít nhất là phiên bản 3.1.1) và LESS, bạn có thể sử dụng điều này:

.btn-my-custom {
    .button-variant(@color; @background; @border)
}

Điều này được xác định trong bootstrap/less/buttons.less.

Bạn có thể thay đổi màu nền và sử dụng! Important;

.btn-primary {
  background-color: #003c79 !important;
  border-color: #15548b !important;
  color: #fff;
}

.btn-primary:hover {
  background-color: #4289c6 !important;
  border-color: #3877ae !important;
  color: #fff;
}

.btn-primary.focus, .btn-primary:focus {
   background-color: #4289c6 !important;
   border-color: #3877ae !important;
   color: #fff;
}