Bootstrap
felipe@IFT3225 Hiver 2025
En quelques mots
• Permet de styler vos pages
• sans sou rir en CSS
• avec plein de conventions de nommage
• Orienté applications mobiles
• O re un modèle de grille
• par conventions de nommage
• O re des composants (carrousels, jumbotron, etc)
• stylés CSS (avec un beau rendu par défaut)
• faciles à interfacer avec javascript
• Téléchargeable (.css / .js) ou supporté par BootstrapCDN
• Se lier à la version du Content Delivery Network est souvent un bon choix
3
ff
ff
ff
Hello world taille physique
zoom level when
(minimum) size du device (on
the page is rst
<!doctype html> of the viewport pourrait mettre
loaded
480 par ex.)
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> plein d'autres
<title>Bootstrap demo</title> contrôles
<link href="[Link]
rel="stylesheet" integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
</head>
<body> pas forcément nécessaire
<h1>Hello, world!</h1>
<script src="[Link]
integrity="sha384-
YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html> pour plus ... lire la norme css-viewport
4
fi
5
Besoin de javascript ?
6
Compatibilité ?
breakpoints
Utilisation en css
Containers
<div class="container"> taille xe
<!-- Content here -->
</div>
<div class="container-fluid">
100% du viewport
...
</div>
<div class="container-lg"> 100% du viewport jusqu'au breakpoint
... spéci é
</div>
10
fi
fi
Grille 12 colonnes, 6 breakpoints
<div class="container"> row
<div class="row">
<div class="col"> • ls immédiat d'un container
1 of 2 • encapsule des colonnes
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div> par défaut, les colonnes se
</div> partagent la place. Utilise le
</div>
modèle exbox
11
fi
fl
Grille
<margin><top>-<size>
<div class="container mt-1"> <style>
<div class="row"> .themed-grid-col {
<div class="col-3 themed-grid-col rounded">
1 of 2 paddingadding-top: 15px;
</div> padding-bottom: 15px;
<div class="col themed-grid-col rounded">
2 of 2 background-color: rgba(86, 61, 124, .15);
</div> border: 1px solid rgba(86, 61, 124, .2);
</div>
}
<div class="row">
</style>
<div class="col-3 themed-grid-col rounded">
1 of 3
</div>
<div class="col-6 themed-grid-col rounded">
2 of 3
</div>
<div class="col-3 themed-grid-col rounded">
3 of 3
</div>
</div> 12 colonnes max
</div>
12
Colonnes 1/3
Colonnes 2/3
eurk
Colonnes 3/3
ordonnancement
visuel des
colonnes
de 1 à 12, plus sans ordre.
Plus l'ordre est bas, plus il est
prioritaire. Voir aussi order-last
et order- rst.
fi
Spacing
gutter (espace entre éléments, ici de 5pt horizontal)
padding de 4pt horizontal
<div class="container px-4 text-center"> padding (espace entre
<div class="row gx-5"> le contenu et le bord)
<div class="col">
<div class="p-3">Custom column padding</div>
</div>
<div class="col">
<div class="p-3">Custom column padding</div>
</div>
</div>
</div>
contrôle des marges:
utiliser m (ex: m-3)
contrôle vertical:
<div class="row gy-5">
Tables 1/3
aussi: .table-striped-columns
Tables 2/3
Tables 3/3
margin bottom 3 Formes 1/2
Formes 2/2
<div class="mb-3">
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon3">
[Link]
</span>
<input type="text" class="form-control"
id="basic-url"
aria-describedby="basic-addon3 basic-addon4">
</div>
<div class="form-text" id="basic-addon4">
Example help text goes outside the input group.
</div>
</div>
Composants
breadcrumb popovers progress spinners
22 toasts pagination placeholders
Modal
• Ajout d'une boîte de dialogue qui se positionne sur le contenu de la page.
• Désactive le scrolling de la page pour le donner (au besoin) au contenu de la
boite de dialogue
• on/o sur l'élément associé au modal
• requiert le module javascript de bs
<div class="modal fade"
<button type="button" class="btn btn-primary" id="exampleModal"
data-bs-toggle="modal" tabindex="-1"
data-bs-target="#exampleModal"> role="dialog"
Launch demo modal aria-labelledby="exampleModalLabel"
</button> aria-hidden="true">
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
[Link] data-bs-dismiss="modal">Fermer
</button>
<button type="button" class="btn btn-primary">Sauver</button>
</div>
notez les valeurs de classe: modal-title, modal-content, modal-header, etc.
ff
Helpers
coloured links stacks streched links text truncation
Utilitaires
ex position shadows
fl
Exemple 1/3
<div class="container jumbotron text-center">
<div class="row">
<h1>[Link]</h1>
<p>Bienvenue à Moogle</p>
</div> sur 3 colonnes après deux colonnes
<div class="row">
<div class="col-md-3 themed-grid-col o set-md-2 over ow-y-scroll">
<h3><i class="bi-chat-square-text"></i> Notre garantie</h3>
<p>Nous respectons votre intimité et ne gardons aucune de vos données. Grâce à
nous naviguez tranquille.</p>
</div> si
le contenu dépasse
max-height (voir css),
<div class="col-md-3 themed-grid-col o set-md-2 over ow-y-scroll"> scroll vertical
<h3><i class="bi-bank"></i> Nos prix</h3>
<p>Essayez [Link] gratuitement pendant un mois.
Des frais de 9.85$ seront ensuite chargés chaque mois,
que vous pouvez annuler à tout moment.</p>
</div>
</div>
<header class="pt-3 row justify-content-center">
<button type="button" class="col-2 btn btn-large btn-primary"
data-bs-toggle="modal" modal pour se logger
data-bs-target="#myModal">Log In</button>
</header>
</div>
[Link]
ff
ff
fl
fl
Exemple 2/3
En quelques copier/collers de la doc
28
Jumbotron
NavBar
Une visualisation qui
s’adapte au viewport
Button
Alert
Forms
29
barre de navigation
table pour aligner label et input…
Exemple 3/3
<div class="jumbotron container-fluid">
<h1>Testez vos capacités de calcul</h1>
<p>À l'aide du pavé de saisie, vous devez répondre le plus vite possible aux calculs qui vous
sont posés.
</p>
<div class="row justify-content-center">
<button id="ready" type="button" class="btn btn-lg btn-primary">
Prêt ?
</button>
</div>
</div>
jumbotron
Exemple pas débuggé !
btn-primary
row justify-content-center
badge
btn-info
btn-warning
btn-outline-info