Bootstrap CSS stillerini nasıl geçersiz kılabilirim?

234

bootstrap.cssWeb siteme uyacak şekilde değiştirmem gerekiyor . Doğrudan custom.cssdeğiştirmek yerine ayrı bir dosya oluşturmak daha iyi hissediyorum, bunun bir güncelleme bootstrap.cssalması gereken bir neden bootstrap.css, tüm değişikliklerimi yeniden dahil etmeye çalışıyorum. Bu stiller için biraz yükleme süresi feda edeceğim, ancak geçersiz kıldığım birkaç stil için önemsiz.

Hw Ben geçersiz yok bootstrap.cssben o kadar kaldırın Bir çapa / sınıfın tarzı? Örneğin, için tüm stil kurallarını kaldırmak istiyorsanız legend:

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

Tüm bunları silebilirim bootstrap.css, ancak CSS'yi geçersiz kılma konusundaki en iyi uygulamalar hakkındaki anlayışım doğruysa bunun yerine ne yapmalıyım?

Açık olmak gerekirse, tüm bu efsane stillerini kaldırmak ve ebeveynin CSS değerlerini kullanmak istiyorum. Pranav'ın cevabını birleştirerek aşağıdakileri yapacağım mı?

legend {
  display: inherit !important;
  width: inherit !important;
  padding: inherit !important;
  margin-bottom: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  border: inherit !important;
  border-bottom: inherit !important;
}

(Aşağıdaki gibi bir şey yapmanın bir yolu olduğunu umuyordum :)

legend {
  clear: all;
}

html css twitter-bootstrap

— Alex
kaynak

491

!importantGelecekte kendi stillerinizi geçersiz kılmak isteyeceğiniz için kullanmak iyi bir seçenek değildir. Bu da bizi CSS önceliklerine bırakıyor.

Temel olarak, her seçicinin kendi sayısal 'ağırlığı' vardır:

Kimlikler için 100 puan
Sınıflar ve sözde sınıflar için 10 puan
Etiket seçiciler ve sözde elemanlar için 1 puan
Not: Eleman otomatik olarak kazanan satır içi stile sahipse (1000 puan)

İki seçici stil arasında tarayıcı her zaman daha fazla ağırlık seçer. Stil sayfalarınızın sırası yalnızca öncelikler eşit olduğunda önemlidir - bu nedenle Bootstrap'i geçersiz kılmak kolay değildir.

Seçenekleriniz Bootstrap kaynaklarını incelemek, belirli bir stilin tam olarak nasıl tanımlandığını bulmak ve öğenizi eşit önceliğe sahip olacak şekilde bu seçiciyi kopyalamaktır. Ama süreçteki tüm Bootstrap tatlılığını kaybediyoruz.

Bunun üstesinden gelmenin en kolay yolu, sayfanızdaki kök öğelerden birine aşağıdakiler gibi ek rastgele kimlik atamaktır: <body id="bootstrap-overrides">

Bu şekilde, öğeye anında 100 puan ağırlık ekleyerek ve Bootstrap tanımlarını geçersiz kılarak herhangi bir CSS seçicisine kimliğinizi önceden ekleyebilirsiniz:

/* Example selector defined in Bootstrap */
.jumbotron h1 { /* 10+1=11 priority scores */
  line-height: 1;
  color: inherit;
}

/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
  line-height: 1;
  color: inherit;
}

/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
  line-height: 1;
  color: inherit;
}

— smugglerFlynn
kaynak

Kimlikler yalnızca bir kez kullanılabileceğinden, neden #bootstrap-overridesbir sınıf yapmıyorsunuz ?

— chharvey

2

@chharvey: çünkü daha iyi hesaplamak zorunda kalacaksınız. bu örnekte bir sınıf olsaydı, prio 11 olurdu ve css tanımı bootstrap.css'den sonra olsaydı, gitmek iyi olurdu. Ancak bu oldukça yakın olurdu ve prio büyük zamanını artıran bir id olarak ayarlamak, prio hesaplamak ve her zaman doğru olup olmadığımızı test etmek için endişelenmemiz gerekmiyor. varsayılanın üzerine kesinlikle yazmak istiyorsanız bir kimlikle daha kolay.

— hogan

sadece günümü yaptım. Ben bunu biliyorum ve hala stilleri neden yorumlanmadı anlamaya çalışırken sıkışıp.

