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.
Odpowiedzi:
Dodaj własną klasę, np .: <div class="sidebar right"></div>, z CSS jako
.sidebar.right {
float:right
}
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.
!importantpolega na tym, że w przyszłości nie można go już nigdy zmienić.
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ą)
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:
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 .
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.
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/
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.
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
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