Jak nadpisać stylizację w Twitter Bootstrap

Question 1

Jak mogę nadpisać style w Twitter Bootstrap? Na przykład obecnie używam klasy .sidebar, która ma regułę CSS „float: left;” Jak mogę to zmienić, aby zamiast tego trafiało w prawo? Używam HAML i SASS, ale jestem stosunkowo nowy w tworzeniu stron internetowych.

Question 2

Dodaj własną klasę, np .: <div class="sidebar right"></div>, z CSS jako

.sidebar.right { 
    float:right
}

Question 3

Wszystkie te wskazówki będą działać, ale prostszym sposobem może być dołączenie arkusza stylów po stylach Bootstrap.

Jeśli dołączysz swoją css ( site-specific.css) po funkcji Bootstrap ( bootstrap.css), możesz nadpisać reguły, ponownie je definiując.

Na przykład, jeśli w ten sposób dołączasz CSS do pliku <head>

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />

Możesz po prostu przesunąć pasek boczny w prawo, pisząc (w swoim site-specific.csspliku):

.sidebar {
    float: right;
}

Wybaczcie brak HAML i SASS, nie znam ich na tyle dobrze, żeby pisać w nich tutoriale.

Question 4

Odpowiedzią na to jest Specyfika CSS. Musisz być bardziej „konkretny” w swoim CSS, aby mógł przesłonić właściwości css ładowania początkowego.

Na przykład masz tutaj przykładowy kod menu ładowania początkowego:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div id="home-menu-container" class="collapse navbar-collapse">
        <ul id="home-menu" class="nav navbar-nav">
            <li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>
            <li><a href="#intro">Home</a></li>
            <li><a href="#about">About Us</a></li>
            <li><a href="#services">What We Do</a></li>
            <li><a href="#process">Our Process</a><br /></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>

Tutaj trzeba pamiętać o hierarchii specyfiki. To wygląda tak:

Daj elementowi o identyfikatorze wymienione 100 punktów
Daj elementowi z klasą wymienioną 10 punktów
Daj prostemu elementowi 1 punkt

Tak więc, dla powyższego, jeśli twój css ma coś takiego:

.navbar ul li a { color: red; } /* 10(.navbar) + 1(ul) + 1(li) + 1(a) = 13 points */
.navbar a { color: green; } /* 10(.navbar) + 1(a) = 11 points */

Tak więc, nawet jeśli zdefiniowałeś .navbar aafter .navbar ul li a, nadal będzie on zastępowany kolorem czerwonym zamiast zielonym, ponieważ specyficzność jest większa (13 punktów).

W zasadzie wszystko, co musisz zrobić, to obliczyć punkty dla elementu, dla którego chcesz zmienić css, za pomocą elementu inspect w przeglądarce. Tutaj bootstrap określił swój css dla elementu jako

.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
    color: #999;
}

Tak więc, nawet jeśli ładuje się twój css, jest ładowany po bootstrap.css, który ma następujący wiersz:

.navbar-nav li a {
    color: red;
}

nadal będzie renderowany jako # 999. Aby rozwiązać ten problem, bootstrap ma 22 punkty (obliczyć to samodzielnie). Potrzebujemy więc czegoś więcej. W związku z tym dodałem niestandardowe identyfikatory do elementów, tj. Kontener menu głównego i menu głównego. Teraz zadziała następujący css:

#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */

Gotowe.

Możesz skorzystać z tego łącza MDN .

Question 5

Możesz nadpisać klasę CSS, czyniąc ją „bardziej szczegółową”.

Wchodzisz w drzewo HTML i określasz elementy nadrzędne:

div.sidebar { ... } jest bardziej szczegółowe niż .sidebar { ... }

Możesz przejść aż do BODY, jeśli chcesz:

body .sidebar { ... } zastąpi praktycznie wszystko.

Zobacz ten przydatny przewodnik: http://css-tricks.com/855-specifics-on-css-specificity/

Question 6

Możesz po prostu upewnić się, że Twój plik css analizuje PO BOOSTRAP.css, na przykład:

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

Question 7

Jeśli chcesz nadpisać css w bootstrapie, użyj!

Powiedzmy, że tutaj jest klasa nagłówka strony w bootstrapie, która ma margines 40 pikseli na górze, mój klient nie lubi tego i chce, aby było tylko 15 na górze i 10 na dole

