Personalização do modelo CSS Bootstrap

Estou apenas começando com o Bootstrap do Twitter e me pergunto quais são as 'melhores práticas' para personalização. Eu quero desenvolver um sistema que tire proveito de todo o poder de um modelo css (Bootstrap ou outro), seja completamente (e facilmente) modificável, seja sustentável (ou seja - quando a próxima versão do Bootstrap for lançada do Twitter I don ' t tem que começar de novo.

Por exemplo, desejo adicionar imagens de fundo à navegação superior. Parece que existem três maneiras de fazer isso:

1. Modifique as classes .topbar em bootstrap.css. Eu particularmente não gosto disso porque terei muitos itens .topbar e não quero necessariamente modificá-los todos da mesma maneira.
2. Crie novas classes com minhas imagens de fundo e aplique os dois estilos (o novo e o bootstrap ao meu elemento). Isso pode criar conflitos de estilo, que podem ser evitados dividindo a classe .topbar em classes separadas e, em seguida, usando apenas as partes que não são pisadas por minha classe personalizada. Novamente, isso requer mais trabalho do que acho que deveria ser necessário e, embora seja flexível, não me permitirá atualizar facilmente o bootstrap.css quando o Twitter lançar o próximo capítulo.
3. Use variáveis ​​em .LESS para obter a customização. De imediato, parece uma boa abordagem, mas não tendo usado .LESS, tenho preocupações sobre a compilação de css no cliente e sobre a sustentabilidade do código.

Embora eu esteja usando o Bootstrap, essa questão pode ser generalizada para qualquer modelo css.

Agradecemos antecipadamente por sua contribuição.

A melhor coisa a fazer é.

1. fork twitter-bootstrap do github e clone localmente.

eles estão mudando muito rapidamente a biblioteca / framework (eles divergem internamente. Alguns preferem biblioteca, eu diria que é um framework, porque muda seu layout a partir do momento que você carrega em sua página). Bem ... bifurcação / clonagem permitirá que você obtenha facilmente as novas versões futuras.

2. Não modifique o arquivo bootstrap.css

Vai complicar sua vida quando você precisar atualizar o bootstrap (e você precisará fazer isso).

3. Crie seu próprio arquivo css e substitua sempre que quiser coisas de bootstrap originais

se eles definirem uma barra superior com, digamos, color: black;mas você a quer branca, crie um novo seletor muito específico para esta barra superior e use esta regra na barra superior específica. Para uma mesa, por exemplo, seria <table class="zebra-striped mycustomclass">. Se você declarar seu arquivo css depois bootstrap.css, isso substituirá tudo o que você quiser.

Atualização 2019 - Bootstrap 4

Estou revisitando esta questão de personalização do Bootstrap para 4.x, que agora utiliza SASS em vez de LESS. Em geral, existem 2 maneiras de personalizar o Bootstrap ...

1. Modificações simples de CSS

Uma maneira de personalizar é simplesmente usar CSS para substituir o CSS do Bootstrap. Para facilidade de manutenção, as personalizações CSS são colocadas em um custom.cssarquivo separado , para que bootstrap.csspermaneça inalterado. A referência ao custom.cssseguinte após o bootstrap.csspara que as substituições funcionem ...

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

Basta adicionar as alterações necessárias no CSS personalizado. Por exemplo...

    /* remove rounding from cards, buttons and inputs */
    .card, .btn, .form-control {
        border-radius: 0;
    }

Antes ( bootstrap.css)

Depois (com custom.css)

Ao fazer personalizações, você deve compreender a especificidade CSS . Substitui a custom.cssnecessidade de usar seletores que são tão específicos quanto bootstrap.css.

Observe que não há necessidade de usar !importantno CSS personalizado, a menos que você esteja substituindo uma das classes do utilitário Bootstrap . A especificidade CSS sempre funciona para uma classe CSS sobrescrever outra.

2. Personalize usando SASS

Se você estiver familiarizado com o SASS (e deve usar esse método), pode personalizar o Bootstrap com o seu próprio custom.scss. Há uma seção nos documentos do Bootstrap que explica isso, no entanto, os documentos não explicam como utilizar as variáveis ​​existentes no seu custom.scss. Por exemplo, vamos alterar a cor de fundo do corpo para #eeeeeee alterar / substituir a cor primarycontextual azul para a $purplevariável do Bootstrap ...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* use a variable to override primary */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

Isso também funciona para criar novas classes personalizadas . Por exemplo, aqui eu acrescento purpleàs cores do tema que cria tudo o CSS para btn-purple, text-purple, bg-purple, alert-purple, etc ...

/* add a new purple custom color */
$theme-colors: (
  purple: $purple
);

https://www.codeply.com/go/7XonykXFvP

Com o SASS você deve @import bootstrap após as customizações para fazê-las funcionar! Uma vez que o SASS é compilado para CSS ( isso deve ser feito usando um compilador SASS node-sass, gulp-sass, npm webpack, etc. ), o CSS resultante é o Bootstrap personalizado. Se você não está familiarizado com o SASS, pode personalizar o Bootstrap usando uma ferramenta como este criador de temas que criei.

Demonstração de bootstrap personalizado (SASS)

Nota: Ao contrário do 3.x, o Bootstrap 4.x não oferece uma ferramenta de personalização oficial . No entanto, você pode baixar o CSS da grade ou usar outra ferramenta de construção personalizada 4.x para reconstruir o CSS do Bootstrap 4 conforme desejado.

Relacionado:
Como estender / modificar (personalizar) Bootstrap 4 com SASS
Como alterar a cor primária do bootstrap?
Como criar um novo conjunto de estilos de cores no Bootstrap 4 com sass
Como personalizar o Bootstrap

Acho que a forma oficialmente preferida agora é usar Less, e substituir dinamicamente o bootstrap.css (usando less.js) ou recompilar bootstrap.css (usando Node ou o compilador Less).

Na documentação do Bootstrap , veja como substituir estilos bootstrap.css dinamicamente:

Baixe o Less.js mais recente e inclua o caminho para ele (e Bootstrap) no <head>.

 <link rel="stylesheet/less" href="/path/to/bootstrap.less">
    <script src="/path/to/less.js"></script>

Para recompilar os arquivos .less, basta salvá-los e recarregar sua página. Less.js os compila e os armazena no armazenamento local.

Ou se você preferir compilar estaticamente um novo bootstrap.css com seus estilos personalizados (para ambientes de produção):

Instale a ferramenta de linha de comando LESS via Node e execute o seguinte comando:

$ lessc ./less/bootstrap.less > bootstrap.css

Desde a resposta de Pabluez em dezembro, agora existe uma maneira melhor de personalizar o Bootstrap.

Use: Bootswatch para gerar seu bootstrap.css

O Bootswatch cria o Bootstrap normal do Twitter a partir da versão mais recente (tudo o que você instalar no diretório de bootstrap), mas também importa suas personalizações. Isso torna mais fácil usar a versão mais recente do Bootstrap, ao mesmo tempo que mantém o CSS personalizado, sem ter que mudar nada em seu HTML. Você pode simplesmente controlar os arquivos boostrap.css.

Você pode usar o modelo de bootstrap de

http://www.initializr.com/

que inclui todos os arquivos bootstrap .less. Você pode então alterar as variáveis ​​/ atualizar menos arquivos conforme desejar e ele irá compilar automaticamente o css. Ao implementar, compile o arquivo less para css.

A melhor opção, em minha opinião, é compilar um arquivo LESS personalizado incluindo bootstrap.less, um arquivo variables.less personalizadas e suas próprias regras:

1. Clone bootstrap em sua pasta raiz: git clone https://github.com/twbs/bootstrap.git
2. Renomeie-o como "bootstrap"
3. Crie um arquivo package.json: https://gist.github.com/jide/8440609
4. Crie um Gruntfile.js: https://gist.github.com/jide/8440502
5. Crie uma pasta "menos"
6. Copie bootstrap / less / variables.less para a pasta "less"
7. Altere o caminho da fonte: @icon-font-path: "../bootstrap/fonts/";
8. Crie um arquivo style.less customizado na pasta "less" que importa bootstrap.less e seu arquivo variables.less customizadas: https://gist.github.com/jide/8440619
9. Corre npm install
10. Corre grunt watch

Agora você pode modificar as variáveis ​​da maneira que quiser, sobrescrever as regras de bootstrap em seu arquivo style.less personalizado e, se algum dia quiser atualizar o bootstrap, pode substituir toda a pasta de bootstrap!

EDITAR: criei um boilerplate Bootstrap usando esta técnica: https://github.com/jide/bootstrap-boilerplate

Recentemente, escrevi um post sobre como tenho feito isso na Udacity nos últimos dois anos. Este método significa que fomos capazes de atualizar o Bootstrap sempre que quiséssemos, sem conflitos de mesclagem, perda de trabalho, etc. etc.

O post aprofunda os exemplos, mas a ideia básica é:

• Mantenha uma cópia original do bootstrap e sobrescreva-a externamente.
• Modifique um arquivo (variáveis ​​de bootstrap.less) para incluir suas próprias variáveis.
• Faça o arquivo do seu site @include bootstrap.less e, em seguida, faça suas substituições.

Isso significa usar LESS e compilá-lo para CSS antes de enviá-lo para o cliente (do lado do cliente MENOS se mimado, e eu geralmente evito), mas é EXTREMAMENTE bom para manutenção / atualização, e obter menos compilação é realmente muito fácil . O código github vinculado tem um exemplo usando grunt, mas há muitas maneiras de fazer isso - até mesmo GUIs, se você preferir.

Usando esta solução, seu problema de exemplo seria:

• Altere a cor da barra de navegação com @ navbar-inverse-bg em suas variables.less (não bootstrap's)
• Adicione seus próprios estilos de barra de navegação ao bootstrap_overrides.less, sobrescrevendo tudo o que você precisa conforme avança.
• Felicidade.

Quando chega a hora de atualizar seu bootstrap, você apenas troca a cópia original do bootstrap e tudo ainda funcionará (se o bootstrap fizer alterações significativas, você precisará atualizar suas substituições, mas você terá que fazer isso de qualquer maneira)

A postagem do blog com passo a passo está aqui .

O exemplo de código no github está aqui .

Use MENOS com Bootstrap ...

Aqui estão os documentos do Bootstrap sobre como usar o LESS

(eles mudaram desde as respostas anteriores)