Guida di base Bootstrap4

Pulsanti Bootstrap4 Jumbotron Bootstrap4

Casella di avviso Bootstrap4

Bootstrap 4 può implementare facilmente le caselle di avviso informative.

La casella di avviso può utilizzare la classe .alert, seguita da .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light o .alert-dark per ottenere:

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">
　　<h2>Casella di avviso</h2>
　　<p>La casella di avviso può utilizzare la classe .alert, seguita da una classe di colore specifico per ottenere significati specifici:</p>
　　<div class="alert alert-success">
　　　　<strong>Successo!</strong> Informazione di conferma dell'operazione riuscita.
　　</div>
　　<div class="alert alert-info">
　　　　<strong>Informazione!</strong> Presta attenzione a questa informazione.
　　</div>
　　<div class="alert alert-warning">
　　　　<strong>Avviso!</strong> Informazione di avviso impostata.
　　</div>
　　<div class="alert alert-danger">
　　　　<strong>Errore!</strong> Operazione fallita
　　</div>
　　<div class="alert alert-primary">
　　　　<strong>Prima scelta!</strong> Questo è un'importante informazione operativa.
　　</div>
　　<div class="alert alert-secondary">
　　　　<strong>Secondario!</strong> Mostra alcune informazioni non importanti.
　　</div>
　　<div class="alert alert-dark">
　　　　<strong>Grigio scuro!</strong> Casella di avviso grigio scuro.
　　</div>
　　<div class="alert alert-light">
　　　　<strong>Grigio chiaro!</strong> Casella di avviso grigio chiaro.
　　</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Aggiungi collegamenti alla casella di avviso

Aggiungi la classe alert-link ai tag di collegamento all'interno della casella di avviso per impostare i collegamenti di colore corrispondente alla casella di avviso:

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">
　　<h2>Aggiungi link al riquadro di avviso</h2>
　　<p>Aggiungi la classe "alert-link" ai tag di link all'interno del riquadro di avviso per impostare i link di colore che corrisponde al riquadro di avviso:</p>
　　<div class="alert alert-success">
　　　　<strong>Successo!</strong> Dovresti leggere attentamente <a href="#" class="alert-link">questa informazione</a>.
　　</div>
　　<div class="alert alert-info">
　　　　<strong>Informazione!</strong> Dovresti leggere attentamente <a href="#" class="alert-link">questa informazione</a>.
　　</div>
　　<div class="alert alert-warning">
　　　　<strong>Avviso!</strong> Dovresti leggere attentamente <a href="#" class="alert-link">questa informazione</a>.
　　</div>
　　<div class="alert alert-danger">
　　　　<strong>Errore!</strong> Dovresti leggere attentamente <a href="#" class="alert-link">questa informazione</a>.
　　</div>
　　<div class="alert alert-primary">
　　　　<strong>Prima scelta!</strong> Dovresti leggere attentamente <a href="#" class="alert-link">questa informazione</a>.
　　</div>
　　<div class="alert alert-secondary">
　　　　<strong>Secondario!</strong> Dovresti leggere attentamente <a href="#" class="alert-link">questa informazione</a>.
　　</div>
　　<div class="alert alert-dark">
　　　　<strong>Grigio scuro!</strong> Dovresti leggere attentamente <a href="#" class="alert-link">questa informazione</a>.
　　</div>
　　<div class="alert alert-light">
　　　　<strong>Grigio!</strong> Dovresti leggere attentamente <a href="#" class="alert-link">questa informazione</a>.
　　</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Chiudi finestra di avviso

Puoi aggiungere .alert-dismissible al div della finestra di avviso classi, poi aggiungi e data-dismiss="alert" al link del pulsante di chiusura classi per impostare l'operazione di chiusura della finestra di avviso.

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.1.0/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.12.5/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Chiudi finestra di avviso</h2>
　　<p>Puoi aggiungere la classe .alert-dismissible al div della finestra di avviso e aggiungere le classi class="close" e data-dismiss="alert" al link del pulsante di chiusura per impostare l'operazione di chiusura della finestra di avviso.</p>
　　<div class="alert alert-success alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Successo!</strong> Informazione di conferma dell'operazione riuscita.
　　</div>
　　<div class="alert alert-info alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Informazione!</strong> Presta attenzione a questa informazione.
　　</div>
　　<div class="alert alert-warning alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Avviso!</strong> Informazione di avviso impostata.
　　</div>
　　<div class="alert alert-danger alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Errore!</strong> Operazione fallita.
　　</div>
　　<div class="alert alert-primary alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Prima scelta!</strong> Questo è un'importante informazione operativa.
　　</div>
　　<div class="alert alert-secondary alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Secondario!</strong> Mostra alcune informazioni non importanti.
　　</div>
　　<div class="alert alert-dark alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Grigio scuro!</strong> Casella di avviso grigio scuro.
　　</div>
　　<div class="alert alert-light alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Grigio chiaro!</strong> Casella di avviso grigio chiaro.
　　</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Avviso: × (×) è un carattere HTML entity utilizzato per rappresentare l'operazione di chiusura, non il carattere "x".

Animazione finestra di avviso

.fade e .show classi vengono utilizzate per impostare l'effetto di sfumatura in uscita e in entrata della finestra di avviso quando viene chiusa:

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.1.0/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.12.5/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Animazione della finestra di avviso</h2>
　　<p>.fade e .show classi vengono utilizzate per impostare l'effetto di sfumatura dell'uscita e dell'ingresso della finestra di avviso:</p>
　　<div class="alert alert-success alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Successo!</strong> Informazione di conferma dell'operazione riuscita.
　　</div>
　　<div class="alert alert-info alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Informazione!</strong> Presta attenzione a questa informazione.
　　</div>
　　<div class="alert alert-warning alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Avviso!</strong> Informazione di avviso impostata.
　　</div>
　　<div class="alert alert-danger alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Errore!</strong> Operazione fallita.
　　</div>
　　<div class="alert alert-primary alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Prima scelta!</strong> Questo è un'importante informazione operativa.
　　</div>
　　<div class="alert alert-secondary alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Secondario!</strong> Mostra alcune informazioni non importanti.
　　</div>
　　<div class="alert alert-dark alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Grigio scuro!</strong> Casella di avviso grigio scuro.
　　</div>
　　<div class="alert alert-light alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Grigio chiaro!</strong> Casella di avviso grigio chiaro.
　　</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Pulsanti Bootstrap4 Jumbotron Bootstrap4