Ir para o conteúdo principal Pular para a navegação de documentos
Check
in English

Customizar

Aprenda a criar temas, personalizar e estender o Bootstrap com Sass, um monte de opções globais, um sistema de cores expansivo e muito mais.

Sass Utilize nossos arquivos Sass de origem para tirar proveito de variáveis, mapas, mixins e funções.
Opções Personalize o Bootstrap com variáveis ​​integradas para alternar facilmente as preferências globais de CSS.
Cor Conheça e personalize os sistemas de cores que suportam todo o kit de ferramentas.
Componentes Saiba como construímos quase todos os nossos componentes de forma responsiva e com classes base e modificadoras.
Variáveis ​​CSS Use as propriedades personalizadas CSS do Bootstrap para design e desenvolvimento rápidos e avançados.
Otimizar Mantenha seus projetos enxutos, responsivos e de fácil manutenção para que você possa oferecer a melhor experiência.

Visão geral

Existem várias maneiras de personalizar o Bootstrap. Seu melhor caminho pode depender do seu projeto, da complexidade de suas ferramentas de compilação, da versão do Bootstrap que você está usando, do suporte ao navegador e muito mais.

Nossos dois métodos preferidos são:

  1. Usando Bootstrap via gerenciador de pacotes para que você possa usar e estender nossos arquivos de origem.
  2. Usando os arquivos de distribuição compilados do Bootstrap ou jsDelivr para que você possa adicionar ou substituir os estilos do Bootstrap.

Embora não possamos entrar em detalhes aqui sobre como usar cada gerenciador de pacotes, podemos dar algumas orientações sobre como usar o Bootstrap com seu próprio compilador Sass .

Para aqueles que desejam usar os arquivos de distribuição, revise a página de introdução para saber como incluir esses arquivos e um exemplo de página HTML. A partir daí, consulte os documentos para o layout, componentes e comportamentos que você gostaria de usar.

À medida que você se familiarizar com o Bootstrap, continue explorando esta seção para obter mais detalhes sobre como utilizar nossas opções globais, fazer uso e alterar nosso sistema de cores, como construímos nossos componentes, como usar nossa lista crescente de propriedades personalizadas de CSS e como para otimizar seu código ao compilar com Bootstrap.

CSPs e SVGs incorporados

Vários componentes do Bootstrap incluem SVGs incorporados em nosso CSS para estilizar componentes de maneira consistente e fácil em navegadores e dispositivos. Para organizações com configurações de CSP mais rígidas , documentamos todas as instâncias de nossos SVGs incorporados (todos aplicados via background-image) para que você possa analisar suas opções com mais detalhes.

Com base na conversa da comunidade , algumas opções para resolver isso em sua própria base de código incluem substituir os URLs por ativos hospedados localmente , remover as imagens e usar imagens em linha (não é possível em todos os componentes) e modificar seu CSP. Nossa recomendação é revisar cuidadosamente suas próprias políticas de segurança e decidir o melhor caminho a seguir, se necessário.