Bootstrap4 Tutoriel de base

Bootstrap4 Cadre d'indication des informations

Bootstrap 4 Il est facile de réaliser un cadre d'indication des informations.

Vous pouvez utiliser la classe .alert, puis ajouter .alert pour réaliser :-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light ou .alert-en utilisant la classe dark :

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</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">
　　<h2Indicateur de message </h2>
　　<p> Vous pouvez utiliser la classe .alert, puis ajouter une classe de couleur spécifique pour réaliser :/p>
　　<div　class="alert　alert-success">
　　　　<strong>成功!/strong>　指定操作成功提示信息。
　　</div>
　　<div　class="alert　alert-info">
　　　　<strong>信息!/strong>　请注意这个信息。
　　</div>
　　<div　class="alert　alert-warning">
　　　　<strong>警告!/strong>　设置警告信息。
　　</div>
　　<div　class="alert　alert-danger">
　　　　strong>Erreur !/Opération échouée <strong>
　　</div>
　　<div　class="alert　alert-primary">
　　　　strong>Primaire !/strong>　C'est une information opérationnelle importante.
　　</div>
　　<div　class="alert　alert-secondary">
　　　　strong>Secondaire !/strong>　Affichez des informations secondaires.
　　</div>
　　<div　class="alert　alert-dark">
　　　　<strong>Obscur !/strong>　Boîte de message foncée.
　　</div>
　　<div　class="alert　alert-light">
　　　　<strong>Clair !/strong>Boîte de message pâle.
　　</div>
</div>
</body>
</html>

Voyons voir ‹/›

Ajouter un lien dans l'indicateur de message

Ajoutez la classe alert à l'étiquette de lien dans le cadre de l'indicateur de message :-dans la classe de lien pour définir la couleur de l'indicateur de message :

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</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">
　　<h2Ajouter un lien dans l'indicateur de message </h2>
　　<p> Ajoutez la classe alert à l'étiquette de lien dans le cadre de l'indicateur de message :-dans la classe de lien pour définir la couleur de l'indicateur de message : </p>
　　<div　class="alert　alert-success">
　　　　<strong>成功!/Vous devriez lire attentivement <a href="#" class="alert-link>ce message</a>.
　　</div>
　　<div　class="alert　alert-info">
　　　　<strong>信息!/Vous devriez lire attentivement <a href="#" class="alert-link>ce message</a>.
　　</div>
　　<div　class="alert　alert-warning">
　　　　<strong>警告!/Vous devriez lire attentivement <a href="#" class="alert-link>ce message</a>.
　　</div>
　　<div　class="alert　alert-danger">
　　　　strong>Erreur !/Vous devriez lire attentivement <a href="#" class="alert-link>ce message</a>.
　　</div>
　　<div　class="alert　alert-primary">
　　　　strong>Primaire !/Vous devriez lire attentivement <a href="#" class="alert-link>ce message</a>.
　　</div>
　　<div　class="alert　alert-secondary">
　　　　strong>Secondaire !/Vous devriez lire attentivement <a href="#" class="alert-link>ce message</a>.
　　</div>
　　<div　class="alert　alert-dark">
　　　　<strong>Obscur !/vous devriez lire attentivement <a href="#" class="alert-link>ce message</a>.
　　</div>
　　<div　class="alert　alert-light">
　　　　Gris !</Vous devriez lire attentivement <a href="#" class="alert-link>ce message</a>.
　　</div>
</div>
</body>
</html>

Voyons voir ‹/›

Fermer la boîte de dialogue

On peut ajouter .alert-dismissible class, puis ajoutez et data-dismiss="alert" class pour définir l'opération de fermeture de la boîte de dialogue。

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</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>Fermer la boîte de dialogue</h2>
　　<p>On peut ajouter .alert-class="dismissible", puis ajoutez class="close" et data-dismiss="alert" class pour définir l'opération de fermeture de la boîte de dialogue.</p>
　　<div　class="alert　alert-success alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>成功!/strong>　指定操作成功提示信息。
　　</div>
　　<div　class="alert　alert-info alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>信息!/strong>　请注意这个信息。
　　</div>
　　<div　class="alert　alert-warning alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>警告!/strong>　设置警告信息。
　　</div>
　　<div　class="alert　alert-danger alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>Erreur !/strong>　Opération échouée.
　　</div>
　　<div　class="alert　alert-primary　alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>Primaire !/strong>　C'est une information opérationnelle importante.
　　</div>
　　<div　class="alert　alert-secondary　alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>Secondaire !/strong>　Affichez des informations secondaires.
　　</div>
　　<div　class="alert　alert-dark　alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>Obscur !/strong>　Boîte de message foncée.
　　</div>
　　<div　class="alert　alert-light　alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>Clair !/strong>Boîte de message pâle.
　　</div>
</div>
</body>
</html>

Voyons voir ‹/›

Avis: × (×) est un caractère HTML entité, utilisé pour représenter l'opération de fermeture, plutôt que le lettre "x".

Animation de la boîte de dialogue

.fade et .show sont utilisées pour définir l'effet de fondu et d'apparition de la boîte de dialogue lors de sa fermeture :

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</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>Animation de la boîte de dialogue</h2>
　　<p>.fade et .show sont utilisées pour définir l'effet de fondu et d'apparition de la boîte de dialogue lors de sa fermeture :</p>
　　<div　class="alert　alert-success alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>成功!/strong>　指定操作成功提示信息。
　　</div>
　　<div　class="alert　alert-info alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>信息!/strong>　请注意这个信息。
　　</div>
　　<div　class="alert　alert-warning alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>警告!/strong>　设置警告信息。
　　</div>
　　<div　class="alert　alert-danger alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>Erreur !/strong>　Opération échouée.
　　</div>
　　<div　class="alert　alert-primary　alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>Primaire !/strong>　C'est une information opérationnelle importante.
　　</div>
　　<div　class="alert　alert-secondary　alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>Secondaire !/strong>　Affichez des informations secondaires.
　　</div>
　　<div　class="alert　alert-dark　alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>Obscur !/strong>　Boîte de message foncée.
　　</div>
　　<div　class="alert　alert-light　alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>Clair !/strong>Boîte de message pâle.
　　</div>
</div>
</body>
</html>

Voyons voir ‹/›

Bootstrap4 Bouton Bootstrap4 Jumbotron