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

<!-- 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

<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

<button type="button" class="btn btn-primary oi oi-magnifying-glass" />

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>

Dropdowns

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

/* 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

<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

Bootstrap Icons and Blazor

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

@@ Ligne 2 : / Ligne 2 : @@
 [[Category:Javascript]]
 = Links =
-* [https://getbootstrap.com/docs/5.0/getting-started/introduction/ Documentation]
+* [https://getbootstrap.com/docs/5.3/getting-started/introduction/ Documentation]
-* [https://getbootstrap.com/docs/5.0/examples/ Examples]
+* [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 =
@@ Ligne 85 : / Ligne 131 : @@
 |-
 | 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'>
@@ Ligne 97 : / Ligne 187 : @@
 </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 =
@@ Ligne 107 : / Ligne 222 : @@
 </kode>
-= [https://icons.getbootstrap.com/ Icons] =
+= 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_5.0#LibMan|LibMan]]) to get bootstrap.
+[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 -->
@@ Ligne 126 : / Ligne 248 : @@
 <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] =

« Bootstrap 5 » : différence entre les versions

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

Sommaire

Links

Grid system

Breakpoints

Grid layout

Utilities

Margin / Padding

Sizing - Width - Height

Text

Display

Colors

Components

Button

Collapse

Dropdowns

Toasts

Forms

Floating labels

Mouse

Bootstrap Icons

Bootswatch themes

Installation

Files

Migrating to v5

Actions de la page

Actions de la page

Outils personnels

Menu de navigation

Navigation

Rechercher

Outils

« Bootstrap 5 » : différence entre les versions

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

Links

Grid layout

Utilities

Components

Forms

Mouse

Installation

Menu de navigation

Rechercher

« Bootstrap 5 » : différence entre les versions