önyükleme düğmesinin üzerine vurgulu

Question

Böyle bir btn-group kullanıyorum zaman CSS değiştirmeyin: Benim kullanıcıların sola düğmesine tıkla yapabiliyor düşünmek istemiyoruz http://jsfiddle.net/dy9uH/34/

ama nasıl sevmiyorum düğmesi, disabled sınıfını eklediğimde görünüyor. Bir kullanıcı sol düğmeyi basılı tuttuğunda hiçbir şey olmayınca nasıl emin olabilirim? Bootstrap.css dosyasını düzenlememeyi tercih ederim çünkü her zamanki gibi çalışmam gereken .btn-group sınıfını kullanan başka düğmelerim var.

Answer 1

Tek çözüm, önyükleme stillerini özel değişikliklerle aşmaktır.

1. btn eski bir özel sınıf ekleyin:
2. sayfanıza özel dosyası dahil özel css dosyasında aşağıdaki gibi special
3. geçersiz kılma tarzı tanımlayın

Css:

.btn.special { 
    background-color: #F5F5F5; 
    color: #333333; 
    background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6); 
    text-decoration: none; 
    background-position: 0; 
    transition: none; 
} 

Demo: Fiddle

Answer 2

Bu özel düğmeye bir sınıf ekleyebilir, böylece başkalarıyla çakışma yapamaz ve devre dışı bırakılmış sınıfı yeniden yazabilirsiniz, bu en kolay yoldur.

Answer 3

Engellemeyi kullanmak istediğinizi farz edelim, böylece düğme gerçekten devre dışı bırakıldı. Ben disabled seçiciler CSS aşağıdaki

HTML

<div class="btn-group"> 
    <button class="btn special" disabled>I'm Special</button> 
    <button class="btn dropdown-toggle" data-toggle="dropdown"> 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
    <!-- dropdown menu links --> 
    </ul> 
</div> 

.special, 
.special.disabled, 
.special[disabled] 
.special.disabled:hover, 
.special[disabled]:hover, 
.special.disabled:focus, 
.special[disabled]:focus { 
    display: inline-block; 
    *display: inline; 
    padding: 4px 12px; 
    margin-bottom: 0; 
    *margin-left: .3em; 
    font-size: 14px; 
    line-height: 20px; 
    color: #333333; 
    text-align: center; 
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 
    vertical-align: middle; 
    cursor: pointer; 
    background-color: #f5f5f5; 
    *background-color: #e6e6e6; 
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6) !important; 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)) !important; 
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6) !important; 
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6) !important; 
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6) !important; 
    background-repeat: repeat-x !important; 
    opacity: 1 !important; 
    filter: alpha(opacity=100) !important; 
    background-position: 0 0; 
    -webkit-transition:none; 
    -moz-transition:none; 
     -o-transition: none; 
      transition: none; 
    border: 1px solid #cccccc; 
    *border: 0; 
    border-color: #e6e6e6 #e6e6e6 #bfbfbf; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    border-bottom-color: #b3b3b3; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
      border-radius: 4px; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); 
    *zoom: 1; 
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
} 

Not yapacağını bazı Bootstrap

geçersiz kılmak gerekir.

HOWEVER Bu, IE'de yalnızca kısmen desteklenmediği için hiç kimse için sürpriz olmamalıdır!

Fiddle