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.
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:
- Usando Bootstrap a través do xestor de paquetes para que poida usar e ampliar os nosos ficheiros fonte.
- 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.
- Acordeón
- Controis de carrusel
- Botón de pechar (usado en alertas e modais)
- Caixas de verificación de formularios e botóns de opción
- Interruptores de formularios
- Iconas de validación de formularios
- Botóns de alternancia da barra de navegación
- Seleccione menús
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.