Introduzione al Bootstrap 4 Cheatsheet
Bootstrap 4 cheat sheet ha incorporato una profonda revisione da Bootstrap 3. Sono stati apportati molti cambiamenti alla maggior parte dei componenti che includono tabelle, moduli, menu a discesa, griglie, navbar, ecc. I principali vantaggi di framework come Bootstrap è che possono accelerare tempi di sviluppo anche quando si mantiene la qualità e la coerenza dell'applicazione in tutto il sito. Bootstrap 4 cheat sheet funziona su tutti i browser moderni sopra Internet Explorer 9.
Bootstrap 4
Bootstrap 4 è la versione più recente e avanzata di bootstrap. È il framework più popolare per HTML, CSS e JavaScript utilizzato per sviluppare applicazioni reattive e basate su dispositivi mobili. Bootstrap 4 come le versioni precedenti è gratuito e open-source. Non è più necessario riscrivere e riprogettare tutto da zero a terra per i diversi set di dispositivi. Inoltre, non abbiamo bisogno di aspettare diverse ore cercando di riparare tutto e assicurandoci che appaia e funzioni su diversi browser, piattaforme uniche e dispositivi.
Comandi e descrizione sul cheatsheet Bootstrap 4
Di seguito sono riportati alcuni importanti comandi di Bootstrap 4 e la loro descrizione:
| comandi | Descrizione |
| Contenitore fisso | Un contenitore fisso ha una larghezza fissa. Quando il browser viene ridimensionato, la sua larghezza rimane la stessa fino a quando non viene trovato il punto di interruzione. |
| Contenitore fluido | Un contenitore fluido si estende per l'intera larghezza della finestra disponibile. Si espande e si contrae in modo fluido, il che significa che cambia quando il browser viene ridimensionato. |
| .Col- | È per dispositivi extra piccoli - la larghezza dello schermo è inferiore a 576px |
| .COL-SM- | È per dispositivi di piccole dimensioni - la larghezza dello schermo rimane uguale o superiore a 576 px |
| .COL-MD- | È per dispositivi medi - la larghezza dello schermo rimane uguale o superiore a 768px |
| .COL-LG- | È per dispositivi di grandi dimensioni - la larghezza dello schermo è pari o superiore a 992px |
| .COL-XL- | È per dispositivi xlarge - la larghezza dello schermo è uguale o superiore a 1200px |
- | h1 Intestazione dimensione Bootstrap con 2, 5rem = 40px h2 Intestazione dimensione Bootstrap con 2rem = 32px h3 Intestazione dimensione Bootstrap con 1.75rem = 28px h4 Intestazione dimensione Bootstrap con 1, 5rem = 24px h5 Intestazione dimensione Bootstrap con 1, 25rem = 20px h6 Intestazione dimensione Bootstrap con 1rem = 16px |
| Questo elemento tag HTML fornisce un colore di sfondo giallo con alcune imbottiture | |
| Questo elemento tag HTML fornisce un bordo inferiore tratteggiato. | |
|
| La classe add con
è usato per citare blocchi di contenuto dalla fonte che provengono dall'esterno. |
| .font-peso-bold | Per il testo in grassetto |
| .font-italico | Per il testo in corsivo |
| .font-peso leggero | Per testo leggero |
| .font-peso-normale | Per il testo normale |
| .condurre | Fa risaltare visibilmente un paragrafo |
| .piccolo | Indica un testo più piccolo, cioè riduce la dimensione del carattere all'85% della dimensione del suo genitore. |
| .text-sinistra | Indica che il testo deve essere allineato a sinistra. |
| .text - * - sinistra | Indica che il testo è allineato a sinistra su schermi di tutte le dimensioni |
| .text-center | Indica il testo allineato al centro |
| .text - * - Centro | Indica il testo allineato al centro su schermi di tutte le dimensioni |
| .text-destra | Indica il testo allineato a destra |
| .text - * - destra | Indica il testo allineato a destra su schermi di tutte le dimensioni |
| .text-giustificare | Indica un testo giustificato |
| .text-monospace | Ha testo monospaziato |
| .text-nowrap | Indica per nessun testo a capo |
| .text-minuscolo | Indica per il testo in minuscolo |
| .text-maiuscolo | Indica il testo in maiuscolo |
| .text-capitalizzare | Indica il testo in maiuscolo |
| .initialism | Visualizza il testo all'interno di un elemento tag HTML con un carattere di dimensioni inferiori. Rimuove lo stile di elenco predefinito disponibile e il margine sinistro sugli elenchi nidificati delle voci di elenco |
| .tavolo | La classe aggiunge uno stile di base al tavolo. |
| .table a righe | La classe aggiunge strisce zebrate al tavolo. |
| .table-delimitato | La classe aggiunge bordi su tutti i lati di una tabella e celle. |
| .table-hover | La classe aggiunge un effetto hover ovvero il colore di sfondo grigio sulle righe della tabella disponibili. |
| .table-scuro | La classe aggiunge uno sfondo nero a una tabella. |
Suggerimenti e trucchi gratuiti sull'utilizzo di Bootstrap 4 Cheat sheet: -
In questa sezione sono citati alcuni suggerimenti e trucchi interessanti per hackerare rapidamente le funzionalità del cheat sheet di bootstrap 4 e creare un'app straordinaria sul cellulare: -
- Con l'uso. col- (breakpoint) -push- (numero) o quando si utilizza. col- (breakpoint) -pull- (numero) classi alle colonne, è possibile modificare la sequenza delle colonne specificate.
- Per nascondere rapidamente e facilmente un elemento solo su dispositivi xs, esiste un. classe hidden-xs, può essere usata per nascondere.
- . la classe nascosta (punto di interruzione) può essere utilizzata anche per il resto dei punti di interruzione e, se combinati, è possibile ottenere l'ambito nascosto come menzionato sopra. Es: - classi .hidden-LG, .hidden-MD, .hidden-sm.
- Bootstrap viene fornito con 5 stili di pulsanti disponibili predefiniti, che sono predefiniti, principali, positivi e pericolosi. Quando un pulsante deve essere modificato per ridurre il raggio del bordo o il riempimento, il modo migliore per raggiungere questo obiettivo è quello di sovrascrivere il .btn
- Per disabilitare le radio e le caselle di controllo, è necessario aggiungere una classe disabilitata a un elemento genitore .checkboxor to.radio. quindi aggiungere l'attributo disabilitato all'input specifico
- Per disabilitare i pulsanti, aggiungi l'attributo disabilitato ai pulsanti dei tag HTML
O lo stesso può essere fatto aggiungendo la classe .disabled ai pulsanti.
- Per centrare facilmente un elemento di blocco in orizzontale, è necessario aggiungere una classe di blocco centrale, come in.
- Se è necessario raggiungere rapidamente il contenuto inline center o devono essere eseguiti elementi inline block all'interno di un div, aggiungere la classe .text-center al suo elemento parent.
- Si può anche facilmente incorporare video di YouTube usando la classe di risposta incorporata di Bootstrap che è un aiuto, classi. La classe embed-responsive-16by9 o embed-responsive-4by3 deve essere scelta in base alle proporzioni del video
Bootstrap 4 Cheat sheet - conclusione
Sopra il foglietto illustrativo di bootstrap 4 viene fornito uno spaccato di ciò che è possibile con bootstrap 4. Ma è disponibile una guida più completa con migliaia di altri parametri e tag. È ovvio che le informazioni riguardanti tutto non possono essere fornite in un singolo articolo, né uno sviluppatore deve ricordare tutti i tag e le classi per fare lo sviluppo. L'approccio migliore e più raccomandato è quello di tenere a portata di mano questi fogli cheat e l'utente dovrebbe fare riferimento a tali fogli ogni volta che si presenta una necessità. Ciò garantirà che tutto il lavoro venga svolto nel momento del bisogno e migliorerà la comprensione e la conoscenza dell'utente di bootstrap 4 per un periodo.
Articolo raccomandato
Questa è stata una guida al cheat di Bootstrap 4 qui abbiamo discusso il contenuto e il comando, nonché suggerimenti e trucchi gratuiti del cheat di Bootstrap 4 che puoi anche leggere il seguente articolo per saperne di più -
- Foglio informativo CSS
- Bootstrap vs Jquery Differences
- Guida semplice e utile al cheat sheet SQL
- Cheat sheet definitivo per il linguaggio di programmazione C ++ (Nozioni di base)