.page-header {
    border-bottom: 1px solid #EEEEEE;
    margin: 40px 0 20px;
    padding-bottom: 9px;
}

Więc dodałem na zajęciach w moim pliku site.css o tej samej nazwie

.page-header
{
    padding-bottom: 9px;
    margin: 15px 0 10px 0px !important;
}

Zwróć uwagę na! Important z moim marginesem, który nadpisze margines nagłówka klasy bootstarp.

Question 8

Dotarłem tak późno, ale myślę, że przydałaby się inna odpowiedź.

Jeśli używasz sass, możesz faktycznie zmienić zmienne przed zaimportowaniem bootstrap. http://twitter.github.com/bootstrap/customize.html#variables

Zmień dowolne z nich, na przykład:

$bodyBackground: red;
@import "bootstrap";

Alternatywnie, jeśli nie ma dostępnej zmiennej dla tego, co chcesz zmienić, możesz zastąpić style lub dodać własne.

Sass:

@import "bootstrap";

/* override anything manually, like rounded buttons */
.btn {
  border-radius: 0;
}

Zobacz także: Właściwa struktura zasobów SCSS w szynach

Question 9

Wiem, że to stare pytanie, ale mimo to natknąłem się na podobny problem i zdałem sobie sprawę, że mój „niedziałający” kod css w moim bootstrapOverload.csspliku został zapisany po rozszerzeniu media queries. kiedy przeniosłem go nad zapytania o media, zaczęło działać.

Na wypadek, gdyby ktoś inny miał ten sam problem

Answer 1

129

Jak mogę nadpisać style w Twitter Bootstrap? Na przykład obecnie używam klasy .sidebar, która ma regułę CSS „float: left;” Jak mogę to zmienić, aby zamiast tego trafiało w prawo? Używam HAML i SASS, ale jestem stosunkowo nowy w tworzeniu stron internetowych.

css twitter-bootstrap Jan
źródło

Zobacz także: stackoverflow.com/questions/8596794/ ...

Zim

Answer 2

Zobacz także: stackoverflow.com/questions/8596794/ ...

Zim

Answer 3

41

Dodaj własną klasę, np .: <div class="sidebar right"></div>, z CSS jako

.sidebar.right { 
    float:right
}

motoxer4533
źródło

1

Niezbyt dobra praktyka: github.com/CSSLint/csslint/wiki/Disallow-adjoining-classes

Damjan Pavlica

2

@DamjanPavlica Szczerze? Nadal dbasz o IE 6? Nie wspominając o tym, jak sądzę, bootstrap używa łańcuchów.

Błażej Michalik

Answer 4

1

Niezbyt dobra praktyka: github.com/CSSLint/csslint/wiki/Disallow-adjoining-classes

Damjan Pavlica

Answer 5

2

@DamjanPavlica Szczerze? Nadal dbasz o IE 6? Nie wspominając o tym, jak sądzę, bootstrap używa łańcuchów.

Błażej Michalik

Answer 6

233

Wszystkie te wskazówki będą działać, ale prostszym sposobem może być dołączenie arkusza stylów po stylach Bootstrap.

Jeśli dołączysz swoją css ( site-specific.css) po funkcji Bootstrap ( bootstrap.css), możesz nadpisać reguły, ponownie je definiując.

Na przykład, jeśli w ten sposób dołączasz CSS do pliku <head>

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />

Możesz po prostu przesunąć pasek boczny w prawo, pisząc (w swoim site-specific.csspliku):

.sidebar {
    float: right;
}

Wybaczcie brak HAML i SASS, nie znam ich na tyle dobrze, żeby pisać w nich tutoriale.

citelao
źródło

7

@ClaudiuConstantin Nie widzę powodu, dla którego nie. Praktyczna zasada jest taka, że drugi styl zawsze będzie dominował nad pierwszym, jeśli dwa mają ten sam poziom szczegółowości. Tak długo, jak twój styl przyjdzie po nim, będzie nadrzędny.

citelao,

3

@Kreker To prawdopodobnie ma wiele wspólnego ze specyfiką. Możesz o tym poczytać tutaj (stary artykuł), ale w zasadzie .sidebar.rightjest bardziej szczegółowy niż .sidebar. To prawdopodobnie problem. Użyj Inspektora sieci, aby dowiedzieć się, co go zastępuje.

