Thay đổi màu nền tiêu đề của phương thức twitter bootstrap

Question

Tôi đang cố gắng thay đổi màu nền của tiêu đề phương thức của trình khởi động twitter bằng cách sử dụng mã css sau.

.modal-header 
{ 
    padding:9px 15px; 
    border-bottom:1px solid #eee; 
    background-color: #0480be; 
} 
.modal-header .close{margin-top:2px} 
.modal-header h3{margin:0;line-height:30px} 

Nhưng mã này làm góc của góc tiêu đề phương thức. Trước khi sử dụng các góc mã trên thì hình tròn. Làm thế nào tôi có thể nhận được góc hình tròn của tiêu đề phương thức với màu nền trên? Cảm ơn

Answer 1

Bạn có thể sử dụng css bên dưới, đặt điều này trong css tùy chỉnh của bạn để ghi đè css bootstrap.

.modal-header { 
    padding:9px 15px; 
    border-bottom:1px solid #eee; 
    background-color: #0480be; 
    -webkit-border-top-left-radius: 5px; 
    -webkit-border-top-right-radius: 5px; 
    -moz-border-radius-topleft: 5px; 
    -moz-border-radius-topright: 5px; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
} 

Answer 2

Thêm lớp này đến file css của bạn để ghi đè lên lớp bootstrap .modal-header

.modal-header { 
    background:#0480be; 
} 

Điều quan trọng là cố gắng để không bao giờ sửa Bootstrap CSS, để có thể cập nhật từ repo và không mất các thay đổi được thực hoặc phá vỡ một cái gì đó trong bản phát hành tương lai.

Answer 3

Các góc đang thực sự trong .modal-content

Vì vậy, bạn có thể thử điều này:

.modal-content { 
    background-color: #0480be; 
} 
.modal-body { 
    background-color: #fff; 
} 

Nếu bạn thay đổi màu sắc của header hoặc footer, các góc được làm tròn sẽ được vẽ trên.

Answer 4

Bản thân tôi tự hỏi làm thế nào tôi có thể thay đổi màu của tiêu đề phương thức.

Trong giải pháp của tôi cho vấn đề tôi đã cố gắng làm theo trong con đường của cách giải thích của tôi về tầm nhìn Bootstrap là. Tôi đã thêm các lớp đánh dấu để cho biết hộp thoại phương thức làm gì.

modal-success, modal-info, phương thức cảnh báo và phương thức-lỗi cho biết những gì họ làm và bạn không tự bẫy mình bằng đột ngột có màu mà bạn không thể sử dụng trong mọi tình huống của các lớp phương thức trong bootstrap. Tất nhiên nếu bạn tạo chủ đề của riêng bạn, bạn nên thay đổi chúng.

.modal-success { 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dff0d8), to(#c8e5bc)); 
    background-image: -webkit-linear-gradient(#dff0d8 0%, #c8e5bc 100%); 
    background-image: -moz-linear-gradient(#dff0d8 0%, #c8e5bc 100%); 
    background-image: -o-linear-gradient(#dff0d8 0%, #c8e5bc 100%); 
    background-image: linear-gradient(#dff0d8 0%, #c8e5bc 100%); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8',  endColorstr='#ffc8e5bc', GradientType=0); 
    border-color: #b2dba1; 
    border-radius: 6px 6px 0 0; 
} 

Trong giải pháp của tôi, tôi thực sự chỉ cần sao chép phong cách từ alert-success trong bootstrap và thêm border-radius để giữ góc tròn.

A plunk demonstration of my solution to this problem

Answer 5

Vì vậy, tôi đã cố gắng những cách khác, nhưng có một chút kích thích RẤT và đó là nếu bạn tiếp tục bán kính biên giới modal-content, trong FF và Chrome, có một chút nhẹ viền trắng hiển thị dọc theo đường viền, ngay cả khi bạn sử dụng 5px trên bán kính đường viền tiêu đề phương thức. (bán kính đường viền nội dung phương thức chuẩn là 6px, vì vậy 5px trên bán kính đường viền đầu trang phương thức-tiêu đề bao gồm một số màu trắng).

Giải pháp của tôi:

.modal-body 
{ 
    background-color: #FFFFFF; 
} 

.modal-content 
{ 
    border-radius: 6px; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    background-color: transparent; 
} 

.modal-footer 
{ 
    border-bottom-left-radius: 6px; 
    border-bottom-right-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    -moz-border-radius-bottomleft: 6px; 
    -moz-border-radius-bottomright: 6px; 
} 

.modal-header 
{ 
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px; 
    -webkit-border-top-left-radius: 6px; 
    -webkit-border-top-right-radius: 6px; 
    -moz-border-radius-topleft: 6px; 
    -moz-border-radius-topright: 6px; 
} 

!! CAVEAT !!

Sau đó, bạn phải đặt màu nền của tiêu đề phương thức, phương thức nội dung và phương thức chân trang.Đây không phải là xấu trade-off, bởi vì nó cho phép bạn thực hiện điều này:

<div class="modal-header bg-primary"> 

<div class="modal-body bgColorWhite"> 

<div class="modal-footer bg-info"> 

EDIT

Hoặc thậm chí tốt hơn:

<div class="modal-header alert-primary"> 

Answer 6

Tất cả tôi cần là:

.modal-header{ 
    background-color:#0f0; 
} 
.modal-content { 
    overflow:hidden; 
} 

overflow: hidden để giữ màu bên trong border-radius

Answer 7

Một chút muộn cho bữa tiệc, nhưng đây là một giải pháp khác.

Chỉ cần điều chỉnh lớp của phương thức thành một cái gì đó như alert-danger không hoạt động, tuy nhiên, nó sẽ loại bỏ các góc được làm tròn trên cùng của phương thức.

Giải pháp thay thế là cung cấp cho phần tử có modal-header một lớp bổ sung là panel-heading, ví dụ:

<div class="modal fade" tabindex="-1" role="dialog"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header panel-heading"> <!-- change here --> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <p>One fine body&hellip;</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

Sau đó, để thay đổi màu sắc tiêu đề bạn có thể làm điều gì đó tương tự (giả sử bạn đang sử dụng jQuery)

jQuery('.modal-content').addClass('panel-danger')