js
Before Width: | Height: | Size: 221 KiB After Width: | Height: | Size: 221 KiB |
Before Width: | Height: | Size: 348 KiB After Width: | Height: | Size: 348 KiB |
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 122 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
Before Width: | Height: | Size: 180 KiB After Width: | Height: | Size: 180 KiB |
Before Width: | Height: | Size: 231 KiB After Width: | Height: | Size: 231 KiB |
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 69 KiB |
47
tp1/tp1.1/index.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<!-- CSS only -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row mt-3">
|
||||
<div class="col bg-info">1e élément</div>
|
||||
<div class="col bg-warning">2e élément</div>
|
||||
<div class="col bg-success">3e élément</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col bg-danger">Danger</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col bg-info">1e element 3e ligne</div>
|
||||
<div class="col bg-success">2e element 3e ligne</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-3 bg-info">1</div>
|
||||
<div class="col-md-6 bg-warning">2</div>
|
||||
<div class="col-md-3 bg-success">3</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-4 col-md-3 bg-info">1</div>
|
||||
<div class="col-4 col-md-6 bg-warning">2</div>
|
||||
<div class="col-4 col-md-3 bg-success">3</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 col-md-3 col-lg-4 bg-info">1</div>
|
||||
<div class="col-12 col-md-6 col-lg-4 bg-warning">2</div>
|
||||
<div class="col-12 col-md-3 col-lg-4 bg-success">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<!-- JavaScript Bundle with Popper -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
|
||||
</html>
|
41
tp1/tp1.2/index.html
Normal file
@@ -0,0 +1,41 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<!-- CSS only -->
|
||||
<link href="./style.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row custom-line">
|
||||
<div class="col align-self-start">Col 1/2</div>
|
||||
<div class="col align-self-start">Col 2/2</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line">
|
||||
<div class="col align-self-center">Col 1/2</div>
|
||||
<div class="col align-self-center">Col 2/2</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line">
|
||||
<div class="col align-self-end">Col 1/2</div>
|
||||
<div class="col align-self-end">Col 2/2</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line">
|
||||
<div class="col align-self-start">Col 1/3</div>
|
||||
<div class="col align-self-center">Col 2/3</div>
|
||||
<div class="col align-self-end">Col 3/3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<!-- JavaScript Bundle with Popper -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
|
||||
</html>
|
9
tp1/tp1.2/style.css
Normal file
@@ -0,0 +1,9 @@
|
||||
.custom-line {
|
||||
min-height: 5rem;
|
||||
margin-bottom: 1rem;
|
||||
background-color: rgba(60, 240, 160, 0.7);
|
||||
}
|
||||
|
||||
.custom-line > .col {
|
||||
background-color: rgba(60, 120, 160, 0.7);
|
||||
}
|
57
tp1/tp1.3/index.html
Normal file
@@ -0,0 +1,57 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<!-- CSS only -->
|
||||
<link href="./style.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row custom-line justify-content-start">
|
||||
<div class="col col-4">Justify Content 1/2</div>
|
||||
<div class="col col-4">Justify Content 2/2</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line justify-content-center">
|
||||
<div class="col col-4">Justify Content 1/2</div>
|
||||
<div class="col col-4">Justify Content 2/2</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line justify-content-end">
|
||||
<div class="col col-4">Justify Content 1/2</div>
|
||||
<div class="col col-4">Justify Content 2/2</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line justify-content-around">
|
||||
<div class="col col-4">Justify Content 1/2</div>
|
||||
<div class="col col-4">Justify Content 2/2</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line justify-content-around">
|
||||
<div class="col col-3">Justify Content 1/2</div>
|
||||
<div class="col col-3">Justify Content 2/3</div>
|
||||
<div class="col col-3">Justify Content 3/3</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line justify-content-between">
|
||||
<div class="col col-4">Justify Content 1/2</div>
|
||||
<div class="col col-4">Justify Content 2/2</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line justify-content-between">
|
||||
<div class="col col-3">Justify Content 1/2</div>
|
||||
<div class="col col-3">Justify Content 2/3</div>
|
||||
<div class="col col-3">Justify Content 3/3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<!-- JavaScript Bundle with Popper -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
|
||||
</html>
|
9
tp1/tp1.3/style.css
Normal file
@@ -0,0 +1,9 @@
|
||||
.custom-line {
|
||||
min-height: 5rem;
|
||||
margin-bottom: 1rem;
|
||||
background-color: rgba(0, 255, 140, 0.7);
|
||||
}
|
||||
|
||||
.custom-line > .col {
|
||||
background-color: rgba(0, 152, 253, 0.7);
|
||||
}
|
41
tp1/tp1.4/index.html
Normal file
@@ -0,0 +1,41 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<!-- CSS only -->
|
||||
<link href="./style.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row mt-3">
|
||||
<div class="col bg-warning order-last">Div</div>
|
||||
<div class="col bg-success order-fisrt">Div</div>
|
||||
<div class="col bg-info order-2">Div</div>
|
||||
<div class="col bg-danger order-1">Div</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col bg-warning order-2">Div</div>
|
||||
<div class="col bg-success order-last">Div</div>
|
||||
<div class="col bg-info order-1">Div</div>
|
||||
<div class="col bg-danger order-first">Div</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col bg-warning order-3 order-md-last">Div</div>
|
||||
<div class="col bg-success order-last order-md-first order-lg-2">Div</div>
|
||||
<div class="col bg-info order-first order-md-5">Div</div>
|
||||
<div class="col bg-danger order-0">Div</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<!-- JavaScript Bundle with Popper -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
|
||||
</html>
|
9
tp1/tp1.4/style.css
Normal file
@@ -0,0 +1,9 @@
|
||||
.custom-line {
|
||||
min-height: 5rem;
|
||||
margin-bottom: 1rem;
|
||||
background-color: rgba(0, 255, 140, 0.7);
|
||||
}
|
||||
|
||||
.custom-line > .col {
|
||||
background-color: rgba(0, 152, 253, 0.7);
|
||||
}
|