« Bootstrap 5 » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
Aucun résumé des modifications
 
(38 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
[[Category:Web]]
[[Category:Web]]
[[Category:Javascript]]
[[Category:Javascript]]
= Links =
* [https://getbootstrap.com/docs/5.3/getting-started/introduction/ Documentation]
* [https://getbootstrap.com/docs/5.3/examples/ Examples]
* [https://bootswatch.com/ Bootswatch (themes)]
= [https://getbootstrap.com/docs/5.3/layout/grid/ Grid system] =
== [https://getbootstrap.com/docs/5.3/layout/breakpoints/#available-breakpoints Breakpoints] ==
Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively.
{| class="wikitable wtp wtmono1"
! class
! dimension
|-
| col- col-auto- || adaptation de la largeur au contenu
|-
| col-sm- || ≥ 576px
|-
| col-md- || ≥ 768px
|-
| col-lg- || ≥ 992px
|-
| col-xl- || ≥ 1200px
|-
| col-xxl- || ≥ 1400px
|}
== Grid layout ==
{{info | Une page est divisé en 12 colonnes.}}
<kode lang='html'>
<!-- définit une ligne -->
<div class="row">
    <!-- définit 3 colonnes de même taille -->
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
<div class="row">
    <!-- définit 3 colonnes, la première 2x plus large que les autres. Il y a 12 colonnes (6-3-3) -->
    <div class="col-6">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
<!-- centrer verticalement tous les éléments de la ligne -->
<div class="row align-items-center">
    <!-- centrer verticalement un élément de la ligne -->
    <div class="col align-self-center">...</div>
<!-- centrer horizontalement la ligne -->
<div class="row justify-content-center">
</kode>
= Utilities =
= Utilities =
== [https://getbootstrap.com/docs/5.0/utilities/spacing Margin / Padding] ==
{| class="wikitable wtp wtmono1 wtmono2" style="float:left; margin-right: 2rem;"
|+ Classes
! class
! Description
|-
| m-0 || margin: 0 !important
|-
| p-3 || padding: 1rem !important
|-
| mx-auto || margin-right: auto !important<br>margin-left: auto !important
|}
{| class="wikitable wtp wtmono1" style="float:left; margin-right: 2rem;"
|+ Sides
! Side
! Description
|-
| t || top
|-
| b || bottom
|-
| s || start (left in LTR)
|-
| e || end (right in LTR)
|-
| x || left and right
|-
| y || top and bottom
|}
{| class="wikitable wtp"
|+ Values
! 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
|}
== [https://getbootstrap.com/docs/5.0/utilities/sizing Sizing - Width - Height] ==
<kode lang='html'>
<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>
</kode>
== [https://getbootstrap.com/docs/5.0/utilities/text Text] ==
== [https://getbootstrap.com/docs/5.0/utilities/text Text] ==
{| class="wikitable wtp wtmono1"  
{| class="wikitable wtp wtmono1"  
Ligne 7 : Ligne 124 :
! Description
! Description
|-
|-
| text-center || centrer aligned
| text-center || centrer aligned text
|-
|-
| text-end || end (right) aligned
| text-end || end (right) aligned text
|-
|-
| text-start || start (left) aligned
| text-uppercase || uppercased text
|-
|-
| text-uppercase || uppercased text
| fw-bold || bold text
|}
 
== [https://getbootstrap.com/docs/5.0/utilities/display Display] ==
{| class="wikitable wtp wtmono1"
! 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
|}
 
== [https://getbootstrap.com/docs/5.3/customize/color/ Colors] ==
{| class="wikitable wtp wtmono1"
! classe
! Description
|-
| text-primary || blue
|-
| text-secondary || grey
|-
| text-success || green
|-
| text-danger || red
|-
| text-warning || yellow
|-
| text-info || light blue
|-
| bg-transparent || transparent
|}
 
= Components =
== [https://getbootstrap.com/docs/5.2/components/buttons/ Button] ==
{| class="wikitable wtp"
|- style="font-family:monospace;"
| btn-primary || btn-secondary || btn-success || btn-danger || btn-warning || btn-info || btn-light || btn-dark || btn-link
|-
| bleu || gris || vert || rouge || jaune || cyan || blanc || noir || texte souligné bleu
|}
 
<kode lang='html'>
<button type="button" class="btn btn-primary oi oi-magnifying-glass" />
</kode>
 
== [https://getbootstrap.com/docs/5.0/components/collapse/ Collapse] ==
<kode lang='html'>
<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>
</kode>
 
== [https://getbootstrap.com/docs/5.3/components/dropdowns/ Dropdowns] ==
<kode lang='html'>
<div class="dropdown">
    <i class="bi bi-three-dots-vertical dropdown-toggle hidden-arrow" data-bs-toggle="dropdown"></i>
    <ul class="dropdown-menu">
        <li><i class="bi bi-pencil dropdown-item"></i></li>
        <li><i class="bi bi-trash3 dropdown-item"></i></li>
    </ul>
</div>
</kode>
 
<kode lang='css'>
/* create the hidden-arrow class to hide the arrow*/
.dropdown .hidden-arrow.dropdown-toggle:after {
    display: none;
}
 
/* reset the min-width for dropdown-menu (set to 10rem) */
.dropdown-menu {
    min-width: auto;
}
</kode>
 
== [https://getbootstrap.com/docs/5.3/components/toasts Toasts] ==
 
= Forms =
== [https://getbootstrap.com/docs/5.0/forms/floating-labels/ Floating labels] ==
<kode lang='html'>
<div class="form-floating">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>
</kode>
 
= Mouse =
Use <syntaxhighlight lang='css' inline>role="button"</syntaxhighlight> to set the mouse cursor to {{boxx|pointer}} when hovering.
 
= [https://icons.getbootstrap.com/ Bootstrap Icons] =
* [[Blazor_ASP.NET_Core_7.0#Bootstrap_icons|Bootstrap Icons and Blazor]]
 
= [https://bootswatch.com Bootswatch themes] =
Download {{boxx|bootstrap.min.css}} then add it in the web page.
 
= Installation =
[https://getbootstrap.com/docs/5.0/getting-started/download Download] compiled code or use a CDN url or a package manager ([[Blazor_ASP.NET_Core_7.0#LibMan_library_manager|LibMan]]) to get bootstrap.
<kode lang='html'>
<!-- 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>
</kode>
 
== [https://getbootstrap.com/docs/5.1/getting-started/contents Files] ==
{| class="wikitable wtp"
! File
! Description
|-
| bootstrap.min.css || Layout, Content, Components and Utilities included
|-
| bootstrap.min.js || minimal js
|-
| bootstrap.bundle.min.js || Popper included
|}
 
= [https://getbootstrap.com/docs/5.0/migration Migrating to v5] =
{| class="wikitable wtp wtmono1 wtmono2"
! v4
! v5
! description
|-
| ml-x || ms-x || margin
|-
|-
| fw-bold || gras
| text-right || text-end || text align
|}
|}

Dernière version du 11 juillet 2023 à 21:12

Links

Grid system

Breakpoints

Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively.

class dimension
col- col-auto- adaptation de la largeur au contenu
col-sm- ≥ 576px
col-md- ≥ 768px
col-lg- ≥ 992px
col-xl- ≥ 1200px
col-xxl- ≥ 1400px

Grid layout

Une page est divisé en 12 colonnes.
Html.svg 
<!-- définit une ligne -->
<div class="row">
    <!-- définit 3 colonnes de même taille -->
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>

<div class="row">
    <!-- définit 3 colonnes, la première 2x plus large que les autres. Il y a 12 colonnes (6-3-3) -->
    <div class="col-6">...</div>
    <div class="col">...</div>
    <div class="col">...</div>

<!-- centrer verticalement tous les éléments de la ligne -->
<div class="row align-items-center">
    <!-- centrer verticalement un élément de la ligne -->
    <div class="col align-self-center">...</div>

<!-- centrer horizontalement la ligne -->
<div class="row justify-content-center">

Utilities

Margin / Padding

Classes
class Description
m-0 margin: 0 !important
p-3 padding: 1rem !important
mx-auto margin-right: auto !important
margin-left: auto !important
Sides
Side Description
t top
b bottom
s start (left in LTR)
e end (right in LTR)
x left and right
y top and bottom
Values
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

Html.svg 
<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

Colors

classe Description
text-primary blue
text-secondary grey
text-success green
text-danger red
text-warning yellow
text-info light blue
bg-transparent transparent

Components

Button

btn-primary btn-secondary btn-success btn-danger btn-warning btn-info btn-light btn-dark btn-link
bleu gris vert rouge jaune cyan blanc noir texte souligné bleu
Html.svg 
<button type="button" class="btn btn-primary oi oi-magnifying-glass" />

Collapse

Html.svg 
<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>

Dropdowns

Html.svg 
<div class="dropdown">
    <i class="bi bi-three-dots-vertical dropdown-toggle hidden-arrow" data-bs-toggle="dropdown"></i>
    <ul class="dropdown-menu">
        <li><i class="bi bi-pencil dropdown-item"></i></li>
        <li><i class="bi bi-trash3 dropdown-item"></i></li>
    </ul>
</div>
Css.svg 
/* create the hidden-arrow class to hide the arrow*/
.dropdown .hidden-arrow.dropdown-toggle:after {
    display: none;
}

/* reset the min-width for dropdown-menu (set to 10rem) */
.dropdown-menu {
    min-width: auto;
}

Toasts

Forms

Floating labels

Html.svg 
<div class="form-floating">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>

Mouse

Use role="button" to set the mouse cursor to pointer when hovering.

Bootstrap 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.

Html.svg 
<!-- 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
Récupérée de « http://wiki.bananeatomic.fr/index.php?title=Bootstrap_5&oldid=28688 »