citelao,

2

@Kreker tak, to jest idea. Problem !importantpolega na tym, że w przyszłości nie można go już nigdy zmienić.

citelao

5

Mój Site.cssjest spakowany, wymieniony Bundle.configi renderowany fizycznie po, bootstrap.css ale style nadal nie są zastępowane. Musiałem wyjąć site.cssodniesienie z pakietu modernizacji i ręcznie wstawić to po bootstrap.css(i nacisnąć Ctrl + F5 raz debugowanie, aby wyczyścić pamięć podręczną)

atconway

1

To może zadziałać, ale nie byłoby najlepszą praktyką w przypadku produkcji. Załaduj 1 arkusz stylów na witrynę, chyba że istnieje duży powód, aby tego nie robić. #sitespeed

Ben Racicot

Answer 7

7

@ClaudiuConstantin Nie widzę powodu, dla którego nie. Praktyczna zasada jest taka, że drugi styl zawsze będzie dominował nad pierwszym, jeśli dwa mają ten sam poziom szczegółowości. Tak długo, jak twój styl przyjdzie po nim, będzie nadrzędny.

citelao,

Answer 8

3

@Kreker To prawdopodobnie ma wiele wspólnego ze specyfiką. Możesz o tym poczytać tutaj (stary artykuł), ale w zasadzie .sidebar.rightjest bardziej szczegółowy niż .sidebar. To prawdopodobnie problem. Użyj Inspektora sieci, aby dowiedzieć się, co go zastępuje.

citelao,

Answer 9

2

@Kreker tak, to jest idea. Problem !importantpolega na tym, że w przyszłości nie można go już nigdy zmienić.

citelao

Answer 10

5

Mój Site.cssjest spakowany, wymieniony Bundle.configi renderowany fizycznie po, bootstrap.css ale style nadal nie są zastępowane. Musiałem wyjąć site.cssodniesienie z pakietu modernizacji i ręcznie wstawić to po bootstrap.css(i nacisnąć Ctrl + F5 raz debugowanie, aby wyczyścić pamięć podręczną)

atconway

Answer 11

1

To może zadziałać, ale nie byłoby najlepszą praktyką w przypadku produkcji. Załaduj 1 arkusz stylów na witrynę, chyba że istnieje duży powód, aby tego nie robić. #sitespeed

Ben Racicot

Answer 12

Odpowiedzią na to jest Specyfika CSS. Musisz być bardziej „konkretny” w swoim CSS, aby mógł przesłonić właściwości css ładowania początkowego.

Na przykład masz tutaj przykładowy kod menu ładowania początkowego:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div id="home-menu-container" class="collapse navbar-collapse">
        <ul id="home-menu" class="nav navbar-nav">
            <li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>
            <li><a href="#intro">Home</a></li>
            <li><a href="#about">About Us</a></li>
            <li><a href="#services">What We Do</a></li>
            <li><a href="#process">Our Process</a><br /></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>

Tutaj trzeba pamiętać o hierarchii specyfiki. To wygląda tak:

Daj elementowi o identyfikatorze wymienione 100 punktów
Daj elementowi z klasą wymienioną 10 punktów
Daj prostemu elementowi 1 punkt

Tak więc, dla powyższego, jeśli twój css ma coś takiego:

.navbar ul li a { color: red; } /* 10(.navbar) + 1(ul) + 1(li) + 1(a) = 13 points */
.navbar a { color: green; } /* 10(.navbar) + 1(a) = 11 points */

Tak więc, nawet jeśli zdefiniowałeś .navbar aafter .navbar ul li a, nadal będzie on zastępowany kolorem czerwonym zamiast zielonym, ponieważ specyficzność jest większa (13 punktów).

W zasadzie wszystko, co musisz zrobić, to obliczyć punkty dla elementu, dla którego chcesz zmienić css, za pomocą elementu inspect w przeglądarce. Tutaj bootstrap określił swój css dla elementu jako

.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
    color: #999;
}

Tak więc, nawet jeśli ładuje się twój css, jest ładowany po bootstrap.css, który ma następujący wiersz:

.navbar-nav li a {
    color: red;
}

nadal będzie renderowany jako # 999. Aby rozwiązać ten problem, bootstrap ma 22 punkty (obliczyć to samodzielnie). Potrzebujemy więc czegoś więcej. W związku z tym dodałem niestandardowe identyfikatory do elementów, tj. Kontener menu głównego i menu głównego. Teraz zadziała następujący css:

