BOOTSTRAP 5

BOOTSTRAP 5 GET STARTED Bootstrap è una delle librerie di componenti per lo sviluppo front-end più famose al mondo, open-Source, venne originalmente sviluppata da Mark Otto e Jacob Thornton presso Twitter. Mobile-First: ci permette di sviluppare siti web responsivi, che si adattano automaticamente al dispositivo usato. Bootstrap è un framework front-end gratuito per uno sviluppo web più semplice e veloce, include modelli di progettazione basati su HTML e CSS per typography, forms, buttons, tables, navigation, modals, image carousels e molti altri, oltre a plug-in JavaScript opzionali. Bootstrap ti dà anche la possibilità di creare facilmente design responsive. NOTA: Quando [...]

CONTAINER BOOTSTRAP 5 Hai imparato dal post precedente che Bootstrap richiede un elemento di contenimento per avvolgere i contenuti del sito. I contenitori vengono utilizzati per riempire il contenuto al loro interno e sono disponibili due classi: La classe .container fornisce un contenitore responsive a larghezza fissa La classe .container-fluid fornisce un contenitore a larghezza intera, che copre l'intera larghezza della finestra CONTAINER FIXED Usa la classe .container per creare un contenitore responsive a larghezza fissa. Tieni presente che la sua larghezza (max-width) cambierà su diverse dimensioni dello schermo: FLUID CONTAINER Usa la classe .container-fluid [...]

IL GRID SYSTEM Il Grid System di Bootstrap è il Sistema a Griglia utilizzato per la creazione di layout responsivi e mobile-first. Utilizza una serie di contenitori, righe e 12 colonne per la disposizione e l’allineamento dei contenuti. Scritto con FlexBox, viene fornito con tantissime classi pronte ad essere impiegate nelle nostre pagine web. Il sistema a griglia è responsive e le colonne si riorganizzeranno automaticamente in base alle dimensioni dello schermo. Assicurati che la somma sia 12 o meno (non è necessario utilizzare tutte le 12 colonne disponibili). CLASSI DELLA GRIGLIA DI BOOTSTRAP Il sistema [...]

COMPONENTI BOOTSTRAP BUTTON Bootstrap 5 fornisce diversi stili di pulsanti. Le classi di pulsanti possono essere utilizzate su elementi <a>, <button> o <input>.  BUTTON OUTLINE Bootstrap 5 fornisce anche otto pulsanti con bordi. Sposta il mouse su di essi per vedere un ulteriore effetto "hover". BUTTON SIZE Usa la classe .btn-lg per pulsanti grandi o la classe .btn-sm per pulsanti piccoli: <button type="button" class="btn btn-primary btn-lg">Large</button> <button type="button" class="btn btn-primary">Default</button> <button type="button" class="btn btn-primary btn-sm">Small</button> BLOCK LEVEL BUTTON Per creare un pulsante a livello di blocco che copre l'intera larghezza dell'elemento padre, utilizzare la classe "helper" .d-grid sull'elemento padre. [...]

FINESTRE MODALI Il componente Modal è una finestra di dialogo a comparsa visualizzata nella parte superiore della pagina corrente. L'esempio seguente mostra come creare un modale di base: AGGIUNGERE UN’ANIMAZIONE Usa la classe .fade per aggiungere un effetto di dissolvenza quando apri e chiudi la finestra modale: <!-- Fading modal --> <div class="modal fade"></div> <!-- Modal without animation --> <div class="modal"></div> MODAL SIZE Modifica la dimensione del modale aggiungendo la classe .modal-sm per i modali piccoli (larghezza massima 300px), la classe .modal-lg per i modali grandi (larghezza massima 800px) o .modal-xl per i modali extra large (max -larghezza [...]

NAVBAR Una navigation bar è un'intestazione di navigazione posizionata normalmente nella parte superiore della pagina: Con Bootstrap, una barra di navigazione può estendersi o comprimersi, a seconda delle dimensioni dello schermo. Viene creata una barra di navigazione standard con la classe .navbar, seguita da una classe di compressione responsive: .navbar-expand-xxl|xl|lg|md|sm (impila la barra di navigazione verticalmente su schermi xxlarge, extra large, large, medium o small ). Per aggiungere collegamenti all'interno della barra di navigazione, utilizzare un elemento <ul> (o un <div>) con class="navbar-nav". Quindi aggiungi elementi <li> con una classe .nav-item seguita da un elemento <a> [...]

NAV MENUS Se vuoi creare un semplice menu orizzontale, aggiungi la classe .nav a un elemento <ul>, seguita da .nav-item per ogni <li> e aggiungi la classe .nav-link ai loro link: ESEMPIO DI CODICE Aggiungi la classe .justify-content-center per centrare il nav e la classe .justify-content-end per allineare a destra il nav. <!-- Centered nav --> <ul class="nav justify-content-center"> <!-- Right-aligned nav --> <ul class="nav justify-content-end"> VERTICAL NAV Aggiungi la classe .flex-column per creare una nav verticale: CODICE PER CREARE UNA NAV VERTICALE TABS Trasforma il menu di navigazione in schede di navigazione con la classe .nav-tabs. [...]