Ir ao contido principal Ir á navegación de documentos
Check
in English

Personalizar

Aprende a crear temas, personalizar e ampliar Bootstrap con Sass, un montón de opcións globais, un sistema de cores expansivo e moito máis.

Sass Utiliza os nosos ficheiros de orixe Sass para aproveitar variables, mapas, mixins e funcións.
Opcións Personaliza Bootstrap con variables integradas para cambiar facilmente as preferencias CSS globais.
Cor Coñece e personaliza os sistemas de cores que admiten todo o conxunto de ferramentas.
Compoñentes Aprende como construímos case todos os nosos compoñentes de forma sensible e con clases base e modificadora.
Variables CSS Use as propiedades personalizadas CSS de Bootstrap para un deseño e desenvolvemento rápidos e con visión de futuro.
Optimizar Mantén os teus proxectos flexibles, sensibles e mantenbles para que poidas ofrecer a mellor experiencia.

Visión xeral

Hai varias formas de personalizar Bootstrap. O teu mellor camiño pode depender do teu proxecto, da complexidade das túas ferramentas de compilación, da versión de Bootstrap que esteas a usar, da compatibilidade do navegador e moito máis.

Os nosos dous métodos preferidos son:

  1. Usando Bootstrap a través do xestor de paquetes para que poida usar e ampliar os nosos ficheiros fonte.
  2. Usando os ficheiros de distribución compilados de Bootstrap ou jsDelivr para que poida engadir ou anular os estilos de Bootstrap.

Aínda que non podemos entrar en detalles aquí sobre como usar todos os xestores de paquetes, podemos dar algunhas orientacións sobre como usar Bootstrap co teu propio compilador Sass .

Para aqueles que queiran usar os ficheiros de distribución, consulte a páxina de inicio para ver como incluír eses ficheiros e unha páxina HTML de exemplo. A partir de aí, consulta os documentos sobre o deseño, os compoñentes e os comportamentos que queres usar.

A medida que te familiarices con Bootstrap, continúa explorando esta sección para obter máis detalles sobre como utilizar as nosas opcións globais, facer uso e cambiar o noso sistema de cores, como construímos os nosos compoñentes, como usar a nosa crecente lista de propiedades personalizadas de CSS e como para optimizar o seu código ao construír con Bootstrap.

CSP e SVG incorporados

Varios compoñentes de Bootstrap inclúen SVG incorporados no noso CSS para dar estilo aos compoñentes de forma consistente e sinxela en navegadores e dispositivos. Para as organizacións con configuracións de CSP máis estritas , documentamos todas as instancias dos nosos SVG incorporados (todos os cales se aplican mediante background-image) para que poida revisar as súas opcións máis a fondo.

Segundo a conversación da comunidade , algunhas opcións para abordar isto na túa propia base de código inclúen substituír os URL por recursos aloxados localmente , eliminar as imaxes e usar imaxes integradas (non é posible en todos os compoñentes) e modificar o teu CSP. A nosa recomendación é revisar coidadosamente as súas propias políticas de seguridade e decidir o mellor camiño a seguir, se é necesario.