« Bootstrap 5 » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
(→Links) |
|||
| Ligne 5 : | Ligne 5 : | ||
* [https://getbootstrap.com/docs/5.0/examples/ Examples] | * [https://getbootstrap.com/docs/5.0/examples/ Examples] | ||
* [https://bootswatch.com/ Bootswatch (themes)] | * [https://bootswatch.com/ Bootswatch (themes)] | ||
= [https://getbootstrap.com/docs/5.3/layout/grid/ Grid system] = | |||
{| class="wikitable wtp wtmono1" | |||
! classe | |||
! largeur max du conteneur | |||
|- | |||
| col- col-auto- || adaptation de la largeur au contenu | |||
|- | |||
| col-sm- || 540px | |||
|- | |||
| col-md- || 720px | |||
|- | |||
| col-lg- || 960px | |||
|- | |||
| col-xl- || 1140px | |||
|} | |||
= Utilities = | = Utilities = | ||
Version du 24 mars 2023 à 12:14
Links
Grid system
| classe | largeur max du conteneur |
|---|---|
| col- col-auto- | adaptation de la largeur au contenu |
| col-sm- | 540px |
| col-md- | 720px |
| col-lg- | 960px |
| col-xl- | 1140px |
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 |
Sizing - Width - Height
|
<div class="w-25">Width 25%</div> <div class="w-50">Width 50%</div> <div class="w-75">Width 75%</div> <div class="w-100">Width 100%</div> <div class="w-auto">Width auto</div> <div class="h-25">Height 25%</div> <div class="mw-100">Max width 100%</div> <div class="vw-100">Width 100vw</div> |
Text
| classe | Description |
|---|---|
| text-center | centrer aligned text |
| text-end | end (right) aligned text |
| text-uppercase | uppercased text |
| fw-bold | bold text |
Display
| classe | Description |
|---|---|
| d-block | generating line breaks both before and after the element |
| d-inline | do not generate line breaks before or after the element |
| d-none | turn off the display of the element |
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>
|
Forms
Floating labels
|
|
<div class="form-floating"> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> <label for="floatingInput">Email address</label> </div> |
Icons
Bootswatch themes
Download bootstrap.min.css then add it in the web page.
Installation
Download compiled code or use a CDN url or a package manager (LibMan) to get bootstrap.
|
|
<!-- CDN -->
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- file in wwwroot -->
<!-- CSS -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
<!-- JavaScript Bundle with Popper -->
<script src="lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
Files
| File | Description |
|---|---|
| bootstrap.min.css | Layout, Content, Components and Utilities included |
| bootstrap.min.js | minimal js |
| bootstrap.bundle.min.js | Popper included |
Migrating to v5
| v4 | v5 | description |
|---|---|---|
| ml-x | ms-x | margin |
| text-right | text-end | text align |
