Bootstrap 4 - Guida rapida
Cos'è Bootstrap 4?
Bootstrap 4 è un potente e popolare framework front-end mobile first per la creazione di siti mobile first reattivi sul web. È l'ultima versione di Bootstrap , che utilizza HTML, CSS e JavaScript.
Storia
L'ultima versione stabile di Bootstrap v3.3.7 è stata nel luglio 2016 e nell'agosto 2017 è stata rilasciata la versione beta di Bootstrap 4.0.0.
Perché usare Bootstrap?
Contiene i primi stili mobili in tutta la libreria, invece di utilizzarli in file separati.
Con la sola conoscenza di HTML e CSS chiunque può iniziare con Bootstrap. Anche il sito ufficiale di Bootstrap ha una buona documentazione.
È supportato da tutti i browser più diffusi e il suo CSS reattivo si adatta a desktop, tablet e cellulari.
Fornisce una soluzione pulita e uniforme per la creazione di un'interfaccia per gli sviluppatori.
Contiene componenti incorporati belli e funzionali che sono facili da personalizzare.
È un open source e fornisce personalizzazione basata sul web.
Bootstrap 3 v / s Bootstrap 4
Bootstrap 4 è l'ultima versione di Bootstrap 3, i cui file CSS di origine vengono convertiti in SCSS. Utilizza il modale flessibile per il sistema a griglia e supporta tutti i browser più recenti. Tuttavia, supporta Internet Explorer 9+ e iOS 7+ e ha abbandonato il supporto per IE 8 e versioni inferiori, iOS 6 e versioni inferiori. Per ulteriori informazioni sulla differenza tra Bootstrap 3 e Bootstrap 4, consulta questo capitolo .
Puoi iniziare a utilizzare Bootstrap 4 nel tuo sito web includendolo da CDN (Content Delivery Network) o scaricandolo da getbootstrap.com .
Utilizzando CDN
Bootstrap 4 può essere utilizzato nel sito Web includendolo da Content Delivery Network .
Usa il CDN di CSS e JS di Bootstrap compilato di seguito nel tuo progetto.
<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
Includere le versioni CDN di jQuery e Popper.js (Bootstrap 4 utilizza jQuery e Popper.js per utilizzare componenti JavaScript come modals, tooltips, popover ecc.) Prima del JavaScript Bootstrap minimizzato , se si utilizza la versione compilata di JavaScript.
Di seguito sono riportati alcuni componenti, che richiedono jQuery -
Utilizzato per avvisi chiudibili
Cambia gli stati usando i pulsanti e le caselle di controllo / pulsanti di opzione e comprimi per alternare il contenuto
Carosello per diapositive, controlli e indicatori
Dropdown (utilizza Popper.js per un posizionamento perfetto)
Apri e chiudi i Modals
Per far crollare la barra di navigazione
Descrizioni comandi e popover (utilizza Popper.js per un posizionamento perfetto)
Download di Bootstrap 4
Puoi scaricare Bootstrap 4 da https://getbootstrap.com/docs/4.1/getting-started/download/. Quando fai clic su questo link, vedrai una schermata come mostrato di seguito:
Qui puoi vedere due pulsanti:
Download- Facendo clic su questo, è possibile scaricare le versioni precompilate e minimizzate di CSS e JavaScript di Bootstrap. Non è inclusa alcuna documentazione o file di codice sorgente originale.
Download Source - Facendo clic su questo, è possibile ottenere l'ultimo Bootstrap SCSS, il codice sorgente JavaScript e i file di documentazione.
Per una migliore comprensione e facilità d'uso, utilizzeremo la versione precompilata di Bootstrap durante il tutorial. Poiché i file vengono rispettati e minimizzati, non devi preoccuparti ogni volta di includere file separati per funzionalità individuali.
Struttura dei file
Bootstrap precompilato 4
Una volta scaricata la versione compilata Bootstrap 4, estrai il file ZIP e vedrai la seguente struttura di file / directory:
Come puoi vedere, ci sono CSS e JS compilati (bootstrap. *), Così come CSS e JS compilati e minimizzati (bootstrap.min. *).
Codice sorgente Bootstrap 4
Se hai scaricato il codice sorgente Bootstrap 4, la struttura del file sarà la seguente:
I file sotto js / e scss / sono il codice sorgente per Bootstrap CSS e JavaScript.
La cartella dist / include tutto ciò che è elencato nella sezione di download precompilato sopra.
La documentazione / esempi / include il codice sorgente per la documentazione di Bootstrap ed esempi di utilizzo di Bootstrap.
Creazione della prima pagina Web con Bootstrap 4
L'esempio seguente specifica una semplice pagina web di Bootstrap 4 -
Esempio
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<h2>Hello, world!!! Welcome to Tutorialspoint...</h2>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
Produrrà il seguente risultato:
Produzione
Bootstrap 4 utilizza classi container per avvolgere il contenuto della pagina. Contiene due classi contenitore:
.container - Rappresenta un contenitore a larghezza fissa.
.container-fluid - Rappresenta un contenitore a larghezza intera.
Contenitore
La classe .container viene utilizzata per avvolgere il contenuto della pagina con larghezza fissa e il contenuto può essere posizionato facilmente al centro utilizzando la classe .container come mostrato di seguito.
<div class = "container">
...
</div>
Esempio
L'esempio seguente specifica una semplice pagina web con un contenitore a larghezza fissa -
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
<style>
.container {
background: #a52c644a;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
}
</style>
</head>
<body>
<div class = "container">
<h2>Fixed Width Container</h2>
This is a simple web page with fixed width container by using
<code>.container</code> class.
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
Produrrà il seguente risultato:
Produzione
Contenitore per liquidi
È possibile creare un contenitore a larghezza intera utilizzando la classe .container-fluid come mostrato di seguito.
<div class = "container-fluid">
...
</div>
L'esempio seguente specifica una semplice pagina web con un contenitore a larghezza intera:
Esempio
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
<style>
.container-fluid {
background: #a52c644a;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
}
</style>
</head>
<body>
<div class = "container-fluid">
<h2>Full Width Container</h2>
This is a simple web page with full width container by using
<code>.container-fluid</code> class.
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity =" sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
Produrrà il seguente risultato:
Produzione
Descrizione
Sistema a griglia Bootstrap 4 costruito con flexbox che è completamente reattivo e scala fino a 12 colonne (in base alle dimensioni del dispositivo) creando layout con righe e colonne sulla pagina. Fornisce un sistema a griglia fluida mobile first reattivo che ridimensiona le colonne all'aumentare delle dimensioni del dispositivo o della finestra.
Funzionamento del sistema a griglia
Le righe devono essere posizionate all'interno di una classe .container per un corretto allineamento e riempimento.
Per una larghezza reattiva, usa la classe .container e per una larghezza fissa su tutto il viewport, usa la classe .container-fluid .
Usa le righe per creare gruppi di colonne orizzontali.
Il contenuto deve essere posizionato all'interno delle colonne e solo le colonne possono essere le figlie immediate delle righe.
Le colonne contengono un riempimento per controllare lo spazio tra di loro.
Se metti più di 12 colonne in una riga, le colonne verranno posizionate in una nuova riga.
Le colonne creano spazi tra il contenuto delle colonne tramite riempimento. Pertanto, puoi rimuovere il margine dalle righe e il riempimento dalle colonne con la classe .no-gutters sulla riga.
È possibile rendere reattivo il sistema di rete utilizzando cinque punti di interruzione della griglia come extra piccolo, piccolo, medio, grande ed extra grande.
Sono disponibili classi di griglia predefinite come .col-4 per creare rapidamente layout di griglia. LESS mixin possono essere utilizzati anche per layout più semantici.
Opzioni griglia
La tabella seguente riassume gli aspetti di come il sistema a griglia Bootstrap 4 funziona su più dispositivi:
Dispositivi extra piccoli (<576 px) | Piccoli dispositivi (≥576px) | Dispositivi medi (≥768px) | Dispositivi di grandi dimensioni (≥992 px) | Dispositivi extra large (≥1200px) | |
---|---|---|---|---|---|
Comportamento della griglia | Sempre orizzontale | Compresso all'inizio, orizzontale sopra i punti di interruzione | Compresso all'inizio, orizzontale sopra i punti di interruzione | Compresso all'inizio, orizzontale sopra i punti di interruzione | Compresso all'inizio, orizzontale sopra i punti di interruzione |
Larghezza massima del contenitore | Nessuno (automatico) | 540px | 720px | 960px | 1140px |
Classi di classe | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
# di colonne | 12 | 12 | 12 | 12 | 12 |
Larghezza grondaia | 30px (15px su ogni lato di una colonna) |
30px (15px su ogni lato di una colonna) |
30px (15px su ogni lato di una colonna) |
30px (15px su ogni lato di una colonna) |
30px (15px su ogni lato di una colonna) |
Inseribile | sì | sì | sì | sì | sì |
Ordinamento delle colonne | sì | sì | sì | sì | sì |
Struttura a griglia di base
Di seguito è riportata la struttura di base della griglia Bootstrap 4:
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>
Esempio di sistema a rete
Di seguito è riportato un esempio di sistema a griglia Bootstrap 4:
Esempio
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</style>
.grid_system div[class^="col"] {
border: 1px solid white;
background: #e4dcdc;
text-align: center;
padding-top: 5px;
padding-bottom: 5px
}
</style>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
</div>
<div class = "row">
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
</div>
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
</div>
<div class = "row">
<div class =" col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-5">.col-sm-5</div>
<div class = "col-sm-7">.col-sm-7</div>
</div>
<div class = "row">
<div class = "col-sm-6">.col-sm-6</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-12">.col-sm-12</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
Produrrà il seguente risultato:
Produzione
Creazione di due layout di colonna
L'esempio seguente descrive la creazione di due layout di colonna per dispositivi piccoli, medi e grandi. Su piccoli dispositivi come i telefoni cellulari, le colonne diventeranno automaticamente orizzontali per impostazione predefinita.
Esempio
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-6">.col-sm-6</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-7">.col-sm-7</div>
<div class = "col-sm-5">.col-sm-5</div>
</div>
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-8">.col-sm-8</div>
</div>
<div class = "row">
<div class = "col-sm-9">.col-sm-9</div>
<div class = "col-sm-3">.col-sm-3</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
Produrrà il seguente risultato:
Produzione
Creazione di layout a tre colonne
L'esempio seguente descrive la creazione di layout a tre colonne per dispositivi di medie e grandi dimensioni. Se la risoluzione dello schermo è maggiore o uguale a 992 pixel, verrà visualizzato in modalità orizzontale nei tablet e, come al solito, verrà visualizzato in modalità verticale.
Esempio
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = " stylesheet" href = " https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
</div>
<div class = "row">
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-5">.col-sm-5</div>
</div>
<div class = "row">
<div class = "col-sm-2">.col-sm-2</div>
<div class = "col-sm-8">.col-sm-8</div>
<div class = "col-sm-2">.col-sm-2</div>
</div>
<div class = "row">
<div class = "col-sm-2">.col-sm-2</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-7">.col-sm-7</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
Produrrà il seguente risultato:
Produzione
Descrizione
Bootstrap 4 utilizza la raccolta di metodi di contenuto per visualizzare il testo, blocchi di codice, immagini reattive, dati in un formato tabulare ecc. Sulla pagina web.
La seguente tabella elenca i metodi di contenuto che puoi usare per manipolare Bootstrap 4 -
S.No. | Metodi e descrizione |
---|---|
1 | La funzione tipografia crea intestazioni, paragrafi, elenchi e altri elementi in linea. |
2 | Viene utilizzato per visualizzare blocchi di codice in linea e multilinea nel documento. |
3 | Bootstrap 4 fornisce il supporto per le immagini utilizzando il tag <img>. |
4 | Le tabelle vengono utilizzate per visualizzare i dati in formato tabulare. |
5 | L'elemento figure specifica il contenuto insieme alle immagini correlate con una didascalia opzionale. |
Descrizione
Bootstrap 4 utilizza la raccolta di metodi di contenuto per visualizzare il testo, blocchi di codice, immagini reattive, dati in un formato tabulare ecc. Sulla pagina web.
La seguente tabella elenca i metodi di contenuto che puoi usare per manipolare Bootstrap 4 -
S.No. | Metodi e descrizione |
---|---|
1 | Il componente di avviso specifica il messaggio predefinito per le azioni dell'utente. |
2 | I badge vengono utilizzati per evidenziare le informazioni aggiuntive al contenuto. |
3 | Viene utilizzato per mostrare le informazioni basate sulla gerarchia per un sito. |
4 | Bootstrap fornisce un pulsante cliccabile per inserire contenuti come testo e immagini. |
5 | I gruppi di pulsanti consentono di impilare più pulsanti insieme su una singola riga. |
6 | La scheda è un contenitore di contenuti che mostra una scatola delimitata con un po 'di imbottitura intorno. |
7 | Carousel è un modo flessibile e reattivo per aggiungere un dispositivo di scorrimento al tuo sito. |
8 | Viene utilizzato per mostrare o nascondere il contenuto. |
9 | I menu a discesa possono essere utilizzati per visualizzare i collegamenti in un formato elenco. |
10 | L'elemento form viene utilizzato per raccogliere input dall'utente. |
11 | Utilizzando i gruppi di input è possibile anteporre e aggiungere facilmente testo o pulsanti agli input basati su testo. |
12 | Aumenta la dimensione delle intestazioni e aggiunge molto margine per il contenuto della pagina di destinazione. |
13 | Modal è una finestra figlia che è sovrapposta alla sua finestra genitore. |
14 | Bootstrap fornisce elementi di navigazione per il tuo sito in un menu orizzontale. |
15 | Navbar fornisce le intestazioni di navigazione per la tua applicazione o sito. |
16 | L'impaginazione viene utilizzata per dividere il contenuto correlato su più pagine. |
17 | Il popover è simile al suggerimento, offrendo una vista estesa completa di un'intestazione. |
18 | La barra di avanzamento mostra l'avanzamento di un processo con barre in pila, sfondi animati ed etichette di testo. |
19 | Scrollspy viene utilizzato per indicare il collegamento attualmente attivo nel menu in base alla posizione di scorrimento. |
20 | I suggerimenti sono utili quando è necessario descrivere un collegamento. |
Descrizione
Bootstrap 4 utilizza una raccolta di utilità per la visualizzazione dei bordi, il colore del testo, l'incorporamento di video ecc. Sulla pagina web.
La tabella seguente elenca i tipi di utilità che è possibile utilizzare per manipolare Bootstrap 4 -
S.No. | Metodi e descrizione |
---|---|
1 | L'utilità Border fornisce lo stile, il colore e il raggio del bordo di un elemento. |
2 | Clearfix viene utilizzato per cancellare il contenuto flottato e chiudere l'icona per eliminare il contenuto. |
3 | Utilizza le classi contestuali per modificare il colore del testo, del collegamento e del colore di sfondo di un elemento. |
4 | Viene utilizzato per incorporare il video in una pagina utilizzando l'elemento <iframe>. |
5 | Viene utilizzato per far fluttuare un elemento a sinistra oa destra. |
6 | L'utilità ombra aggiunge ombra agli elementi e l'utilità spaziatura fornisce valori di margine o riempimento a un elemento. |
7 | È possibile rendere le dimensioni di un elemento larghe o alte utilizzando le utilità di larghezza e altezza. |
8 | Bootstrap fornisce utilità di testo per controllare l'allineamento, la trasformazione, il peso e altro ancora. |
9 | L'utilità Flex può essere utilizzata per gestire il layout, l'allineamento, le colonne della griglia, la navigazione e altri componenti della pagina. |
Descrizione
Bootstrap è un potente e popolare framework front-end mobile first per la creazione di siti mobile first reattivi sul web utilizzando framework HTML, CSS e JS.
La tabella seguente mostra le differenze in Bootstrap 3 e Bootstrap 4 -
S.No. | Componente | Bootstrap 3 | Bootstrap 4 |
---|---|---|---|
1 | File sorgente CSS | DI MENO | SCSS |
2 | Sistema a griglia | Sistema a griglia a 4 livelli (xs, sm, md, lg) | Sistema a griglia a 5 livelli (xs, sm, md, lg, xl) |
3 | Unità CSS | px | rem |
4 | Dimensione del font | 14px | 16px |
5 | Struttura a discesa | Creato con <ul> e <li> | Creato con <ul> o <div> |
6 | Colonne di offset | col-md-offset-4 | offset-md-4 |
7 | immagini | .img-responsive class | .img-fluid class |
8 | Tabelle | Aggiungi la classe .table-responsive all'elemento genitore <div> | Aggiungi la classe .table-responsive all'elemento <table> |
9 | Glyphicons | Supportato | Non supportato |
10 | Oggetti multimediali | Utilizza classi per oggetti multimediali, come .media , .media-body , .media-object , .media- header , .media-right , .media-left , .media-list e .media-body | Utilizza solo la classe .media per gli oggetti multimediali. |
11 | Tabelle scure / inverse | Non supportato | Utilizza la classe .table-dark per creare tabelle scure / inverse |
12 | Caselle di controllo e pulsanti di opzione | Consente di visualizzare le caselle di controllo e pulsanti di opzione utilizzando .radio , .radio-linea , .checkbox o .checkbox-inline classi | Visualizza le caselle di controllo e pulsanti di opzione utilizzando .Form-controllo , .Form-check-label , .Form-check-ingresso , o .Form-check-in linea classi |
13 | Dimensione controllo modulo | Aumentare o diminuire dimensione di un controllo di input utilizzando .input-lg e .input-sm classi | Aumentare o diminuire dimensioni di un controllo di input utilizzando .Form-control-lg e .Form-control-sm classi |
14 | Testo guida | Visualizza il testo della guida utilizzando la classe .help-block | Visualizza il testo della guida utilizzando la classe .form-text |
15 | Stili | Utilizza le classi .btn-default e .btn-info sui pulsanti | Utilizza le classi .btn-secondary , .btn-light e .btn-dark sui pulsanti e rilascia la classe .btn-default . |
16 | Pulsanti di contorno | Non supportato | Dai uno stile ai pulsanti con il colore del contorno utilizzando .btn-outline- * class |
17 | Dimensioni dei pulsanti | La classe .btn-xs è disponibile | Disponibile solo per le classi .btn-sm e .btn-lg e abbandonata la classe .btn-xs |
18 | Intestazioni di menu | Usa la classe .dropdown-header per il tag li | Usa la classe .dropdown-header per i tag h1 - h2 |
19 | Divisori | Usa la classe .divider nell'elemento li | Utilizza la classe .dropdown-divider nell'elemento div |
20 | Navbar fisse | Fissare la barra di navigazione in alto o in basso utilizzando .navbar-fisso-top e -bottom-.navbar fisso classi | Fissare la barra di navigazione in alto o in basso utilizzando .fixed-top e .fixed-bottom classi |
21 | Cercapersone | Allineare le pagine utilizzando .previous e .Next classi | Non supportato |
22 | Jumbotron a tutta larghezza | Non utilizza la classe .jumbotron-fluid su jumbotron a larghezza intera | Utilizza la classe .jumbotron-fluid per jumbotron a tutta larghezza |
23 | Elemento carosello | Utilizza la classe .item per gli elementi del carosello. | Utilizza la classe .carousel-item per gli elementi del carousel. |
24 | Pozzetti, pannelli e miniature | Supportato | Non supportato. Usa invece le carte |
25 | Nav in linea | Non include la classe .nav-inline | Visualizza i nav come in linea utilizzando la classe .nav-inline |