Exemples de styles de Bootstrap

Exemples d'utilisation de styles de Bootstrap SCI6306 Automne 2023

Vous retrouverez sur cette page quelques exemples d'utilisation de styles de Bootstrap 5, organisés autour de 4 thématiques, qui pourraient être utilisés dans le cadre du volet C du projet de session. Ceci ne représente qu'une mince portion de ce que Bootstrap offre. N'hésitez pas au besoin à consulter les différentes ressources identifiées pour en découvrir d'autres! Pour chacun des exemples, vous trouverez premièrement le rendu visuel suivi du code utilisé dans un encadré gris (pour en faciliter le copier-coller) ainsi que des notes d'application. À la fin de chacune des sections thématiques, un ou des liens seront proposés pour consulter d'autres ressources sur la thématique présentée (encadré jaune).

Tableaux Encadrements

Éléments typographiques

Sous-titre intégré à un titre `small`

Exemple

Liste des cours [automne 2022]

Code HTML

<h4>Liste des cours <small>[automne 2022]</small></h4>

Notes d'application

L'élément small peut s'utiliser avec tous les niveaux de titre.

Surlignage de certains mots `mark`

Exemple

Liste des cours obligatoires.

Code HTML

<p>Liste des <mark>cours obligatoires</mark></p>

Notes d'application

L'élément mark peut s'utiliser dans d'autres balises que p (par exemple, dans une cellule de tableau ou dans un élément de liste).

Infobulle "stylée"

Exemple

Survolez-moi pour la voir!

Code HTML

<span data-bs-toggle="tooltip" data-bs-placement="bottom" title="Me voici. je suis jolie, non?">Survolez-moi pour la voir!</span>

Notes d'application

Les attributs data-bs-toogle et data-bs-placement peuvent s'utiliser dans n'importe quelle balise d'ouverture où l'on retrouve un attribut title. Le code ci-dessous pour activer cette fonctionnalité doit être présent à la fin de la page HTML. Dans le cadre du volet C du projet de session, ce code est déjà inclus dans le pied de page (fichier footer.htm). Il n'est ainsi pas nécessaire de l'ajouter.


<script>
	var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
	var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
		return new bootstrap.Tooltip(tooltipTriggerEl)
	})
</script>

Pour en savoir plus sur les éléments typographiques et les infobulles stylées

https://www.w3schools.com/bootstrap5/bootstrap_typography.php | https://www.w3schools.com/bootstrap5/bootstrap_tooltip.php

Formulaires (visuel de la trousse fournie)

Notes d'application

