Üstbilgi önyükleme düzeninin üstbilgisini arka plan rengini değiştirme

Question

Aşağıdaki css kodunu kullanarak twitter önyükleyicisinin modal üstbilgisinin arka plan rengini değiştirmeye çalışıyorum.

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

Ancak bu kod, kalıcı başlık köşesini köşeli hale getirir. Yukarıdaki kod köşelerini kullanmadan önce yuvarlak şekildeydi. Yukarıdaki arka plan rengiyle modal başlıkların yuvarlak şekilli köşesini nasıl alabilirim? Teşekkür

Answer 1

Aşağıdaki css'yi kullanarak bootstrap css'yi geçersiz kılmak için bunu özel css'inize ekleyebilirsiniz.

.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

önyükleme sınıfı geçersiz kılmak üzere css dosyasına bu sınıfı ekle .modal-header

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

Bu yapılan değişiklikleri gevşek repo güncellemek edebilmek amacıyla, Önyükleme CSS düzenleme ve olmayan hiç önemli denemeydi veya vadeli satışlarda bir şeyleri kırın.

Answer 3

köşeler Yani bunun deneyebilirsiniz .modal-content

hakikaten:

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

üstbilgi veya altbilgi rengini değiştirirseniz

, yuvarlatılmış köşeler üzerinde çekilecektir.

Answer 4

Modal başlıkların rengini nasıl değiştirebileceğimi merak ettim.

Sorunun çözümünde, Bootstrap vizyonunun nasıl yorumlandığım yolunu takip etmeye çalıştım. Kalıcı iletişim kutusunun ne yaptığını söylemek için işaretçi sınıfları ekledim.

modal-başarı, modal-info, modal uyarı ve modal-hata yaptıklarını söyler ve aniden bazı değiştirirseniz her durumda kullanamayan bir renk alarak değil kapanı kendini yapmak bootstrap içindeki modal sınıfların Elbette kendi temanızı yaparsanız, onları değiştirmelisiniz.

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

benim çözümde Aslında sadece bootstrap içinde alert-success gelen stil kopyalanıp yuvarlatılmış köşeler tutmak için border-radius ekledi.

A plunk demonstration of my solution to this problem

Answer 5

Yani, bu yolu denediklerini ancak bir ÇOK hafif tahriş edici oldu ve FF ve Chrome'da, modal içerikli sınır yarıçapı tutarsak olmasıydı, hafif bir bit var modal-header border radius üzerinde 5px kullanıyor olsanız bile, sınır boyunca gösterilen beyaz trim. (standart modal içerikli sınır yarıçapı 6px, yani modal-başlık kenar üstündeki 5px biraz beyazı kaplar).

Çözümümün:

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

!! UYARI !!

Daha sonra, modal başlık, modal-content ve modal footer'ın arka plan renklerini ayarlamanız gerekir.

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

<div class="modal-body bgColorWhite"> 

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

Edit

Veya daha iyi: o bunu yapmak için izin verir, çünkü bu, kötü değiş tokuş değil

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

Answer 6

ı gerekli tüm idi:

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

Rengiiçinde tutmak için

Answer 7

Partiye biraz geç ama burada başka bir çözüm var.

Basitçe alert-danger gibi bir şeye modal sınıfını ayarlama çalışır, ancak modal üst yuvarlatılmış köşeler kaldırır.

bir çözüm modal-header ile panel-heading ek sınıfı, örneğin, elemanı vermektir , Gibi bir şey yapabilirsiniz başlığı rengini değiştirmek için

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