— hogan

3

Bahsettiğiniz noktalar (id'ler için 100, sınıflar / sözde sınıflar için 10, etiket seçiciler / sözde öğeler için 1) tam anlamıyla mı yoksa bu değerleri bu örnek için mi oluşturdunuz?

— Kyle Vassella

2

Açıklamanız iyi, css için yeni birine açıklamanın bir yolu olarak mantıklı, ancak yanıltıcı. Bahsettiğiniz şey için doğru isim specificity, her bir css seçicisinin "ağırlığını" tanımlayan css'dir. İşte bununla ilgili daha fazla ayrıntı: css-tricks.com/specifics-on-css-specificity/…

— Adriano

85

HTML'nizin baş bölümünde custom.css dosyanızı bootstrap.css altına yerleştirin.

<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

Ardından custom.css dosyasında, geçersiz kılmak istediğiniz öğe için aynı seçiciyi kullanmanız gerekir. Bu durumda, custom.css dosyasında legendkalır legend, çünkü bootstrap'in daha spesifik seçicileri yoktur.

legend {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: normal;
  color: #000000;
  border: 0;
  border-bottom: none;
}

Ancak, h1örneğin, aşağıdaki gibi daha spesifik seçicilere dikkat etmeniz gerekir, .jumbotron h1çünkü

h1 {
  line-height: 2;
  color: #f00;
}

geçersiz kılmayacak

.jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}

Burada, hangi stil kurallarının bir öğeye uygulanacağını tam olarak bilmeniz gereken css seçicilerinin özgüllüğünün yararlı bir açıklaması bulunmaktadır. http://css-tricks.com/specifics-on-css-specificity/

Diğer her şey stilleri kopyalama / yapıştırma ve düzenleme meselesidir.

— Markus Kottländer
kaynak

28

Temel stil sayfasının bölümlerini geçersiz kıldığınız için yükleme süresini fazla etkilememelidir.

Kişisel olarak takip ettiğim bazı en iyi uygulamalar şunlardır:

Her zaman temel CSS dosyasından sonra özel CSS yükleyin (yanıt vermiyor).
Kullanmaktan kaçın !importantMümkünse . Bu, temel CSS dosyalarından bazı önemli stilleri geçersiz kılabilir.
Medya sorgularını kaybetmek istemiyorsanız, custom.css öğesinden sonra her zaman bootstrap-Responsive.css dosyasını yükleyin. - TAKİP ETMELİ
Gerekli özellikleri değiştirmeyi tercih edin (hepsi değil).

— Rahul Patil
kaynak

10

çünkü bootstrap-responsive.cssartık yok, bu hala geçerli durmak yok, ya bu artık ilgili?

— Shaun Wilson

20

Custom.css dosyanızı bootstrap.css altındaki son giriş olarak bağlayın. Custom.css stil tanımları bootstrap.css'yi geçersiz kılar

Html

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

