Bootstrap4 Tutoriel de base

Bootstrap4 Couleurs Bootstrap4 Système de grille

Bootstrap4 mise en page du texte

Bootstrap 4 paramètres par défaut

Bootstrap 4 par défaut font-size est 16px, line-height est 1.5。

font par défaut-family est "Helvetica Neue", Helvetica, Arial, sans-serif.

En outre, tous les éléments <p> margin-top: 0, margin-bottom: 1rem (16px).

<h1> - <h6>

Bootstrap définit tous les titres HTML (h1 au h6du style. Veuillez consulter l'exemple suivant :

exemple

!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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> h1　Titres Bootstrap (2.5rem =　40px)</h1>
　　<h2> h2　Titres Bootstrap (2rem =　32px)</h2>
　　<h2> h2　Titres Bootstrap (1.75rem =　28px)</h2>
　　<h4> h4　Titres Bootstrap (1.5rem =　24px)</h4>
　　<h5> h5　Titres Bootstrap (1.25rem =　20px)</h5>
　　<h6> h6　Titres Bootstrap (1rem =　16px)</h6>
</div>
</body>
</html>

testez pour voir ‹/›

Classe de titre Display

Bootstrap fournit également quatre classes Display pour contrôler le style des titres: .display-1, .display-2, .display-3, .display-4。

exemple

!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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> Titres Display </h1>
　　<p>Les titres Display peuvent afficher des polices plus grandes et plus épaisses.</p>
　　<h1　class="display-1">Affichage　1</h1>
　　<h1　class="display-2">Affichage　2</h1>
　　<h1　class="display-3">Affichage　3</h1>
　　<h1　class="display-4">Affichage　4</h1>
</div>
</body>
</html>

testez pour voir ‹/›

<small>

Dans Bootstrap 4 Dans HTML, l'élément <small> est utilisé pour créer un texte de plus petite taille et de couleur plus claire :

exemple

!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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> Titre de texte plus petit </h1>
　　<p>l'élément small est utilisé pour un texte de plus petite taille et de couleur plus claire :/p>　　　　　　　
　　<h1> h1　Titre <small> sous-titre </small></h1>
　　<h2> h2　Titre <small> sous-titre </small></h2>
　　<h2> h2　Titre <small> sous-titre </small></h2>
　　<h4> h4　Titre <small> sous-titre </small></h4>
　　<h5> h5　Titre <small> sous-titre </small></h5>
　　<h6> h6　Titre <small> sous-titre </small></h6>
</div>
</body>
</html>

testez pour voir ‹/›

<mark>

Bootstrap 4 Définir <mark> pour un fond jaune et une marge intérieure certaine :

exemple

!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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> Texte mis en surbrillance </h1>　　　　
　　<p>Utilisez l'élément mark pour <mark> mettez en surbrillance </mark> du texte :/mark> texte.</p>
</div>
</body>
</html>

testez pour voir ‹/›

<abbr>

Bootstrap 4 Définir le style de l'élément HTML <abbr> pour afficher une bordure fine en dessous du texte :

exemple

!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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> Abréviations </h1>
　　<p>l'élément abbr est utilisé pour marquer des abréviations ou des acronymes :/p>
　　<p><abbr title="Organisation mondiale de la santé">OMS</abbr> fondée en1948ans.</p>
</div>
</body>
</html>

testez pour voir ‹/›

<blockquote>

Pour le contenu cité, vous pouvez ajouter la classe .blockquote sur <blockquote> :

exemple

!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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> Citations </h1>
　　<p>l'élément blockquote est utilisé pour présenter du contenu d'autres sources :/p>
　　<blockquote class="blockquote">
　　　　<p>5Depuis 0 ans, la Fondation mondiale pour la nature (WWF) travaille à protéger l'avenir de la nature. La Fondation mondiale pour la nature (WWF) est l'organisation de protection de la nature la plus avancée au100 pays/régions,
　　　　a travaillé dans les120 membres et près de500 membres de soutien </p>
　　　　<footer class="blockquote-footer">De la site Web de WWF </footer>
　　</blockquote>
</div>
</body>
</html>

testez pour voir ‹/›

<dl>

Bootstrap 4 Définir le style de l'élément HTML <dl> comme suit:

exemple

!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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> Liste de description </h1>　　　　
　　<p>l'élément dl représente une liste de description :/p>
　　<dl>
　　　　<dt> café </dt>
　　　　<dd>-　Boissons chaudes </dd>
　　　　<dt> lait </dt>
　　　　<dd>-　Boissons froides </dd>
　　</dl>　　　　　
</div>
</body>
</html>

testez pour voir ‹/›

<code>

Bootstrap 4 Définir le style de l'élément HTML <code> comme suit:

exemple

!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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>fragment de code</h1>
　　<p>Vous pouvez mettre certains éléments de code à l'intérieur de l'élément <code> :</p>
　　<p>Les éléments HTML suivants :　<code>span</,　<code>section</,　et　<code>div</code> pour définir une partie du contenu du document.</p>
</div>
</body>
</html>

testez pour voir ‹/›

kbd

Bootstrap 4 Définissez le style de l'élément HTML <kbd> comme suit:

exemple

!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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>entrée au clavier</h1>
　　<p>Pour indiquer une entrée généralement tapée au clavier, utilisez l'élément kbd :</p>
　　<p>Utilisez <kbd>ctrl　+　p</kbd>ouvrir la boîte de dialogue "Imprimer".</p>
</div>
</body>
</html>

testez pour voir ‹/›

<pre>

Bootstrap 4 Définissez le style de l'élément HTML <pre> comme suit:

exemple

!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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>code multiligne</h1>
<p> Pour le code multiligne, utilisez l'élément pre :</p>
<pre>
texte dans l'élément préfixe
affiché avec une largeur fixe
police, tout en maintenant
espace et
retour à la ligne.
</pre>
</div>
</body>
</html>

testez pour voir ‹/›

plus de classes de mise en page

Le tableau suivant fournit Bootstrap4 plus d'exemples de mise en page :

nom de la classe	description	exemple
.font-poids-bold	texte en gras	Essayer
.font-poids-normal	texte normal	Essayer
.font-poids-light	texte plus fin	Essayer
.font-italic	texte en italique	Essayer
.lead	fait ressortir le paragraphe	Essayer
.small	spécifiez un texte plus petit (pour l'élément parent 85% )	Essayer
.text-gauche	aligné à gauche	Essayer
.text-centré	Centré	Essayer
.text-right	Alignement à droite	Essayer
.text-justify	Définir l'alignement du texte, le texte qui dépasse l'écran dans le paragraphe se brise automatiquement	Essayer
.text-nowrap	Ne pas sauter de ligne pour la partie qui dépasse l'écran dans le paragraphe	Essayer
.text-lowercase	Définir le texte en minuscules	Essayer
.text-uppercase	Définir le texte en majuscules	Essayer
.text-capitalize	Définir la majuscule de la première lettre du mot	Essayer
.initialism	Afficher le texte dans l'élément <abbr> en police de petite taille et convertir les lettres minuscules en majuscules	Essayer
.list-unstyled	Supprimer les styles de liste par défaut, alignement à gauche des éléments de liste (dans <ul> et <ol>). Cette classe ne s'applique qu'aux éléments de liste enfants directs 　　(Si vous devez supprimer les éléments de liste imbriqués, vous devez utiliser ce style dans les listes imbriquées)	Essayer
.list-inline	Placer tous les éléments de liste sur une même ligne	Essayer
.pre-scrollable	Rend <pre> élément défilable, la zone maximale de hauteur du bloc de code est340px, une fois que la hauteur dépasse cette valeur, une barre de défilement apparaît sur l'axe Y	Essayer

Bootstrap4 Couleurs Bootstrap4 Système de grille