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