Tutorial di base di Bootstrap4

Colori Bootstrap4 Sistema di griglia Bootstrap4

Formattazione del testo Bootstrap4

Impostazioni predefinite di Bootstrap 4

Predefinita di Bootstrap 4 La dimensione del carattere è 16px, La line-height è 1.5.

La famiglia di caratteri predefinita è "Helvetica Neue", Helvetica, Arial, sans-serif.

Inoltre, tutti gli elementi <p>. margin-top: 0, margin-bottom: 1rem (16px).

<h1> - <h6>

Bootstrap definisce lo stile di tutti i titoli HTML (da h1 a h6). Ecco un esempio:

esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Titolo Bootstrap h1　(2.5rem = 40px)</h1>
　　<h2>Titolo Bootstrap h2　(2rem = 32px)</h2>
　　<h2>Titolo Bootstrap h2　(1.75rem = 28px)</h2>
　　<h4>Titolo Bootstrap h4　(1.5rem = 24px)</h4>
　　<h5>Titolo Bootstrap h5　(1.25rem = 20px)</h5>
　　<h6>Titolo Bootstrap h6　(1rem = 16px)</h6>
</div>
</body>
</html>

prova a vedere ‹/›

Classi di titoli Display

Bootstrap fornisce anche quattro classi Display per controllare lo stile dei titoli: .display-1, .display-2, .display-3, .display-4。

esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Titolo Display</h1>
　　<p>I titoli Display possono produrre un font più grande e più spesso.</p>
　　<h1 class="display-1">Display 1</h1>
　　<h1 class="display-2">Display 2</h1>
　　<h1 class="display-3">Display 3</h1>
　　<h1 class="display-4">Display 4</h1>
</div>
</body>
</html>

prova a vedere ‹/›

<small>

In Bootstrap 4, l'elemento HTML <small> è usato per creare testi di dimensione più piccola e colore più chiaro:

esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Titolo di testo più piccolo</h1>
　　<p>Il elemento small è usato per testi di dimensione più piccola e colore più chiaro:</p>　　　　　　　
　　<h1>Titolo h1　Sottotitolo <small></small></h1>
　　<h2>Titolo h2　Sottotitolo <small></small></h2>
　　<h2>Titolo h2　Sottotitolo <small></small></h2>
　　<h4>Titolo h4　Sottotitolo <small></small></h4>
　　<h5>Titolo h5　Sottotitolo <small></small></h5>
　　<h6>Titolo h6　Sottotitolo <small></small></h6>
</div>
</body>
</html>

prova a vedere ‹/›

<mark>

Bootstrap 4 definisce <mark> come sfondo giallo e con un leggero spaziotesto:

esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Testo in evidenza</h1>　　　　
　　<p>Usare l'elemento mark per <mark>eccellere</mark> il testo.</p>
</div>
</body>
</html>

prova a vedere ‹/›

<abbr>

Bootstrap 4 definisce lo stile dell'elemento HTML <abbr> come una linea tratteggiata in basso nel testo:

esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Abbreviazioni</h1>
　　<p>Il elemento abbr viene utilizzato per contrassegnare abbreviazioni o iniziali:</p>
　　<p><abbr title="World Health Organization">WHO</abbr> è stata fondata nel 1948.</p>
</div>
</body>
</html>

prova a vedere ‹/›

<blockquote>

Per i contenuti citati, è possibile aggiungere la classe .blockquote all'interno di <blockquote>

esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Blockquote</h1>
　　<p>Il elemento blockquote viene utilizzato per presentare contenuti di altre fonti:</p>
　　<blockquote class="blockquote">
　　　　<p>Nel corso degli ultimi 50 anni, la World Wildlife Fund (WWF) ha lavorato per proteggere il futuro della natura. La World Wildlife Fund (WWF) è l'organizzazione leader nella protezione della natura, operando in 100 paesi/regioni,
　　　　<p>Ha ricevuto il supporto di 1,2 milioni di membri negli Stati Uniti e di circa 5 milioni di membri in tutto il mondo.</p>
　　　　<footer class="blockquote-footer">Dal sito web di WWF</footer>
　　</blockquote>
</div>
</body>
</html>