#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */

Gotowe.

Możesz skorzystać z tego łącza MDN .

Answer 13

1

A jeśli są związani?

Zmieszany

Answer 14

2

Nie ma to znaczenia, na przykład „.abc.xyz” oznacza, że istnieje element z klasą „abc” i „xyz” - nadal będzie traktował go jako pojedynczy element z klasą. Zatem 10 punktów. to samo dotyczy dowodu osobistego.

kaizer1v

Answer 15

1

Dobrze napisane! Dziękuję Ci!

GobSmack

Answer 16

1

To była dla mnie sztuczka. Miałem problem z przesłonięciem blockquotestylu w Bootstrap CSS. O dziwo, był to błąd w przypadku zwykłych cytatów blokowych, ale wyglądał dobrze i <ul> wewnątrz cytatu. Kluczem była aktualizacja mojego CSS blockquote p, która dawała wystarczający priorytet. <ul> robił to dla innej sekcji strony.

Adam Wuerl

Answer 17

Możesz nadpisać klasę CSS, czyniąc ją „bardziej szczegółową”.

Wchodzisz w drzewo HTML i określasz elementy nadrzędne:

div.sidebar { ... } jest bardziej szczegółowe niż .sidebar { ... }

Możesz przejść aż do BODY, jeśli chcesz:

body .sidebar { ... } zastąpi praktycznie wszystko.

Zobacz ten przydatny przewodnik: http://css-tricks.com/855-specifics-on-css-specificity/

Answer 18

To jest właściwie najlepsza odpowiedź

CodyBugstein

Answer 19

Możesz po prostu upewnić się, że Twój plik css analizuje PO BOOSTRAP.css, na przykład:

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

Answer 20

6

Jeśli chcesz nadpisać css w bootstrapie, użyj!

Powiedzmy, że tutaj jest klasa nagłówka strony w bootstrapie, która ma margines 40 pikseli na górze, mój klient nie lubi tego i chce, aby było tylko 15 na górze i 10 na dole

.page-header {
    border-bottom: 1px solid #EEEEEE;
    margin: 40px 0 20px;
    padding-bottom: 9px;
}

Więc dodałem na zajęciach w moim pliku site.css o tej samej nazwie

.page-header
{
    padding-bottom: 9px;
    margin: 15px 0 10px 0px !important;
}

Zwróć uwagę na! Important z moim marginesem, który nadpisze margines nagłówka klasy bootstarp.

Ali Adravi
źródło

niesamowite! To jest to czego chcę. Dzięki

Gisway,

2

Zauważ, że użycie! Important jest czymś w rodzaju anty-wzorca. Przeczytaj więcej tutaj: james.padolsey.com/css/dont-use-important

mayatron

Answer 21

niesamowite! To jest to czego chcę. Dzięki

Gisway,

Answer 22

2

Zauważ, że użycie! Important jest czymś w rodzaju anty-wzorca. Przeczytaj więcej tutaj: james.padolsey.com/css/dont-use-important

mayatron

Answer 23

Dotarłem tak późno, ale myślę, że przydałaby się inna odpowiedź.

Jeśli używasz sass, możesz faktycznie zmienić zmienne przed zaimportowaniem bootstrap. http://twitter.github.com/bootstrap/customize.html#variables

Zmień dowolne z nich, na przykład:

$bodyBackground: red;
@import "bootstrap";

Alternatywnie, jeśli nie ma dostępnej zmiennej dla tego, co chcesz zmienić, możesz zastąpić style lub dodać własne.

Sass:

@import "bootstrap";

/* override anything manually, like rounded buttons */
.btn {
  border-radius: 0;
}

Zobacz także: Właściwa struktura zasobów SCSS w szynach

Answer 24

Wiem, że to stare pytanie, ale mimo to natknąłem się na podobny problem i zdałem sobie sprawę, że mój „niedziałający” kod css w moim bootstrapOverload.csspliku został zapisany po rozszerzeniu media queries. kiedy przeniosłem go nad zapytania o media, zaczęło działać.

Na wypadek, gdyby ktoś inny miał ten sam problem

Jak nadpisać stylizację w Twitter Bootstrap

Odpowiedzi: