-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
405 lines (398 loc) · 27.6 KB
/
index.html
File metadata and controls
405 lines (398 loc) · 27.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="./assets/index.css" rel="stylesheet">
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
rel="stylesheet">
<script crossorigin="anonymous"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="bg-dark">
<div class="p-5 container">
<div class="h-100 rounded-5 p-1 bg-dark">
<h2 class="h1 text-white fw-bold mb-4 border-bottom border-warning p-1">Qu’est-ce que Bootstrap</h2>
<p class="text-darker-grey mb-4">
Bootstrap est un <span class="text-warning fw-bold cursor-pointer"
title="Un framework est un ensemble de librairies qui facilitent le travail des développeurs informatiques et améliorent leur productivité.">framework</span>
front-end contenant une collection d’outils utiles à la création
et au design de sites et d’applications web en front end. <br> Il contient des codes HTML et CSS
ainsi que des extensions JavaScript en option,
permettant la création de formulaires, de boutons, d’outils de navigations et d’autres éléments
interactifs à intégrer dans une application.
</p>
<div class="d-flex flex-wrap text-darker-grey mb-4 ">
<div class="w-50">
<h3 class="text-white">Les plus <span class="fw-bold text-warning">+</span></h3>
<ul class="">
<li>facile de prise en main</li>
<li>fournie une charte graphique clé en main</li>
<li>améliore la productivité</li>
<li>fournie un système de grille plus simple que flexbox</li>
<li>stable</li>
<li>responsive</li>
<li>cross-navigateurs</li>
</ul>
</div>
<div class="w-50">
<h3 class="text-white">Les moins <span class="fw-bold text-warning">-</span></h3>
<ul class="">
<li>lourd</li>
<li>peu personnalisable</li>
<li>il y a un temps de montée en compétences</li>
<li>Votre site risque de ne pas de dénoter des autres qui utilisent le même framework</li>
<li>Vous êtes dépendant d’une organisation qui n’est pas forcément pérenne</li>
</ul>
</div>
</div>
<h2 class="h1 text-white fw-bold mb-4 border-bottom border-warning p-1">Installer bootstrap</h2>
<h3 class="h3 text-white fw-bold mb-4">via CDN</h3>
<p class="text-darker-grey">Ces deux balises doivent être importé dans votre balise head.</p>
<h5 class="text-warning h5 fw-semibold">CSS :</h5>
<pre class="text-white p-4 border rounded darker-grey"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"></pre>
<h5 class="text-warning h5 fw-semibold">JS :</h5>
<pre class="text-white p-4 border rounded darker-grey"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script></pre>
<h3 class="h3 text-white fw-bold mb-4">via NPM</h3>
<pre class="text-white p-4 border rounded darker-grey">npm i bootstrap</pre>
<h2 class="h1 text-white fw-bold mb-4 border-bottom border-warning p-1">Les bases de Bootstrap</h2>
<h3 class="h3 text-white fw-bold my-5">Les couleurs</h3>
<p class="text-darker-grey">Bootstrap utilise une palette de couleurs basée sur le système de
conception de Google Material Design. Chaque couleur a un nom et une valeur hexadécimale. Par
exemple, le nom de la couleur primaire est <span class="text-primary fw-bold">primary</span> et sa
valeur hexadécimale est <span class="text-primary fw-bold">#0d6efd</span>. Nous utilisons ces
noms et valeurs de couleurs pour les classes de couleur.</p>
<p class="text-darker-grey">Il existe 6 couleurs de base :</p>
<ul class="text-darker-grey">
<li class="text-primary fw-bold">#0d6efd (primary)</li>
<li class="text-secondary fw-bold">#6c757d (secondary)</li>
<li class="text-success fw-bold">#198754 (success)</li>
<li class="text-danger fw-bold">#dc3545 (danger)</li>
<li class="text-warning fw-bold">#ffc107 (warning)</li>
<li class="text-info fw-bold">#0dcaf0 (info)</li>
</ul>
<p class="text-darker-grey">Les couleurs peuvent être utilisées pour les classes de texte, les
arrière-plans et les bordures.</p>
<h3 class="h3 text-white fw-bold my-5">1. Les conteneurs</h3>
<p class="text-darker-grey">Les conteneurs sont l'élément de mise en page le plus basique dans Bootstrap
et sont nécessaires lors de l'utilisation de notre système de grille par défaut. Les conteneurs sont
utilisés pour contenir, espacer et (parfois) centrer le contenu à l'intérieur d'eux. Bien que les
conteneurs puissent être imbriqués, la plupart des mises en page n'exigent pas un conteneur
imbriqué.</p>
<p class="text-darker-grey">
<span class="text-warning fw-bold ">Note :</span> Les conteneurs ne peuvent pas être placés à
l'intérieur d'un élément de grille.
</p>
<p class="text-darker-grey">
<span class="text-warning fw-bold ">Note :</span> Les conteneurs appliquent une marge horizontale
qui se réduit en fonction de la taille de l'écran.
</p>
<p class="text-darker-grey">Bootstrap propose trois types de conteneurs :</p>
<ul class="text-darker-grey">
<li>Les conteneurs fixes (fixed) : ils ont une largeur fixe qui ne change pas avec la taille de
l'écran.
</li>
<li>Les conteneurs fluides (fluid) : ils ont une largeur de 100% et s'adaptent à la taille de
l'écran.
</li>
<li>Les conteneurs responsives : ils ont une largeur fixe jusqu'à un certain point de rupture
(breakpoint) et ensuite ils deviennent fluides.
</li>
</ul>
<pre class="text-white p-4 border rounded darker-grey">.container, qui définit une largeur maximale à chaque point de rupture responsive <br>.container-{point de rupture}, qui a une largeur de 100% jusqu'au point de rupture spécifié <br>.container-fluid, qui a une largeur de 100% à tous les points de rupture</pre>
<h3 class="h3 text-white fw-bold my-5">2. Les grilles</h3>
<p class="text-darker-grey">Le système de grille de Bootstrap utilise une série de conteneurs, de
lignes et de colonnes pour agencer et aligner le contenu. Il est construit avec flexbox et est
entièrement responsive. Ci-dessous se trouve un exemple et une explication approfondie de la
manière dont le système de grille s'assemble.</p>
<p class="text-darker-grey">Les grilles Bootstrap sont composées de <span class="text-warning fw-bold">12 colonnes</span>.
Elles peuvent être
utilisées pour créer des mises en page de toutes formes et tailles.</p>
<p class="text-darker-grey">Les colonnes sont entourées de <span
class="text-warning fw-bold">gutters</span> (marges) négatives de
moitié. Cela signifie que toutes les colonnes comportent des marges à leur gauche et à leur droite,
qui sont <span class="text-warning fw-bold">alignées</span> avec les marges des colonnes adjacentes.
Cela permet de
créer facilement des mises en page contenant des colonnes de largeurs différentes.</p>
<div class="container">
<div class="row">
<div class="col-sm-12 background">
Une colonne sur une ligne
</div>
</div>
<div class="row">
<div class="col-sm-6 background">
Une colonne sur deux
</div>
<div class="col-sm-6 background">
Une colonne sur deux
</div>
</div>
<div class="row">
<div class="col-sm-4 background">
Une colonne sur trois
</div>
<div class="col-sm-4 background">
Une colonne sur trois
</div>
<div class="col-sm-4 background">
Une colonne sur trois
</div>
</div>
<div class="row">
<div class="col-sm-3 background">
Une colonne sur quatre
</div>
<div class="col-sm-3 background">
Une colonne sur quatre
</div>
<div class="col-sm-3 background">
Une colonne sur quatre
</div>
<div class="col-sm-3 background">
Une colonne sur quatre
</div>
</div>
<div class="row">
<div class="col-sm-2 background">
Une colonne sur six
</div>
<div class="col-sm-2 background">
Une colonne sur six
</div>
<div class="col-sm-2 background">
Une colonne sur six
</div>
<div class="col-sm-2 background">
Une colonne sur six
</div>
<div class="col-sm-2 background">
Une colonne sur six
</div>
<div class="col-sm-2 background">
Une colonne sur six
</div>
</div>
<div class="row">
<div class="col-sm-1 background">
Une colonne sur douze
</div>
<div class="col-sm-1 background">
Une colonne sur douze
</div>
<div class="col-sm-1 background">
Une colonne sur douze
</div>
<div class="col-sm-1 background">
Une colonne sur douze
</div>
<div class="col-sm-1 background">
Une colonne sur douze
</div>
<div class="col-sm-1 background">
Une colonne sur douze
</div>
<div class="col-sm-1 background">
Une colonne sur douze
</div>
<div class="col-sm-1 background">
Une colonne sur douze
</div>
<div class="col-sm-1 background">
Une colonne sur douze
</div>
<div class="col-sm-1 background">
Une colonne sur douze
</div>
<div class="col-sm-1 background">
Une colonne sur douze
</div>
<div class="col-sm-1 background">
Une colonne sur douze
</div>
</div>
<h3 class="h3 text-white fw-bold my-5">3. Les breakpoints</h3>
<p class="text-darker-grey">Les <span class="text-warning fw-bold">breakpoints</span> Bootstrap sont
les points de rupture de la grille
responsive. Ils déterminent à quel moment la grille passe d'une disposition à une autre.</p>
<p class="text-darker-grey">Les points de rupture Bootstrap sont les suivants :</p>
<ul class="text-darker-grey">
<li>xs : extra small (téléphones portables)</li>
<li>sm : small (tablettes)</li>
<li>md : medium (ordinateurs portables)</li>
<li>lg : large (ordinateurs de bureau)</li>
</ul>
<p class="text-darker-grey">Les points de rupture servent à définir la largeur minimale à partir de
laquelle la grille
change de disposition. Par exemple, si vous utilisez le point de rupture <span
class="text-warning fw-bold">sm</span>, les colonnes
seront horizontales à partir de 576px de largeur.</p>
<p class="text-darker-grey">Les points de rupture Bootstrap sont définis dans le fichier <span
class="text-warning fw-bold">bootstrap-grid.css</span>.</p>
<p class="text-darker-grey">Vous pouvez également définir vos propres points de rupture en modifiant
les variables
<span class="text-warning fw-bold">$grid-breakpoints</span> dans le fichier <span
class="text-warning fw-bold">bootstrap-grid.css</span>.</p>
<h3 class="h3 text-white fw-bold my-5">4. La personnalisation de bootstrap</h3>
<p class="text-darker-grey">Vous pouvez personnaliser Bootstrap en modifiant les variables css, cela
vous permet de
modifier les couleurs, les polices, les tailles, etc.</p>
<p class="text-darker-grey">Pour personnaliser Bootstrap, vous devez modifier les variables dans le
fichier <span class="text-warning fw-bold">bootstrap.css</span>.</p>
<p>Pour modifier les variables, vous devez :</p>
<ul class="text-darker-grey">
<li>Créer un fichier <span class="text-warning fw-bold">bootstrap-custom.css</span></li>
<li>Importer le fichier <span class="text-warning fw-bold">bootstrap.css</span> dans votre
fichier <span class="text-warning fw-bold">bootstrap-custom.css</span></li>
<li>Importer le fichier <span class="text-warning fw-bold">bootstrap-custom.css</span> dans
votre html
</li>
<li>Modifier les variables dans le fichier <span class="text-warning fw-bold">bootstrap-custom.css</span>
</li>
</ul>
<p class="text-darker-grey">Vous pouvez également personnaliser Bootstrap en modifiant les variables
sass, cela vous
permet de modifier les couleurs, les polices, les tailles, etc.</p>
<h3 class="h3 text-white fw-bold my-5">5. Les composants</h3>
<p class="text-darker-grey">Bootstrap propose de nombreux composants prêts à l'emploi. Vous pouvez
les utiliser en
copiant-collant le code html dans votre page.</p>
<p class="text-darker-grey">
<span class="text-warning fw-bold ">Note :</span> les composants Bootstrap utilisent du
javascript. Pour que les composants
fonctionnent, vous devez importer le fichier <span
class="text-warning fw-bold">bootstrap.js</span> dans votre html.
</p>
<p class="text-darker-grey">Voici quelques exemples de composants Bootstrap :</p>
<h4 class="h4 text-white fw-bold mt-3">Les boutons</h4>
<a class="btn btn-primary" href="">Bouton primaire</a>
<a class="btn btn-secondary" href="">Bouton secondaire</a>
<a class="btn btn-success" href="">Bouton succès</a>
<a class="btn btn-danger" href="">Bouton danger</a>
<a class="btn btn-warning" href="">Bouton warning</a>
<a class="btn btn-info" href="">Bouton info</a>
<h4 class="h4 text-white fw-bold mt-3">Les accordéons</h4>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button aria-controls="collapseOne" aria-expanded="true" class="accordion-button"
data-bs-target="#collapseOne" data-bs-toggle="collapse" type="button">
Accordion Item #1
</button>
</h2>
<div class="accordion-collapse collapse show" data-bs-parent="#accordionExample"
id="collapseOne">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML can go within
the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button aria-controls="collapseTwo" aria-expanded="false"
class="accordion-button collapsed"
data-bs-target="#collapseTwo" data-bs-toggle="collapse" type="button">
Accordion Item #2
</button>
</h2>
<div class="accordion-collapse collapse" data-bs-parent="#accordionExample"
id="collapseTwo">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML can go within
the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button aria-controls="collapseThree" aria-expanded="false"
class="accordion-button collapsed"
data-bs-target="#collapseThree" data-bs-toggle="collapse"
type="button">
Accordion Item #3
</button>
</h2>
<div class="accordion-collapse collapse" data-bs-parent="#accordionExample"
id="collapseThree">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML can go within
the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
<h4 class="h4 text-white fw-bold mt-3">Les alertes</h4>
<div class="alert alert-info" role="alert">
Une alerte info
</div>
<div class="alert alert-success" role="alert">
Une alerte succès
</div>
<h4 class="h4 text-white fw-bold mt-3">Les badges</h4>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<h4 class="h4 text-white fw-bold mt-3">Les cartes</h4>
<div class="card" style="width: 18rem;">
<div class="border rounded bg-secondary m-2 d-flex justify-content-center align-items-center"
style="height: 10rem;">
img
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
<a class="btn btn-primary" href="#">Go somewhere</a>
</div>
</div>
<h4 class="h4 text-white fw-bold mt-3">Les formulaires</h4>
<form class="text-darker-grey bg-white p-3 border rounded">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<h4 class="h4 text-darker-grey fw-bold my-5">Plus d'exemples sur le site de Bootstrap <a class="text-warning" href="https://getbootstrap.com/docs/5.3/components/accordion/" target="_blank">Components</a> & <a href="https://getbootstrap.com/docs/5.3/forms/overview/" target="_blank" class="text-warning">Forms</a></h4>
<h2 class="h1 text-white fw-bold my-5 border-bottom border-warning p-1">Conclusion</h2>
<p class="text-darker-grey"> Bref, vous avez compris Bootstrap est un framework CSS qui permet de
créer des sites web responsive rapidement. Il est très utilisé dans le monde du web et il est
très facile de trouver des ressources sur internet pour vous aider à l'utiliser. </p>
<p class="text-darker-grey"> Pour aller plus loin, je vous conseille de vous intéresser à
<a class="text-warning" href="https://getbootstrap.com/docs/5.1/getting-started/introduction/" target="_blank">la documentation officielle</a> de Bootstrap. </p>
<h2 class="h1 text-white fw-bold my-5 border-bottom border-warning p-1">Maintenant c'est à vous jouer !</h2>
<p class="text-darker-grey "> Maintenant que vous avez vu les bases de Bootstrap, je vous propose de
créer votre propre site web en utilisant Bootstrap. Appuyer vous sur la documentation.</p>
<p class="text-darker-grey ">Vous devez vous inspirer de <a class="text-warning" href="https://getbootstrap.com/docs/5.1/examples/checkout/" target="_blank">cette page</a> qui présente un formulaire de commande. </p>
<p class="text-darker-grey ">Le lien vers le code source de la page est <a class="text-warning" href="pages/billing.html" target="_blank">ici</a>. (fichier billing.html) </p>
<p class="text-darker-grey "> - Créer dans un premier temps la structure HTML de la page. </p>
<p class="text-darker-grey "> - Ensuite, vous devez utiliser Bootstrap pour styliser votre page. </p>
<p class="text-darker-grey "> - Enfin, vous devez utiliser les <span class="fw-bold text-warning">breakpoints</span> de Bootstrap pour rendre votre page responsive. </p>
</div>
</div>
</div>
</body>
</html>