Jak mogę przesłonić style Bootstrap CSS?

234

Muszę zmodyfikować, bootstrap.cssaby pasowała do mojej witryny. Wydaje mi się, że lepiej jest utworzyć osobny custom.cssplik zamiast modyfikować bootstrap.cssbezpośrednio. Jednym z powodów jest to, że powinienem bootstrap.cssotrzymać aktualizację. Będę cierpieć z powodu próby ponownego włączenia wszystkich moich modyfikacji. Poświęcę trochę czasu ładowania dla tych stylów, ale jest to nieistotne dla kilku stylów, które zastępuję.

Jak mogę przesłonić, bootstrap.cssaby usunąć styl kotwicy / klasy? Na przykład, jeśli chcę usunąć wszystkie reguły stylizacji dla 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;
}

Mogę po prostu usunąć to wszystko bootstrap.css, ale jeśli moje zrozumienie najlepszych praktyk w zakresie zastępowania CSS jest poprawne, co powinienem zrobić?

Dla jasności chcę usunąć wszystkie style legend i użyć wartości CSS rodzica. Czy łącząc odpowiedź Pranav, czy będę robił następujące rzeczy?

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

(Miałem nadzieję, że jest sposób na zrobienie czegoś takiego :)

legend {
  clear: all;
}

html css twitter-bootstrap Alex
źródło

491

Używanie !importantnie jest dobrą opcją, ponieważ najprawdopodobniej będziesz chciał zastąpić własne style w przyszłości. To pozostawia nam priorytety CSS.

Zasadniczo każdy selektor ma swoją własną „wagę” numeryczną:

100 punktów za dokumenty tożsamości
10 punktów za zajęcia i pseudoklasy
1 punkt za selektory znaczników i pseudoelementy
Uwaga: Jeśli element ma wbudowany styl, który automatycznie wygrywa (1000 punktów)

Spośród dwóch stylów wyboru przeglądarka zawsze wybierze ten o większej wadze. Kolejność arkuszy stylów ma znaczenie tylko wtedy, gdy priorytety są równe - dlatego nie jest łatwo ominąć Bootstrap.

Możesz sprawdzić źródła Bootstrap, dowiedzieć się, jak dokładnie zdefiniowano określony styl, i skopiować ten selektor, aby Twój element miał taki sam priorytet. Ale w ten sposób tracimy trochę słodyczy Bootstrap.

Najłatwiejszym sposobem na rozwiązanie tego problemu jest przypisanie dodatkowego dowolnego identyfikatora do jednego z głównych elementów na stronie, na przykład: <body id="bootstrap-overrides">

W ten sposób możesz po prostu poprzedzić dowolny selektor CSS swoim identyfikatorem, natychmiast dodając 100 punktów wagi do elementu i zastępując definicje Bootstrap:

