forked from kongraphael/Bac-a-Sable-1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1.1_Display.html
113 lines (92 loc) · 4.73 KB
/
1.1_Display.html
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bac à sable 1</title>
<link rel="stylesheet" href="style.css">
<!-- Le CSS de Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<!-- popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<!-- Le JavaScript de Bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<h1 class="text-center mt-5 display-2">Contenu</h1>
<h2 class="text-center mt-0 display-4">Display et Alignements</h2>
<br>
<br>
<div class="container d-flex flex-wrap justify-content-center">
<a href="1_Titre.html" class="btn btn-primary m-2">Titre et Typographie</a>
<a href="1.1_Display.html" class="btn btn-primary m-2">Alignement et Display</a>
<a href="1.2_Marge.html" class="btn btn-primary m-2">Marge, Padding</a>
<a href="1.3_Background.html" class="btn btn-primary m-2">Couleurs et Backgrounds</a>
<a href="1.4_Taille.html" class="btn btn-primary m-2">Taille et Bordures</a>
<a href="1.5_Floats.html" class="btn btn-primary m-2">Floats et Fixed position</a>
<a href="1.6_Images.html" class="btn btn-primary m-2">Images</a>
</div>
<br>
<br>
<hr>
<div class="container">
<p class="">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum.
Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos
hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio
operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac,
sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis
iudicium purus sit amet fermentum.
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio
operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac,
sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis
iudicium purus sit amet fermentum.
</p>
<!-- Text left, right etc...-->
<p class="">Texte à gauche</p>
<p class="">Text à Droite</p>
<p class="">Texte au centre</p>
<br>
<br>
<p class="">Aligné à Droite à partir des Petits écrans</p>
<p class="">Aligné à Droite à partir des Moyens écrans</p>
<p class="">Aligné à Droite à partir des Grands écrans</p>
<!-- Text Wrap -->
<div>
This text should wrap.
</div>
<!-- Display Block, inline, etc... -->
<br>
<br>
<div class=" p-2 bg-primary text-white">Une div</div>
<div class=" p-2 bg-dark text-white">Une div</div>
<!-- Flexons ! -->
<br>
<br>
<div class="d-flex">
<div class=" p-2 bg-primary text-white">Item</div>
<div class=" p-2 bg-dark text-white">Item</div>
<div class=" p-2 bg-primary text-white">Item</div>
<div class=" p-2 bg-dark text-white">Item</div>
<div class=" p-2 bg-primary text-white">Item</div>
<div class=" p-2 bg-dark text-white">Item</div>
<div class=" p-2 bg-primary text-white">Item</div>
<div class=" p-2 bg-dark text-white">Item</div>
</div>
<br>
<br>
<br>
</div>
</body>
</html>