Tutorial di base Bootstrap

Plugin Bootstrap

Barre di avanzamento Bootstrap Miniature Bootstrap

Avvisi Bootstrap

Questo capitolo spiega gli avvisi (Alerts) e le classi fornite da Bootstrap per gli avvisi. Gli avvisi (Alerts) offrono agli utenti un modo per definire lo stile dei messaggi. Forniscono informazioni di contesto feedback per operazioni utente tipiche.

Aggiungere un pulsante di chiusura opzionale alla finestra di avviso. Per creare un avviso rimovibile inline, utilizzare Plugin jQuery per avvisi (Alerts).

Creare un <div> e aggiungere un .alert class e quattro classi contestuali (cioè .alert-success, .alert-info, .alert-warning, .alert-dangerUno dei seguenti, per aggiungere una finestra di avviso di base. Ecco un esempio che dimostra questo:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Esempio Bootstrap - Avvisi (Alerts)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="alert alert-success">Successo! La submission è stata completata correttamente.</div>
<div class="alert alert-info">Informazione! Prenda nota di questa informazione.</div>
<div class="alert alert-warning">Attenzione! Non inviare.</div>
<div class="alert alert-danger">Errore! Effettuare alcune modifiche.</div>
</body>
</html>

Prova a vedere ‹/›

I risultati sono come segue:

Avvisi rimovibili (Dismissal Alerts)

Ecco i passaggi per creare un avviso rimovibile (Dismissal Alert):

creando un <div> e aggiungendo un .alert class e quattro classi contestuali (cioè .alert-success, .alert-info, .alert-warning, .alert-dangeruno di questi, per aggiungere una finestra di avviso di base.
Aggiungere anche all'elemento <div> la classe opzionale .alert-dismissible.
Aggiungere un pulsante di chiusura.

Ecco un esempio che dimostra questo:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Avvisi rimovibili (Dismissal Alerts)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="alert alert-success alert-dismissible">
	<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Successo! La submission è stata completata correttamente.
</div>
<div class="alert alert-info alert-dismissible">
	<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Attenzione! Prenda nota di questa informazione.
</div>
<div class="alert alert-warning alert-dismissible">
	<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Attenzione! Non inviare.
</div>
<div class="alert alert-danger alert-dismissable">
	<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Errore! Effettuare alcune modifiche.
</div>
</body>
</html>

Prova a vedere ‹/›

I risultati sono come segue:

Link negli Avvisi (Alerts)

I passaggi per creare link negli Avvisi (Alerts) sono i seguenti:

creando un <div> e aggiungendo un .alert class e quattro classi contestuali (cioè .alert-success, .alert-info, .alert-warning, .alert-dangeruno di questi, per aggiungere una finestra di avviso di base.
Usare .alert-link Classi di entità per fornire rapidamente link con colori corrispondenti.

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Link (Links) negli Avvisi (Alerts)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="alert alert-success">
	<a href="#" class="alert-link">Successo! La submission è stata completata correttamente.</a>
</div>
<div class="alert alert-info">
	<a href="#" class="alert-link">Attenzione! Prenda nota di questa informazione.</a>
</div>
<div class="alert alert-warning">
	<a href="#" class="alert-link">Attenzione! Non inviare.</a>
</div>
<div class="alert alert-danger">
	<a href="#" class="alert-link">Errore! Effettuare alcune modifiche.</a>
</div>
</body>
</html>

Prova a vedere ‹/›

I risultati sono come segue:

Barre di avanzamento Bootstrap Miniature Bootstrap