Como substituir o estilo no Twitter Bootstrap

128

Como sobrescrever os estilos no Twitter Bootstrap? Por exemplo, atualmente estou usando uma classe .sidebar que possui a regra CSS 'float: left;' Como posso mudar isso para que ele vá para a direita? Estou usando HAML e SASS, mas sou relativamente novo no desenvolvimento web.

css twitter-bootstrap John
fonte
Veja também: stackoverflow.com/questions/8596794/...
Zim

Respostas:

41

Adicione sua própria classe, ex:, <div class="sidebar right"></div>com o CSS como

.sidebar.right { 
    float:right
}
motoxer4533
fonte
1
Não boa prática: github.com/CSSLint/csslint/wiki/Disallow-adjoining-classes
Damjan Pavlica
2
@DamjanPavlica Honestamente? Você ainda se importa com o IE 6? Sem mencionar que, eu acho, o bootstrap usa encadeamento.
Błażej Michalik
233

Todas essas dicas funcionarão, mas uma maneira mais simples pode ser incluir sua folha de estilo após os estilos do Bootstrap.

Se você incluir seu css ( site-specific.css) após o Bootstrap ( bootstrap.css), poderá substituir as regras redefinindo-as.

Por exemplo, se é assim que você inclui CSS no seu <head>

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

Você pode simplesmente mover a barra lateral para a direita escrevendo (em seu site-specific.cssarquivo):

.sidebar {
    float: right;
}

Perdoe a falta de HAML e SASS, não os conheço o suficiente para escrever tutoriais neles.

citelao
fonte
7
@ClaudiuConstantin Não vejo razão para não. A regra geral é que o segundo estilo sempre superará o primeiro, se dois tiverem o mesmo nível de especificidade. Enquanto o seu estilo vier depois, ele será substituído.
Citelao
3
@ Kreker Isso provavelmente tem muito a ver com especificidade. Você pode ler sobre isso aqui (artigo antigo), mas basicamente .sidebar.righté mais específico que .sidebar. Provavelmente esse é o problema. Use o web inspector para descobrir o que está substituindo-o.
Citelao
2
@ Kreker sim, essa é a idéia. O problema !importanté que você nunca poderá substituí-lo novamente no futuro.
Citelao
5
Meu Site.cssé agrupado, listado Bundle.confige renderizado fisicamente depois, bootstrap.css mas os estilos ainda não são substituídos. Eu tive que tomar a site.cssreferência fora do pacote modernizador e colocar manualmente que após a bootstrap.css(e pressione Ctrl + F5 uma vez depuração para limpar o cache)
atconway
1
Isso pode funcionar, mas não seria uma prática recomendada para produção. Carregue 1 folha de estilo por site, a menos que haja um grande motivo para não fazê-lo. #sitespeed
Ben Racicot
58

A resposta para isso é a especificidade do CSS. Você precisa ser mais "específico" no seu CSS para que ele possa substituir as propriedades do bootstrap css.

Por exemplo, você tem um código de exemplo para um menu de inicialização aqui:

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

Aqui, você precisa se lembrar da hierarquia da especificidade. É assim:

  • Dê um elemento com um ID mencionado 100 pontos
  • Dê um elemento com uma classe mencionada 10 pontos
  • Dê a um elemento simples um único ponto

Portanto, para o exposto acima, se o seu css tiver algo parecido com isto:

.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 */

Portanto, mesmo que você tenha definido o .navbar adepois, .navbar ul li aele ainda será substituído por uma cor vermelha, em vez de verde, pois a especificidade é maior (13 pontos).

Então, basicamente, tudo o que você precisa fazer é calcular os pontos do elemento para o qual você deseja alterar o css, via elemento de inspeção no seu navegador. Aqui, o bootstrap especificou seu css para o elemento como

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

Portanto, mesmo se o carregamento do seu css estiver sendo carregado após o bootstrap.css, que possui a seguinte linha:

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

ainda será renderizado como # 999. Para resolver isso, o bootstrap tem 22 pontos (calcule você mesmo). Então, tudo o que precisamos é algo mais que isso. Assim, adicionei IDs personalizados aos elementos, ou seja, home-menu-container e home-menu. Agora, o seguinte css funcionará:

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

Feito.

Você pode consultar este link MDN .

kaizer1v
fonte
1
E se eles estiverem empatados?
Confuso
2
Não importa, por exemplo, '.abc.xyz' significa que existe um elemento com a classe 'abc' e 'xyz' - ainda será considerado um elemento único com uma classe. Assim, 10 pontos. O mesmo vale para um ID.
kaizer1v
1
Bem escrito! Obrigado!
GobSmack
1
Esse foi o truque para mim. Eu estava tendo problemas para substituir o blockquoteestilo no CSS do Bootstrap. Estranhamente, estava errado para as citações de bloco normais, mas parecia certo e <ul> dentro de uma citação de bloco. A chave estava atualizando meu CSS blockquote p, o que dava prioridade suficiente. O <ul> estava fazendo isso na outra seção da página.
Adam Wuerl
20

Você pode substituir uma classe CSS, tornando-a "mais específica".

Você sobe na árvore HTML e especifica elementos pai:

div.sidebar { ... } é mais específico que .sidebar { ... }

Você pode ir até BODY se precisar:

body .sidebar { ... } substituirá praticamente qualquer coisa.

Consulte este guia prático: http://css-tricks.com/855-specifics-on-css-specificity/

Diodeus - James MacFarlane
fonte
Esta é realmente a melhor resposta
CodyBugstein
9

Você pode apenas garantir que seu arquivo css analise APÓS o boostrap.css, assim:

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

Gothburz
fonte
6

Se você deseja sobrescrever qualquer css no bootstrap use! Important

Digamos que aqui está a classe do cabeçalho da página no bootstrap que tem margem de 40px na parte superior, meu cliente não gosta e ele quer que ela seja 15 na parte superior e 10 na parte inferior

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

Então adicionei aula no meu arquivo site.css com o mesmo nome como este

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

Observe o! Important with my margin, que substituirá a margem da margem da classe bootstarp page-header.

Ali Adravi
fonte
impressionante! é isso que eu quero. Obrigado
Gisway
2
Observe que o uso de! Important é um anti-padrão. Leia mais aqui: james.padolsey.com/css/dont-use-important
mayatron
3

Me deparei com isso tarde, mas acho que poderia usar outra resposta.

Se você estiver usando o sass, poderá alterar as variáveis ​​antes de importar o bootstrap. http://twitter.github.com/bootstrap/customize.html#variables

Altere qualquer um deles, como:

$bodyBackground: red;
@import "bootstrap";

Como alternativa, se não houver uma variável disponível para o que você deseja alterar, você pode substituir os estilos ou adicionar os seus.

Sass:

@import "bootstrap";

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

Veja também: Estrutura apropriada de ativos SCSS no Rails

AJcodez
fonte
2

Eu sei que esta é uma pergunta antiga, mas ainda assim, me deparei com um problema semelhante e percebi que meu código css "não está funcionando" no meu bootstrapOverload.cssarquivo foi gravado após o arquivo media queries. quando o movi para cima das consultas de mídia, ele começou a funcionar.

Caso alguém esteja enfrentando o mesmo problema

md1hunox
fonte