Afin d'obtenir le même visuel que l'on retrouve dans la trousse de départ, il faut s'assurer de bien respecter l'imbrication des éléments pour chacun des contrôles (div class="row mb-3" qui contient deux éléments, soit label class="form-label col-sm-2 fw-bold text-end" pour identifier l'étiquette devant le contrôle et div class="col-sm-10" qui contient le code du contrôle comme tel). Pour les codes des contrôles, il faut aussi prendre bien soin de refaire les choses telles qu'elles sont indiquées. Pour information col-sm-2 et col-sml-10 sont des classes qui gèrent la largeur des deux éléments.

Menu déroulant `select`

Exemple

Crème glacée préférée

Code HTML

<div class="row mb-3">	
	<!-- Étiquette devant le contrôle -->
	<label class="form-label col-sm-2 fw-bold text-end">Crème glacée préférée</label>

	<!-- Contrôle pour la saisie -->
	<div class="col-sm-10">
		<select name="question1" class="form-select">
			<option value="vanille">vanille</option>
			<option value="chocolat">chocolat</option>
		</select>
	</div>
</div>

Question à choix multiples `input type="radio"`

Exemple

Feuilles préférées

Feuilles de chêne

Feuilles de papier

Code HTML

<div class="row mb-3">	
	<!-- Étiquette devant le contrôle -->
	<label class="form-label col-sm-2 fw-bold text-end">Feuilles préférées</label>

	<!-- Contrôle pour la saisie -->
	<div class="col-sm-10">
		<div class="form-check">
			<input class="form-check-input" name="feuilles" id="f1" type="radio" value="chene" /><label class="form-check-label" for="f1">Feuilles de chêne</label>
		</div>
		<div class="form-check">
			<input class="form-check-input" name="feuilles" id="f2" type="radio" value="papier" /><label class="form-check-label" for="f2">Feuilles de papier</label>
		</div>
	</div>
</div>

Réponses multiples `input type="checkbox"`

Exemple

Extras pizza préférés

Fromage feta

Ananas

Code HTML

<div class="row mb-3">	
	<!-- Étiquette devant le contrôle -->
	<label class="form-label col-sm-2 fw-bold text-end">Extras pizza préférés</label>

	<!-- Contrôle pour la saisie -->
	<div class="col-sm-10">
		<div class="form-check">
			<input class="form-check-input" name="fromage" id="e1" type="checkbox" value="fromage" /><label class="form-check-label" for="e1">Fromage feta</label>
		</div>
		<div class="form-check">
			<input class="form-check-input" name="ananas" id="e2" type="checkbox" value="ananas" /><label class="form-check-label" for="e2">Ananas</label>
		</div>
	</div>
</div>

Boîte de texte court `input type="text"`

Exemple

Citation préférée

Code HTML

<div class="row mb-3">	
	<!-- Étiquette devant le contrôle -->
	<label class="form-label col-sm-2 fw-bold text-end">Citation préférée</label>

	<!-- Contrôle pour la saisie -->
	<div class="col-sm-10">
		<input class="form-control" name="citation" type="text" />
	</div>
</div>

Boîte de texte long `textarea`

Exemple

Saison préférée

Code HTML

<div class="row mb-3">	
	<!-- Étiquette devant le contrôle -->
	<label class="form-label col-sm-2 fw-bold text-end">Saison préférée</label>

	<!-- Contrôle pour la saisie -->
	<div class="col-sm-10">
		<textarea class="form-control" name="saison"></textarea>
	</div>
</div>

Pour en savoir plus sur les formulaires

https://www.w3schools.com/bootstrap5/bootstrap_forms.php

Tableaux

Exemple

Entête col. 1	Entête col. 2
Première valeur col. 1	Première valeur col. 2
Deuxième valeur col. 1	Deuxième valeur col. 2

Code HTML

<table class="table table-hover">
	<tr>
		<th>Entête col. 1</th>
		<th>Entête col. 2</th>
	</tr>
	<tr>
		<td>Première valeur col. 1</td>
		<td>Première valeur col. 2</td>
	</tr>
	<tr>
		<td>Deuxième valeur col. 1</td>
		<td>Deuxième valeur col. 2</td>
	</tr>
</table>

Notes d'application

L'ajout de la classe table à un tableau permet d'obtenir un visuel de base. Il est possible d'y ajouter d'autres classes spécifiques pour obtenir différents effets comme, dans l'exemple ci-dessus, la classe table-hover qui permet de griser une ligne lorsque la souris la survole. La classe spécifique table-striped permet d'obtenir un tableau où une ligne sur deux est grisée.

Pour en savoir plus sur les tableaux

https://www.w3schools.com/bootstrap5/bootstrap_tables.php

Encadrements

Exemple

Titre sur fond gris pâle

Corps sur fond blanc

Titre sur fond noir avec écriture blanche

Corps sur fond blanc

Uniquement du texte sans division en entête et en corps.

Code HTML

<div class="card text-dark bg-light mb-3">
	<div class="card-header fw-bold">Titre sur fond gris pâle</div>
	<div class="card-body bg-white">Corps sur fond blanc</div>
</div>

<div class="card text-white bg-dark">
	<div class="card-header fw-bold">Titre sur fond noir avec écriture blanche</div>
	<div class="card-body bg-white text-dark">Corps sur fond blanc</div>
</div>

<div class="card p-3">
	Uniquement du texte sans division en entête et en corps.
</div>

Notes d'application

Différentes classes spécifiques existent pour contrôler la couleur du fond et du contour.

Pour en savoir plus sur les encadrements

https://www.w3schools.com/bootstrap5/bootstrap_cards.php

Exemples d'utilisation de styles de Bootstrap SCI6306 Automne 2023

Éléments typographiques

Sous-titre intégré à un titre small

Liste des cours [automne 2022]

Surlignage de certains mots mark

Infobulle "stylée"

Formulaires (visuel de la trousse fournie)

Menu déroulant select

Question à choix multiples input type="radio"

Réponses multiples input type="checkbox"

Boîte de texte court input type="text"

Boîte de texte long textarea

Tableaux

Encadrements

Sous-titre intégré à un titre `small`

Surlignage de certains mots `mark`

Menu déroulant `select`

Question à choix multiples `input type="radio"`

Réponses multiples `input type="checkbox"`

Boîte de texte court `input type="text"`

Boîte de texte long `textarea`