Como posso substituir os estilos CSS do Bootstrap?

234

Preciso modificar bootstrap.csspara caber no meu site. Eu sinto que é melhor criar um custom.cssarquivo separado em vez de modificá-lo bootstrap.cssdiretamente, uma razão é que, para bootstrap.cssobter uma atualização, sofrerei tentando incluir novamente todas as minhas modificações. Vou sacrificar algum tempo de carregamento para esses estilos, mas é insignificante para os poucos estilos que estou substituindo.

Como faço bootstrap.csspara substituir para remover o estilo de uma âncora / classe? Por exemplo, se eu desejar remover todas as regras de estilo para 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;
}

Posso excluir tudo isso bootstrap.css, mas se meu entendimento sobre as melhores práticas de substituição de CSS estiver correto, o que devo fazer?

Para ser claro, quero remover todos esses estilos de legenda e usar os valores CSS dos pais. Então, combinando a resposta do Pranav, farei o seguinte?

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

(Eu esperava que houvesse uma maneira de fazer algo como o seguinte :)

legend {
  clear: all;
}

html css twitter-bootstrap Alex
fonte

491

Usar !importantnão é uma boa opção, pois você provavelmente desejará substituir seus próprios estilos no futuro. Isso nos deixa com prioridades de CSS.

Basicamente, cada seletor tem seu próprio 'peso' numérico:

100 pontos para IDs
10 pontos para aulas e pseudo-aulas
1 ponto para seletores de tags e pseudoelementos
Nota: Se o elemento tiver um estilo embutido que vence automaticamente (1000 pontos)

Entre dois estilos de seletor, o navegador sempre escolherá aquele com mais peso. A ordem das suas folhas de estilo importa apenas quando as prioridades são iguais - é por isso que não é fácil substituir o Bootstrap.

Sua opção é inspecionar as fontes do Bootstrap, descobrir como exatamente algum estilo específico está definido e copiar esse seletor para que seu elemento tenha a mesma prioridade. Mas meio que perdemos toda a doçura do Bootstrap no processo.

A maneira mais fácil de superar isso é atribuir um ID arbitrário adicional a um dos elementos raiz da sua página, assim: <body id="bootstrap-overrides">

Dessa forma, você pode prefixar qualquer seletor CSS com seu ID, adicionando instantaneamente 100 pontos de peso ao elemento e substituindo as definições do 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;
}

contrabandista
fonte

Como os IDs podem ser usados apenas uma vez, por que não fazer #bootstrap-overridesuma aula?

chharvey

2

@ chharvey: porque você acabaria tendo que calcular melhor. se fosse uma classe neste exemplo, seria o prio 11 e se a definição de css fosse posterior ao bootstrap.css, seria bom prosseguirmos. No entanto, isso seria bem próximo e defini-lo como um ID que aumenta o tempo do prio, não precisamos nos preocupar em calcular o prio e testá-lo com força, se temos sempre o direito. mais fácil com um ID, se você quiser sobrescrever definitivamente o padrão.

hogan

acabou de fazer o meu dia. Eu sei disso e ainda fico preso tentando descobrir por que meus estilos não são interpretados.

Hogan

3

Os pontos que você mencionou (100 para IDs, 10 para classes / pseudo-classes, 1 para seletores de tags / pseudo-elementos) são literais ou você acabou de criar esses valores para este exemplo?

Kyle Vassella

2

Sua explicação é boa, faz sentido como uma maneira de explicá-la a alguém novo no CSS, mas é enganosa. O nome correto para o que você mencionou é css, specificityque define o "peso" de cada seletor de css. Aqui estão mais alguns detalhes sobre isso: css-tricks.com/specifics-on-css-specificity/…

Adriano

85

Na seção principal do seu html, coloque seu custom.css abaixo de bootstrap.css.

<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

Em custom.css, você deve usar exatamente o mesmo seletor para o elemento que deseja substituir. No caso, legendele permanece legendno seu custom.css porque o bootstrap não possui seletores mais específicos.

legend {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: normal;
  color: #000000;
  border: 0;
  border-bottom: none;
}

Mas, no caso de, h1por exemplo, você precisa cuidar dos seletores mais específicos, como .jumbotron h1porque

h1 {
  line-height: 2;
  color: #f00;
}

não substituirá

.jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}

Aqui está uma explicação útil da especificidade dos seletores de css, que você precisa entender para saber exatamente quais regras de estilo serão aplicadas a um elemento. http://css-tricks.com/specifics-on-css-specificity/

Tudo o resto é apenas uma questão de copiar / colar e editar estilos.

Markus Kottländer
fonte

28

Isso não deve afetar muito o tempo de carregamento, pois você substitui partes da folha de estilo base.

