Làm thế nào để bạn thay đổi màu của CSS Bootstrap của Twitter?

Question

Tôi đã không sử dụng ít hơn trước ngày hôm nay.

Tôi đã thay đổi màu sắc trong preboot.less tới:

// Color Scheme 
@baseColor:   @orange;     // Set a base color 

sau đó tôi tuân thủ các tập tin ít hơn. Tất cả đều xuất hiện, nhưng mọi thứ vẫn xanh.

Vì vậy, tôi đã thử tuyến đường js.less. Vẫn xanh.

Answer 1

Bạn đã đặt biến @orange đến một màu sắc, như thế này

@orange: #FF2400;

Answer 2

Nếu bạn đang sử dụng phiên bản 2.0 WIP, đây là thỏa thuận này.

lớp .primary sử dụng các biến @blue và @blueDark để tạo độ dốc của nút. Các biến này được đặt trong tệp variables.less.

Trong tệp buttons.less, các lớp nút khác được mã hóa cứng với giá trị hex.

// Danger and error appear as red 
    &.danger { 
    .gradientBar(#ee5f5b, #c43c35); 
    } 
    // Success appears as green 
    &.success { 
    .gradientBar(#62c462, #57a957); 
    } 
    // Info appears as a neutral blue 
    &.info { 
    .gradientBar(#5bc0de, #339bb9); 
    } 

Bạn phải thay đổi các giá trị hex đó hoặc tạo biến mà bạn thay thế giá trị hex bằng. Tôi mới sử dụng bootstrap từ twitter bản thân mình, nhưng điều này dường như là tình hình.

Answer 3

Bạn có thể tìm thấy Bootstrap Generator hữu ích - nó cho phép bạn chọn màu sắc vv và tạo tệp CSS Boostrap được biên dịch cho bạn.

Answer 4

Đây là trình tạo chủ đề khởi động hoạt động từ ảnh .... Vì vậy, bạn có thể chụp ảnh trang web "cũ", tải lên ở đây và tạo chủ đề phù hợp với bảng màu cũ của bạn!

Lưu ý: Trang web này dường như ngoại tuyến vào lúc này. Nếu bạn vẫn muốn tính năng này, you can install the site from it's Github repo và thử tính năng này từ đó.

http://www.lavishbootstrap.com/

và tất nhiên Bootstrap tự cho phép bạn tùy chỉnh màu sắc khi bạn tải về nó bây giờ, nhưng có liên quan đến rất nhiều cắt và dán các tông màu .... Công cụ này trên số liệu nó tất cả ra cho bạn ...

http://getbootstrap.com/customize/

Answer 5

này một cho # 01a4d9 màu btn

.btn { 
    border-color:#c5c5c5; 
    border-color:rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25); 
} 

.btn-primary { 
    color:#ffffff; 
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25); 
    background-color:#007cc5; 
    background-image:-moz-linear-gradient(top, #01a4d9, #0193c5); 
    background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#01a4d9), to(#0193c5)); 
    background-image:-webkit-linear-gradient(top, #01a4d9, #0193c5); 
    background-image:-o-linear-gradient(top, #01a4d9, #0193c5); 
    background-image:linear-gradient(to bottom, #01a4d9, #0193c5); 
    background-repeat:repeat-x; 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0096c5', endColorstr='#ff0054c5', GradientType=0); 
    border-color:#0193c5 #0193c5 #003479; 
    border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    *background-color:#0193c5;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false); 
} 

.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled] { 
    color:#ffffff; 
    background-color:#0193c5; 
    *background-color:#0049ac; 
} 

.btn-primary:active,.btn-primary.active { 
    background-color:#003f92 \9; 
} 

Answer 6

Để tùy chỉnh màu của các liên kết của bạn và .btn-primary (đó là những gì tôi nghĩ câu hỏi đã đề cập đến), hãy điều chỉnh @linkColor:

@linkColor: @orange;