/* 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;
}

przemytnik Flynn
źródło

skoro identyfikatory mogą być użyte tylko raz, dlaczego nie stworzyć #bootstrap-overridesklasy?

chharvey

2

@chharvey: ponieważ musiałbyś lepiej obliczyć. jeśli byłaby to klasa w tym przykładzie, byłaby to prio 11, a jeśli definicja css byłaby po bootstrap.css, to dobrze byłoby zacząć. Byłoby to jednak dość bliskie i ustawiając go jako identyfikator, który zwiększa prio w wielkim czasie, nie musimy martwić się obliczaniem prio i testowaniem tak mocno, czy zawsze mamy rację. łatwiej z identyfikatorem, jeśli chcesz definitywnie zastąpić wartość domyślną.

hogan

właśnie stworzyłem mój dzień. wiem o tym i wciąż utknąłem próbując dowiedzieć się, dlaczego moje style nie są interpretowane.

hogan

3

Czy wymienione przez Ciebie punkty (100 dla identyfikatorów, 10 dla klas / pseudo klas, 1 dla selektorów znaczników / pseudoelementów) są dosłowne, czy po prostu wymyśliłeś te wartości dla tego przykładu?

Kyle Vassella,

2

Twoje wyjaśnienie jest dobre, ma sens jako sposób na wyjaśnienie tego komuś nowemu w css, ale wprowadza w błąd. Prawidłowa nazwa tego, co wspomniałeś, to css, specificityktóry określa „wagę” każdego selektora css. Oto kilka szczegółów na ten temat: css-tricks.com/specifics-on-css-specificity/…

Adriano

85

W sekcji nagłówka html umieść custom.css poniżej bootstrap.css.

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

Następnie w custom.css musisz użyć dokładnie tego samego selektora dla elementu, który chcesz przesłonić. W takim przypadku legendpozostaje tylko legendw pliku custom.css, ponieważ bootstrap nie ma bardziej szczegółowych selektorów.

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

Ale h1na przykład musisz zadbać o bardziej szczegółowe selektory, takie jak .jumbotron h1ponieważ

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

nie zastąpi

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

Oto pomocne wyjaśnienie specyficzności selektorów css, które musisz zrozumieć, aby dokładnie wiedzieć, które reguły stylu będą miały zastosowanie do elementu. http://css-tricks.com/specifics-on-css-specificity/

Cała reszta to tylko kwestia kopiowania / wklejania i edycji stylów.

Markus Kottländer
źródło

28

Nie powinno to znacząco wpływać na czas ładowania, ponieważ zastępujesz części podstawowego arkusza stylów.

Oto kilka najlepszych praktyk, które osobiście stosuję:

Zawsze ładuj niestandardowy CSS po podstawowym pliku CSS (nie reaguje).
!importantJeśli to możliwe, unikaj używania . Może to zastąpić niektóre ważne style z podstawowych plików CSS.
Zawsze ładuj bootstrap-responsive.css po custom.css, jeśli nie chcesz stracić zapytań o media. - MUSI PODĄŻAĆ
Wolę modyfikować wymagane właściwości (nie wszystkie).

Rahul Patil
źródło

10

skoro bootstrap-responsive.cssjuż nie istnieje, czy nadal jest to prawdą, czy też nie jest to już istotne?

Shaun Wilson

20

Połącz plik custom.css jako ostatni wpis poniżej pliku bootstrap.css. Definicje stylu Custom.css zastąpią bootstrap.css

HTML

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

Skopiuj wszystkie definicje stylu legendy do custom.css i dokonaj w nim zmian (np. Margines-dół: 5px; - To spowoduje przekroczenie marginesu-dół: 20px;)

Paramasivan
źródło

Tak, już to zrobiłem. Przepraszam, moje pytanie nie było jasne. Moje pytanie dotyczyło tego, co zrobić w custom.css, aby zastąpić style z bootstrap.min.css.

Alex

Co jeśli używam również bootstrap-theme.min.css?

Quasaur,

Pracował dla mnie, nawet z min css

mimi

5

Aby zresetować style zdefiniowane dla legendbootstrap, możesz wykonać następujące czynności w pliku css:

legend {
  all: unset;
}

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

Wszystkie właściwości w CSS resetują wszystkie właściwości wybranego elementu, z wyjątkiem właściwości direction i unicode-bidi, które kontrolują kierunek tekstu.

Możliwe wartości to: initial, inherit&unset .

Uwaga dodatkowa: clearwłaściwość jest używana w związku z float( https://css-tricks.com/almanac/properties/c/clear/ )

Vivek Athalye
źródło

3

Jeśli planujesz wprowadzić dość duże zmiany, dobrym pomysłem może być wykonanie ich bezpośrednio w samym bootstrapie i przebudowanie. Następnie możesz zmniejszyć ilość ładowanych danych.

Przewodnik po kompilacji można znaleźć w Bootstrap na GitHub .

Victor Häggqvist
źródło

W zależności od zakresu wymaganego dostosowania może to być najprostsza opcja. Na przykład zmiana dowolnych kolorów motywu wymagałaby tylu przesłonięć, że wolałbym zmienić szablon i niestandardową kompilację.

David Kirkland

@alex Bump źródła i odbudować?

Victor Häggqvist

3

Zobacz https://bootstrap.themes.guide/how-to-customize-bootstrap.html

W przypadku prostych przesłonięć CSS możesz dodać plik custom.css poniżej pliku bootstrap.css

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

W przypadku bardziej szczegółowych zmian zalecaną metodą jest SASS.

stwórz swój własny custom.scss
zaimportuj Bootstrap po zmianach w pliku custom.scss

Na przykład zmieńmy kolor tła ciała na jasnoszary #eeeeee i zmień niebieski podstawowy kolor kontekstowy na zmienną $ fioletowy Bootstrap ...

/* 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
źródło

2

Trochę za późno, ale dodałem klasę do katalogu głównego, diva następnie rozszerzyłem wszystkie elementy bootstrap w moim niestandardowym arkuszu stylów:

.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
źródło

-1

Sprawdź przycisk celu na konsoli.
Przejdź do karty elementów, a następnie najedź myszką na kod i upewnij się, że znajduje się domyślny identyfikator lub klasa używana przez bootstrap.
Użyj jQuery / javascript, aby zastąpić styl / tekst przez wywołanie funkcji.

Zobacz ten przykład:

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

Anand Chaudhary
źródło

-1

Dowiedziałem się, że (bootstrap 4) pozostawia swój własny CSS bootstrap.css i .js jest najlepszym rozwiązaniem.

Znajdź element, który chcesz zmienić (sprawdź element) i użyj dokładnie tej samej deklaracji, a następnie zastąpi.

Zajęło mi to trochę czasu, aby to zrozumieć.

Henz
źródło

-3

Podaj identyfikator legendzie i zastosuj css. Jak dodać id hello do legend (), css jest następujący:

#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
źródło

-9

Użyj jquery css zamiast css. . . jquery mają priorytet niż bootstrap css ...

na przykład

$(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
źródło

6

HTML powinien być używany do zapewniania struktury, CSS powinien być używany do zapewniania stylu, a JavaScript (w tym jQuery) powinien być używany tylko do zapewniania interaktywności. Używanie jQuery do nadpisywania stylów jest sprzeczne z zasadami dobrej architektury i będzie bardzo mylące dla każdego, kto będzie próbował pracować nad kodem za 6 miesięcy.

Stephen R. Smith

Jak mogę przesłonić style Bootstrap CSS?

Odpowiedzi: