Twitter önyükleme düğmelerini şekillendirme

Twitter Bootstrap düğmeleri inanılmaz derecede güzel. Üzerlerine gelerek deneyin

Ancak renkleri sınırlıdır.

Bootstrap'in bu kadar güzel ve zahmetsiz hale getirdiği güzel gezinme efektini korurken, düğmenin temel rengini değiştirebilmemin bir yolu var mı?

Twitter'ın bu etkileri sürdürmek için kullandığı css / javascript'in neye benzediğinden tamamen habersizim.

Temel olarak, Twitter Bootstrap'taki düğmeler CSS'de ".btn {}" tarafından kontrol edilir. Yapmanız gereken, CSS dosyasına gidip "btn" yazan yeri bulmak ve renk ayarlarını değiştirmek. Ancak, düğmeyi vurguladığınızda düğmenin hangi renge dönüşeceğini değiştirmek zorunda olduğunuzdan, bunu yapmak kadar basit değildir. BUNU yapmak için, CSS'de ".btn: hover {} ", vb.

Bunun değiştirilmesi, CSS'nin değiştirilmesini gerektirir. İşte o dosyaya hızlı bir bağlantı:

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

En basit yolun bunu sizin geçersiz kılmalarınıza eklemek olduğunu buldum. Yaratıcı olmayan renk seçimim için özür dilerim

Önyükleme 4-Alpha SASS

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

Bootstrap 4 Alpha SASS Örneği

Bootstrap 3 DAHA AZ

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

Bootstrap 3 LESS Örneği

Önyükleme 3 SASS

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

Bootstrap 3 SASS Örneği

Bootstrap 2.3 DAHA AZ

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

Bootstrap 2.3 LESS Örneği

Önyükleme 2.3 SASS

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

Sizin için vurgulu / aktifleri halledecek

Yorumlardan, siyah kullanırken koyulaştırmak yerine düğmeyi açıklaştırmak istiyorsanız (veya sadece tersine çevirmek istiyorsanız) sınıfı şu şekilde biraz daha genişletmeniz gerekir:

Önyükleme 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
  }
}

Bootstrap 3 SASS Lighten Örneği

CSS'nizdeki renklerin üzerine yazabilirsiniz, örneğin Tehlike düğmesi için:

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

İşte iyi bir kaynak: http://charliepark.org/bootstrap_buttons/

Rengi değiştirebilir ve etkisini çalışırken görebilirsiniz.

Bootstrap.css'yi (sürüm 3) yükledikten sonra kendi özel CSS dosyanızı zaten yüklüyorsanız, bu 2 CSS stilini custom.css dosyanıza ekleyebilirsiniz ve bunlar, varsayılan düğme stili için önyükleme varsayılanlarını geçersiz kılar.

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

CSS değerlerini tek tek değiştirmek yerine LESS kullanmanızı öneririm . Bootstrap'in Github'da DAHA AZ sürümü var: https://github.com/twbs/bootstrap

LESS, renkleri değiştirmek için değişkenleri tanımlamanıza izin verir ve bu da onu çok daha kullanışlı hale getirir. Rengi bir kez tanımlayın ve LESS, değerleri genel olarak değiştiren CSS dosyasını derler. Zaman ve emekten tasarruf sağlar.

Bootstrap düğme stillerini tamamen geçersiz kılmak için, bir özellikler listesini geçersiz kılmanız gerekir. Aşağıdaki örneğe bakın.

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

Listelenen tüm stilleri kullanmazsanız, düğme üzerinde eylemleri gerçekleştirirken varsayılan stilleri göreceksiniz. Örneğin, düğmeye tıkladığınızda ve fare imlecini düğmeden kaldırdığınızda, varsayılan rengin görünür olduğunu göreceksiniz. Veya düğmeyi basılı tutun, varsayılan renkleri göreceksiniz. Bu yüzden, geçersiz kılınacak tüm sözde stilleri listeledim.

Bootstrap for Sass geçersiz kılma için

.btn-default {

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

}

Kaynağını burada görebilirsiniz: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

Veya http://twitterbootstrapbuttons.w3masters.nl/ adresini deneyin . Html renk girdisine dayalı olarak düğmeler için css oluşturur. Css'yi bootstrap css'den sonra ekleyin. Üç stil düğme sağlar (açık, koyu ve döndürme).

İşte çok kolay ve etkili bir yol: Düğmenize uygulamak istediğiniz renklerle CSS'nize sınıfınızı ekleyin:

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

ve stili önyükleme düğmenize veya bağlantınıza ekleyin:

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

Gelen Heyecan Bootstrap bootstrap 3.0.0, Heyecan düğmesi düzdür. Http://getbootstrap.com/customize adresinden özelleştirebilirsiniz. . Düğme rengi, kenarlık parlaklığı vb.

Ayrıca HTML kodunu ve diğer işlevselliği http://twitterbootstrap.org/bootstrap-css-buttons bulabilirsiniz .

Bootstrap 2.3.2 düğmesi eğimli ancak 3.0.0 (yeni sürüm) düz ve daha havalı görünüyor.

ve ayrıca bu kaynaklardan tüm önyükleme görünümünü ve stilini özelleştirmek için bulabilirsiniz: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

Bunun daha eski bir konu olduğunu biliyorum, ancak başka bir bakış açısı eklemek için. Geçersiz kılmaları kullanmanın gerçekten biraz kod kokusu olduğunu ve daha büyük projelerde hızla kontrolden çıkacağını iddia ediyorum. Bugün Düğmeleri, yarın Kipleri, ertesi gün Açılır Menüyü vb. Geçersiz kılıyorsunuz.

Muhtemelen dahil etme hakkında yorum yapmayı denemenizi buttons.lessve ya kendiminkini tanımlamanızı ya da projeme daha uygun başka bir Buttons kitaplığı bulmanızı öneririm . Utanmaz eklenti: Buttons kitaplığımızı TB ile karıştırmanın ne kadar kolay olduğuna bir örnek: Twitter Bootstrap ile Buttons Kullanma . Uygulamada, yine, buttons.lessperformansı iyileştirmek için dahil et'i tamamen kaldırmak isteyebilirsiniz, ancak bu, işlerin nasıl biraz daha az "genel" görünmesini sağlayabileceğinizi gösterir. Bu alıştırmayı henüz kendim yapmadım, ancak aşağıdaki gibi satırları yorumlayarak başlayabileceğinizi hayal ediyorum:

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

Ve sonra kendi düğme modüllerinizden birini kullanarak `lessc kullanarak yeniden derleyin. Bu şekilde, savaşta test edilmiş TB çekirdeğini elde edersiniz, ancak yine de büyük geçersiz kılmalara başvurmadan işleri özelleştirebilirsiniz. Bootstrap gibi bir kitaplığın yalnızca bölümlerini kullanmamanız için kesinlikle hiçbir neden yoktur. Elbette aynısı TB'nin Sass versiyonu için de geçerlidir

Bootstrap (en azından sürüm 3.1.1 için) ve LESS için şunu kullanabilirsiniz:

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

Bu, içinde tanımlanmıştır bootstrap/less/buttons.less.

Arka plan rengini değiştirebilir ve!

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