prova a vedere ‹/›

<dl>

Bootstrap 4 definisce lo stile dell'elemento HTML <dl> come segue:

esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Lista di descrizioni</h1>　　　　
　　<p>Il elemento dl rappresenta una lista di descrizioni:</p>
　　<dl>
　　　　<dt>Caffè</dt>
　　　　<dd>- Bevande calde nere</dd>
　　　　<dt>Latte</dt>
　　　　<dd>- Bevande fredde bianche</dd>
　　</dl>　　　　　
</div>
</body>
</html>

prova a vedere ‹/›

<code>

Bootstrap 4 definisce lo stile dell'elemento HTML <code> come segue:

esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Frammenti di codice</h1>
　　<p>Possono essere messi alcuni elementi di codice all'interno dell'elemento <code>.</p>
　　<p>Le seguenti elementi HTML: <code>span</code>, <code>section</code> e <code>div</code> vengono utilizzati per definire parti del contenuto del documento.</p>
</div>
</body>
</html>

prova a vedere ‹/›

<kbd>

Bootstrap 4 definisce lo stile dell'elemento HTML <kbd> come segue:

esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Inserimento da tastiera</h1>
　　<p>Per indicare l'input tipico di tastiera, utilizzare l'elemento kbd:</p>
　　<p>Usare <kbd>ctrl + p</kbd> per aprire la finestra di dialogo "Stampa".</p>
</div>
</body>
</html>

prova a vedere ‹/›

<pre>

Bootstrap 4 definisce lo stile dell'elemento HTML <pre> come segue:

esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>codice multirighe</h1>
<p>Per codice multirighe, utilizzare l'elemento pre:</p>
<pre>
testo dell'elemento iniziale
visualizzato con una larghezza fissa
fonte, mantenendo
spazio e
carattere di nuova linea.
</pre>
</div>
</body>
</html>

prova a vedere ‹/›

più classi di formattazione

La tabella seguente fornisce esempi di più classi di formattazione di Bootstrap4:

nome della classe	descrizione	esempio
.font-weight-bold	testo in grassetto	Prova un po'
.font-weight-normal	testo normale	Prova un po'
.font-weight-light	testo più sottile	Prova un po'
.font-italic	testo in corsivo	Prova un po'
.lead	rendere il paragrafo più evidente	Prova un po'
.small	specificare un testo più piccolo (il 85% dell'elemento genitore)	Prova un po'
.text-left	allineato a sinistra	Prova un po'
.text-center	centrato	Prova un po'
.text-right	Allineamento a destra	Prova un po'
.text-justify	Imposta l'allineamento del testo, il testo che supera lo schermo nel paragrafo si riavvolge automaticamente	Prova un po'
.text-nowrap	Non andare a capo per il testo che supera lo schermo	Prova un po'
.text-lowercase	Imposta il testo in minuscolo	Prova un po'
.text-uppercase	Imposta il testo in maiuscolo	Prova un po'
.text-capitalize	Imposta la prima lettera di una parola in maiuscolo	Prova un po'
.initialism	Mostra il testo contenuto nell'elemento <abbr> in caratteri minuscoli e può convertire le lettere minuscole in maiuscole	Prova un po'
.list-unstyled	Rimuovi lo stile predefinito della lista, allineamento a sinistra degli elementi della lista (in <ul> e <ol>). Questa classe si applica solo agli elementi della lista figli diretti 　　(Se si desidera rimuovere gli elementi elencati nidificati, è necessario utilizzare questo stile negli elenchi nidificati)	Prova un po'
.list-inline	Posiziona tutti gli elementi della lista in una riga	Prova un po'
.pre-scrollable	Rendi <pre> elemento scorrabile, l'area massima di altezza del blocco di codice è di 340px, una volta superata questa altezza, verrà visualizzata una barra di scorrimento sull'asse Y	Prova un po'

Colori Bootstrap4 Sistema di griglia Bootstrap4