Jak mogę przesłonić style Bootstrap CSS?

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

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

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.

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ę:

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

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

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/ )

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 .

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

1. 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">

2. 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";

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>

1. Sprawdź przycisk celu na konsoli.
2. 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.
3. 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');
  });

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ć.

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

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;

}