Personalização do modelo CSS do Bootstrap

Estou apenas começando com Bootstrap do Twitter e estou querendo saber quais são as ‘melhores práticas’ para personalização. Eu quero desenvolver um sistema que tire proveito de todo o poder de um template css (Bootstrap ou outro), seja completamente (e facilmente) modificável, seja sustentável (ou seja – quando a próxima versão do Bootstrap for liberada do Twitter que eu don ‘ t tem que começar de novo.

Por exemplo, quero adicionar imagens de plano de fundo à navegação superior. Parece que existem 3 maneiras de fazer isso:

  1. Modifique as classs .topbar no bootstrap.css. Eu particularmente não gosto disso porque vou ter muitos itens .top e não necessariamente quero modificá-los da mesma maneira.
  2. Crie novas classs com minhas imagens de fundo e aplique ambos os estilos (o novo e o bootstrap ao meu elemento). Isso pode criar conflitos de estilo, o que poderia ser evitado removendo a class .topbar em classs separadas e, em seguida, usando apenas as partes que não são pisadas pela minha class personalizada. Novamente, isso requer mais trabalho do que eu acho que deve ser necessário e, embora seja flexível, não me permitirá atualizar facilmente o bootstrap.css quando o Twitter lançar a próxima edição.
  3. Use variables ​​em .LESS para obter a personalização. De improviso, isso parece uma boa abordagem, mas não usei. MENOS Eu tenho preocupações sobre a compilation 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 pela input.

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 mude seu layout a partir do momento que você carrega na sua página). Bem … o bifurcação / clonagem permitirá que você busque 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 sobrescreva sempre que quiser material original de bootstrap

se eles definirem um topbar com, digamos, color: black; mas você fica branco, crie um novo seletor muito específico para esta barra superior e use essa regra na barra de topo específica. Para uma tabela, por exemplo, seria

. Se você declarar seu arquivo css após o bootstrap.css , isso sobrescreverá o que você quiser.

Acho que a maneira oficialmente preferida é usar Less e dinamicamente replace o bootstrap.css (usando less.js) ou recompilar o bootstrap.css (usando o Node ou o compilador Less).

A partir dos documentos do Bootstrap , veja como replace os estilos do bootstrap.css dinamicamente:

Faça o download do Less.js mais recente e inclua o caminho para ele (e o Bootstrap) no .

    

Para recompilar os arquivos .less, salve-os e recarregue sua página. Less.js os compila e 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 há uma maneira melhor de personalizar o Bootstrap.

Use: Bootswatch para gerar seu bootstrap.css

O Bootswatch constrói o Twitter Bootstrap normal a partir da versão mais recente (o que você instalar no diretório de boot), mas também importa suas customizações. Isso facilita o uso da versão mais recente do Bootstrap, mantendo o CSS personalizado, sem ter que alterar nada sobre o seu HTML. Você pode simplesmente manipular arquivos boostrap.css.

Atualização 2018 – Bootstrap 4

Estou revisitando essa questão de customização do Bootstrap para o 4.x, que agora utiliza o SASS em vez do LESS. Em geral, existem duas maneiras de personalizar o Bootstrap …

1. Substituições simples de CSS

Uma maneira de personalizar é simplesmente usar CSS para replace o Bootstrap CSS. Para manutenção, as personalizações CSS são colocadas em um arquivo custom.css separado, para que o bootstrap.css permaneça inalterado. A referência ao custom.css segue após o bootstrap.css para que as substituições funcionem …

   

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 )

insira a descrição da imagem aqui

Depois (com custom.css )

insira a descrição da imagem aqui

Note que não há necessidade de usar !important no CSS customizado, a menos que você esteja substituindo uma das classs do Bootstrap Utility . A especificidade CSS sempre funciona para uma class CSS para replace outra.


2. Personalizar usando o SASS

Se você estiver familiarizado com o SASS (e deveria usar este método), poderá personalizar o Bootstrap com seus próprios custom.scss . Há uma seção nos documentos do Bootstrap que explica isso, no entanto, os documentos não explicam como utilizar as variables ​​existentes em seu custom.scss . Por exemplo, vamos alterar a cor de fundo do corpo para #eeeeee e alterar / replace a cor contextual primary azul pela 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; /* 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 classs personalizadas . Por exemplo, aqui eu adiciono purple às colors do tema que cria todas as 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 @importar o bootstrap após as personalizações para fazê-las funcionar! Uma vez que o SASS é compilado para CSS (isso deve ser feito no lado do servidor usando um compilador SASS), o CSS resultante é o Bootstrap personalizado. Se você não estiver familiarizado com o SASS, poderá personalizar o Bootstrap usando uma ferramenta como este criador de temas que criei.

Demonstração de Bootstrap Personalizada (SASS)


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

Você pode usar o modelo de bootstrap

http://www.initializr.com/

que inclui todos os arquivos .less do bootstrap. Você pode então alterar as variables ​​/ atualizar os arquivos menos como você deseja e irá automaticamente compilar o css. Ao implantar, compile o menor arquivo para css.

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

  1. Clone bootstrap na 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 “less”
  6. Copiar bootstrap / less / variables.less na pasta “less”
  7. Altere o caminho da fonte: @icon-font-path: "../bootstrap/fonts/";
  8. Crie um arquivo custom style.less na pasta “less” que importa o arquivo bootstrap.less e seu arquivo custom.vail.less: https://gist.github.com/jide/8440619
  9. Execute a npm install
  10. Corra com o grunt watch

Agora você pode modificar as variables ​​da maneira que quiser, replace as regras de bootstrap no seu arquivo style.less personalizado e, se algum dia quiser atualizar o bootstrap, você pode replace a pasta de boot inteira!

EDIT: Eu criei um clichê Bootstrap usando esta técnica: https://github.com/jide/bootstrap-boilerplate

Eu escrevi recentemente um post sobre como eu tenho feito isso na Udacity nos últimos dois anos. Esse método significa que conseguimos atualizar o Bootstrap sempre que quiséssemos sem conflitos de mesclagem, expulsão do trabalho etc. etc.

O post vai mais a fundo com exemplos, mas a ideia básica é:

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

Isso significa usar o LESS e compilá-lo para CSS antes de enviá-lo ao cliente (LESS do lado do cliente, se for minguado, e geralmente evitá-lo), mas é EXTREMAMENTE bom para capacidade de manutenção / atualização e obter uma compilation LESS é realmente muito fácil . O código do github vinculado tem um exemplo usando grunhido, mas há muitas maneiras de conseguir isso – até mesmo GUIs, se isso é o que você gosta.

Usando essa solução, seu problema de exemplo ficaria assim:

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

Quando chega a hora de atualizar o seu bootstrap, você simplesmente troca a cópia de bootstrap primitiva e tudo ainda funcionará (se o bootstrap fizer mudanças significativas, você precisará atualizar suas substituições, mas você teria que fazer isso de qualquer maneira)

A postagem do blog com acompanhamento está aqui .

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

Use menos com o Bootstrap …

Aqui estão os documentos do Bootstrap para saber como usar o LESS

(eles mudaram desde as respostas anteriores)