« Bootstrap 5 » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
| Ligne 83 : | Ligne 83 : | ||
= [https://icons.getbootstrap.com/ Icons] = | = [https://icons.getbootstrap.com/ Icons] = | ||
= Installation = | |||
[https://getbootstrap.com/docs/5.0/getting-started/download Download] compiled code or use CDN via jsDelivr or a package manager to get bootstrap. | |||
<kode lang='html'> | |||
<!doctype html> | |||
<html lang="en"> | |||
<head> | |||
<!-- Required meta tags --> | |||
<meta charset="utf-8"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |||
<!-- Bootstrap CSS --> | |||
<!-- option 1: CDN --> | |||
<link rel="stylesheet" | |||
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" | |||
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" | |||
crossorigin="anonymous"> | |||
<!-- option 2: file --> | |||
<link rel="stylesheet" href="css/bootstrap.min.css"> | |||
<title>Hello, world!</title> | |||
</head> | |||
<body> | |||
<h1>Hello, world!</h1> | |||
<!-- Optional JavaScript --> | |||
<!-- jQuery first, then bundle of Popper.js and Bootstrap.js --> | |||
<!-- option 1: CDN --> | |||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" | |||
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" | |||
crossorigin="anonymous"> | |||
</script> | |||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" | |||
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" | |||
crossorigin="anonymous"> | |||
</script> | |||
<!-- option 2: files --> | |||
<script src="js/jquery-3.5.1.slim.min.js"></script> | |||
<script src="js/bootstrap.bundle.min.js"></script> | |||
</body> | |||
</html> | |||
</kode> | |||
= [https://getbootstrap.com/docs/5.0/migration Migrating to v5] = | = [https://getbootstrap.com/docs/5.0/migration Migrating to v5] = | ||
Version du 15 mai 2021 à 20:16
Links
Utilities
Margin / Padding
| class | Description |
|---|---|
| m-0 | margin: 0 !important |
| p-3 | padding: 1rem !important |
| mx-auto | margin-right: auto !important margin-left: auto !important |
| Side | Description |
|---|---|
| t | top |
| b | bottom |
| s | start (left in LTR) |
| e | end (right in LTR) |
| x | left and right |
| y | top and bottom |
| Value | Description |
|---|---|
| 0 | 0 |
| 1 | $spacer * .25 = 0.25rem |
| 2 | $spacer * .5 = 0.5rem |
| 3 | $spacer = 1rem |
| 4 | $spacer * 1.5 = 1.5rem |
| 5 | $spacer * 3 = 3rem |
| auto | auto |
Text
| classe | Description |
|---|---|
| text-center | centrer aligned text |
| text-end | end (right) aligned text |
| text-uppercase | uppercased text |
| fw-bold | bold text |
Components
Collapse
|
<a data-bs-toggle="collapse" href="#filter" role="button" aria-expanded="false" aria-controls="filter">
<i class="fa fa-filter"></i>
</a>
<div class="collapse" id="filter">
</div>
|
Icons
Installation
Download compiled code or use CDN via jsDelivr or a package manager to get bootstrap.
|
|
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<!-- option 1: CDN -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous">
<!-- option 2: file -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then bundle of Popper.js and Bootstrap.js -->
<!-- option 1: CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous">
</script>
<!-- option 2: files -->
<script src="js/jquery-3.5.1.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
|