Custom.css içindeki tüm efsane stil tanımlarını kopyalayın ve değişiklikler yapın (kenar boşluğu-alt: 5px; - Bu kenar boşluğu-alt: 20 piksel;

— Paramasivan
kaynak

Evet, zaten yaptım. Üzgünüm sorum açık değildi. Sorum, bootstrap.min.css dosyasındaki stilleri geçersiz kılmak için custom.css içinde ne yapılacağını sormaktı.

— Alex

Ayrıca bootstrap-theme.min.css dosyasını kullanıyorsam ne olur?

— Quasaur

Min css ile bile benim için çalıştı

— mimi

5

legendBootstrap'ta tanımlanan stilleri sıfırlamak için css dosyanızda aşağıdakileri yapabilirsiniz:

legend {
  all: unset;
}

Ref: https://css-tricks.com/almanac/properties/a/all/

CSS'deki tüm özellik, metin yönünü kontrol eden yön ve unicode-bidi özellikleri hariç, seçilen öğenin tüm özelliklerini sıfırlar.

Olası değerler şunlardır: initial, inherit& unset.

Yan not: clearözellik float( https://css-tricks.com/almanac/properties/c/clear/ ) ile ilişkili olarak kullanılır

— Vivek Athalye
kaynak

3

Oldukça büyük değişiklikler yapmayı planlıyorsanız, bunları doğrudan önyüklemenin kendisinde yapmak ve yeniden oluşturmak iyi bir fikir olabilir. Ardından, yüklenen veri miktarını azaltabilirsiniz.

Derleme kılavuzu için lütfen GitHub'daki Bootstrap'a bakın .

— Victor Häggqvist
kaynak

Gerekli özelleştirmenin boyutuna bağlı olarak, bu en basit seçenek olabilir. Örneğin, herhangi bir tema rengini değiştirmek, şablon değişikliği ve özel derleme tercih etmeyi çok fazla geçersiz kılmayı gerektirir.

— David Kirkland

@alex Kaynakları çarp ve yeniden oluştur?

— Victor Häggqvist

3

Bkz. Https://bootstrap.themes.guide/how-to-customize-bootstrap.html

Basit CSS Geçersiz Kılmaları için, bootstrap.css altına custom.css ekleyebilirsiniz.

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

Daha kapsamlı değişiklikler için SASS önerilen yöntemdir.

kendi custom.scss'nizi oluşturun
custom.scss dosyasındaki değişikliklerden sonra Bootstrap'i içe aktarma

Örneğin, gövde arka plan rengini açık gri #eeeeee olarak değiştirelim ve mavi birincil bağlam rengini Bootstrap'ın $ mor değişkenine değiştirelim ...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* or, use an existing variable */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

— konyak
kaynak

2

Biraz geç ama yaptığım şey, kök için bir sınıf ekledikten divsonra özel stil sayfamdaki her bootstrap öğesini genişletir:

.overrides .list-group-item {
    border-radius: 0px;
}
.overrides .some-elements-from-bootstrap { 
    /* styles here */
}

<div class="container-fluid overrides">
    <div class="row">
        <div class="col-sm-4" style="background-color: red">
            <ul class="list-group">
                <li class="list-group-item"><a href="#">Hey</a></li>
                <li class="list-group-item"><a href="#">I was doing</a></li>
                <li class="list-group-item"><a href="#">Just fine</a></li>
                <li class="list-group-item"><a href="#">Until I met you</a></li>
                <li class="list-group-item"><a href="#">I drink too much</a></li>
                <li class="list-group-item"><a href="#">And that's an issue</a></li>
                <li class="list-group-item"><a href="#">But I'm okay</a></li>
            </ul>
        </div>
        <div class="col-sm-8" style="background-color: blue">
            right
        </div>
    </div>
</div>

— mR5
kaynak

-1

Konsoldaki hedef düğmesini inceleyin.
Öğeler sekmesine gidin ve imleci kodun üzerine getirin ve bootstrap tarafından kullanılan varsayılan kimliği veya sınıfı bulduğunuzdan emin olun.
İşlevi çağırarak stil / metnin üzerine yazmak için jQuery / javascript komutunu kullanın.

Bu örneğe bakın:

  $(document).ready(function(){
      $(".dropdown-toggle").css({ 
        "color": "#212529",
        "background-color": "#ffc107",
        "border-color": "#ffc107"
       });
      $(".multiselect-selected-text").text('Select Tags');
  });

— Anand Chaudhary
kaynak

-1

Kendi CSS'nizi geride bıraktığınızı (bootstrap 4) öğrendim bootstrap.css ve .js en iyi çözüm .

Değiştirmek istediğiniz öğeyi bulun (öğeyi inceleyin) ve aynı beyanı kullanın, ardından geçersiz kılınacaktır.

Bunu çözmem biraz zaman aldı.

— Henry
kaynak

-3

Efsaneye kimlik verin ve css uygulayın. Legend () için id merhaba ekle gibi css follw gibidir:

#legend  legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

— Amar Gaur
kaynak

-9

Css yerine jquery css kullanın. . . jquery bootstrap css önceliğe sahip ...

Örneğin

$(document).ready(function(){
        $(".mnu").css({"color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline"});    


);

 instead of

.mnu
{

font-family:myfnt;
font-size:20px;
color:#006699;

}

— Ajeet Sankhwal
kaynak

6

HTML, yapı sağlamak için kullanılmalı, CSS stil sağlamak için kullanılmalı ve Javascript (jQuery dahil) yalnızca etkileşim sağlamak için kullanılmalıdır. Stilleri geçersiz kılmak için jQuery kullanmak iyi mimari ilkelerinin tersidir ve 6 ay sonra kod üzerinde çalışmaya çalışan herkes için son derece kafa karıştırıcı olacaktır.

— Stephen R. Smith