Aqui estão algumas práticas recomendadas que eu pessoalmente sigo:

Sempre carregue CSS personalizado após o arquivo CSS base (não responsivo).
Evite usar !importantse possível. Isso pode substituir alguns estilos importantes dos arquivos CSS base.
Sempre carregue o bootstrap-responsive.css após o custom.css se você não quiser perder consultas de mídia. - DEVE SEGUIR
Prefere modificar as propriedades necessárias (nem todas).

Rahul Patil
fonte

10

como bootstrap-responsive.cssnão existe mais, isso ainda é verdadeiro ou não é mais relevante?

Shaun Wilson

20

Vincule seu arquivo custom.css como a última entrada abaixo do bootstrap.css. As definições de estilo Custom.css substituirão o bootstrap.css

Html

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

Copie todas as definições de estilo de legenda em custom.css e faça alterações (como margin-bottom: 5px; - Isso substituirá o margin-bottom: 20px;)

Paramasivan
fonte

Sim, eu já fiz isso. Desculpe, minha pergunta não estava clara. Minha pergunta foi perguntando o que fazer no custom.css para substituir estilos de bootstrap.min.css.

21413 Alex

E se eu também estiver usando o bootstrap-theme.min.css?

Quasaur

Trabalhou para mim, mesmo com min css

mimi

5

Para redefinir os estilos definidos legendno bootstrap, você pode fazer o seguinte no seu arquivo css:

legend {
  all: unset;
}

Ref: https://css-tricks.com/almanac/properties/a/all/

A propriedade all em CSS redefine todas as propriedades do elemento selecionado, exceto as propriedades direction e unicode-bidi que controlam a direção do texto.

Os valores possíveis são: initial, inherite unset.

Nota lateral: a clearpropriedade é usada em relação a float( https://css-tricks.com/almanac/properties/c/clear/ )

Vivek Athalye
fonte

3

Se você planeja fazer alterações bastante grandes, pode ser uma boa ideia fazê-las diretamente no próprio bootstrap e reconstruí-lo. Em seguida, você pode reduzir a quantidade de dados carregados.

Consulte o Bootstrap no GitHub para obter o guia de criação.

Victor Häggqvist
fonte

Dependendo da extensão da personalização necessária, essa pode ser a opção mais simples. Por exemplo, alterar qualquer cor de tema exigiria tantas substituições que eu prefiro optar por uma alteração de modelo e criação personalizada.

David Kirkland

fontes @alex Bump e reconstruir?

Victor Häggqvist

3

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

Para substituições simples de CSS, você pode adicionar um custom.css abaixo do bootstrap.css

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

Para alterações mais extensas, o SASS é o método recomendado.

crie seu próprio custom.scss
importar o Bootstrap após as alterações no custom.scss

Por exemplo, vamos mudar a cor de fundo do corpo para #eeeeee em cinza claro e a cor contextual primária azul para a variável $ purple do 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
fonte

2

Um pouco tarde, mas o que fiz foi adicionar uma classe à raiz e divdepois estender todos os elementos de inicialização na minha folha de estilo personalizada:

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

-1

Inspecione o botão de destino no console.
Vá para a guia elements, passe o mouse sobre o código e não se esqueça de encontrar o ID ou a classe padrão usada pelo bootstrap.
Use jQuery / javascript para substituir o estilo / texto chamando a função

Veja este exemplo:

  $(document).ready(function(){
      $(".dropdown-toggle").css({ 
        "color": "#212529",
        "background-color": "#ffc107",
        "border-color": "#ffc107"
       });
      $(".multiselect-selected-text").text('Select Tags');
  });

Anand Chaudhary
fonte

-1

Eu descobri que (bootstrap 4) colocando seu próprio CSS para trás bootstrap.csse .js é a melhor solução.

Encontre o item que você deseja alterar (inspecione o elemento) e use exatamente a mesma declaração para substituir.

Levei algum tempo para descobrir isso.

Henry
fonte

-3

Dê ID à legenda e aplique css. Como adicionar id hello à legend (), o css é o seguinte:

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

-9

Use jquery css em vez de css. . . jquery tem prioridade do que o bootstrap css ...

por exemplo

$(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
fonte

6

HTML deve ser usado para fornecer estrutura, CSS deve ser usado para fornecer estilo e Javascript (incluindo jQuery) deve ser usado apenas para fornecer interatividade. Usar o jQuery para substituir estilos é contrário aos princípios da boa arquitetura e será extremamente confuso para quem tentar trabalhar no código daqui a seis meses.

Stephen R. Smith

Como posso substituir os estilos CSS do Bootstrap?

Respostas: