Salta al contenuto principale Passa alla navigazione dei documenti
Check
in English

personalizzare

Scopri come creare temi, personalizzare ed estendere Bootstrap con Sass, un carico di opzioni globali, un ampio sistema di colori e altro ancora.

Sass Utilizza i nostri file Sass di origine per sfruttare variabili, mappe, mixin e funzioni.
Opzioni Personalizza Bootstrap con variabili integrate per attivare facilmente le preferenze CSS globali.
Colore Scopri e personalizza i sistemi colore che supportano l'intero toolkit.
Componenti Scopri come costruiamo quasi tutti i nostri componenti in modo reattivo e con classi di base e modificatori.
Variabili CSS Usa le proprietà personalizzate CSS di Bootstrap per una progettazione e uno sviluppo rapidi e lungimiranti.
Ottimizzare Mantieni i tuoi progetti snelli, reattivi e manutenibili in modo da poter offrire la migliore esperienza.

Panoramica

Esistono diversi modi per personalizzare Bootstrap. Il tuo percorso migliore può dipendere dal tuo progetto, dalla complessità dei tuoi strumenti di compilazione, dalla versione di Bootstrap che stai utilizzando, dal supporto del browser e altro ancora.

I nostri due metodi preferiti sono:

  1. Utilizzo di Bootstrap tramite il gestore di pacchetti in modo da poter utilizzare ed estendere i nostri file sorgente.
  2. Utilizzando i file di distribuzione compilati di Bootstrap o jsDelivr in modo da poter aggiungere o sovrascrivere gli stili di Bootstrap.

Sebbene non possiamo entrare nei dettagli qui su come utilizzare ogni gestore di pacchetti, possiamo fornire alcune indicazioni sull'uso di Bootstrap con il tuo compilatore Sass .

Per coloro che desiderano utilizzare i file di distribuzione, consultare la pagina introduttiva per come includere tali file e una pagina HTML di esempio. Da lì, consulta i documenti per il layout, i componenti e i comportamenti che desideri utilizzare.

Man mano che acquisisci familiarità con Bootstrap, continua ad esplorare questa sezione per maggiori dettagli su come utilizzare le nostre opzioni globali, utilizzare e modificare il nostro sistema di colori, come costruiamo i nostri componenti, come utilizzare il nostro elenco crescente di proprietà personalizzate CSS e come per ottimizzare il codice durante la creazione con Bootstrap.

CSP e SVG incorporati

Diversi componenti Bootstrap includono SVG incorporati nel nostro CSS per definire lo stile dei componenti in modo coerente e semplice su browser e dispositivi. Per le organizzazioni con configurazioni CSP più rigide , abbiamo documentato tutte le istanze dei nostri SVG incorporati (tutti applicati tramite background-image) in modo che tu possa esaminare più a fondo le tue opzioni.

Sulla base della conversazione della community , alcune opzioni per affrontare questo problema nella tua base di codice includono la sostituzione degli URL con risorse ospitate localmente , la rimozione delle immagini e l'utilizzo di immagini inline (non possibile in tutti i componenti) e la modifica del CSP. La nostra raccomandazione è di rivedere attentamente le vostre politiche di sicurezza e decidere il miglior percorso da seguire, se necessario.