« Bootstrap 4 » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
(30 versions intermédiaires par le même utilisateur non affichées) | |||
Ligne 2 : | Ligne 2 : | ||
[[Category:Web]] | [[Category:Web]] | ||
= Liens = | = Liens = | ||
* [https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp Bootstrap 4 Utilities] | * [https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp Bootstrap 4 Utilities] | ||
* [https://codepen.io/nirmalkc/pen/JKjmVg Bootstrap Vertical Navigation with expand and collapse] | * [https://codepen.io/nirmalkc/pen/JKjmVg Bootstrap Vertical Navigation with expand and collapse] | ||
Ligne 82 : | Ligne 80 : | ||
= Components = | = Components = | ||
== [https:// | == [https://getbootstrap.com/docs/4.5/components/buttons Button] == | ||
{| class="wikitable wtp" | {| class="wikitable wtp" | ||
|- style="font-family:monospace;" | |- style="font-family:monospace;" | ||
Ligne 110 : | Ligne 108 : | ||
</kode> | </kode> | ||
== [https://getbootstrap.com/docs/4.5/components/modal/ Modal] == | == [https://getbootstrap.com/docs/4.5/components/modal/ Modal - popup] == | ||
<kode lang='html'> | <kode lang='html'> | ||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> | <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> | ||
Ligne 139 : | Ligne 137 : | ||
</div> | </div> | ||
</div> | </div> | ||
</kode> | |||
=== [https://stackoverflow.com/questions/19571955/how-to-make-modal-dialog-with-blur-background-using-twitter-bootstrap Blured background] === | |||
<kode lang='css'> | |||
body.modal-open { | |||
filter: blur(1px); | |||
} | |||
</kode> | </kode> | ||
Ligne 216 : | Ligne 221 : | ||
</kode> | </kode> | ||
== [https://getbootstrap.com/docs/4. | == [https://getbootstrap.com/docs/4.6/components/carousel Carousel] == | ||
* [https://getbootstrap.com/docs/4.6/components/carousel/#crossfade crossfade]: animate slides with a fade transition instead of a slide | |||
* {{boxx|1=data-interval="false"}}: not automatic cycle | |||
* <syntaxhighlight lang='css' inline>data-interval="false"</syntaxhighlight>: not automatic cycle | |||
== [https://getbootstrap.com/docs/4.6/components/spinners Spinner] == | |||
<kode lang='html'> | |||
<div id="spinner" class="text-center"> | |||
<div class="spinner-border text-info" role="status"> | |||
<span class="sr-only">Loading...</span> | |||
</div> | |||
</div> | |||
</kode> | |||
<kode lang='js'> | |||
$("#spinner").css("display", "none"); | |||
</kode> | |||
== [https://getbootstrap.com/docs/4.5/components/collapse Collapse] == | |||
<kode lang='html'> | |||
<a data-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> | |||
= Utilities = | = Utilities = | ||
Ligne 231 : | Ligne 262 : | ||
|- | |- | ||
| text-uppercase || majuscules | | text-uppercase || majuscules | ||
|- | |||
| text-truncate || truncate the text with an ellipsis. Requires {{boxx|inline-block}} or {{boxx|block}} and {{boxx|width}} or {{boxx|max-width}} | |||
|} | |} | ||
Ligne 244 : | Ligne 277 : | ||
| p-3 || padding: $spacer !important | | p-3 || padding: $spacer !important | ||
|} | |} | ||
{{info |1= Values from 0 to 5<br> | |||
{{boxx|1= 1=0.25rem}} {{boxx|1= 2=0.5rem}} {{boxx|1= 3=1rem}} {{boxx|1= 4=1.5rem}} {{boxx|1= 5=3rem}}<br> | |||
$spacer = 1rem, rem = root em = font-size defined in <html>}} | |||
== [https://getbootstrap.com/docs/4.1/utilities/colors Colors] == | == [https://getbootstrap.com/docs/4.1/utilities/colors Colors] == | ||
Ligne 273 : | Ligne 309 : | ||
|- | |- | ||
| justify-content-around || justify-content: space-around | | justify-content-around || justify-content: space-around | ||
|- | |||
| align-items-baseline || align-items: baseline | |||
|} | |} | ||
Ligne 320 : | Ligne 358 : | ||
</div> | </div> | ||
</kode> | </kode> | ||
= Theme = | |||
* [https://themes.getbootstrap.com/collections/all Official paid themes] | |||
== [https://bootswatch.com/4/ Bootswatch: Free themes for Bootstrap] == | |||
* Download a theme ({{boxx|bootstrap.min.css}}) and replace the original bootstrap file | |||
* [https://bootswatch.com/help/ How to customize an existing theme] | |||
= [http://getbootstrap.com Installation] = | = [http://getbootstrap.com Installation] = | ||
Use CDN or download | Use [https://getbootstrap.com/docs/4.6/getting-started/introduction CDN] or [https://getbootstrap.com/docs/4.6/getting-started/download/ download] ready-to-use compiled code.<br> | ||
[https://getbootstrap.com/docs/versions versions] | |||
<kode lang='html'> | <kode lang='html'> | ||
<!doctype html> | <!doctype html> | ||
Ligne 332 : | Ligne 378 : | ||
<!-- Bootstrap CSS --> | <!-- Bootstrap CSS --> | ||
<! option 1: CDN --> | <!-- option 1: CDN --> | ||
<link rel="stylesheet" | <link rel="stylesheet" | ||
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" | href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" | ||
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" | integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" | ||
crossorigin="anonymous"> | crossorigin="anonymous"> | ||
<! option 2: file --> | <!-- option 2: file --> | ||
<link rel="stylesheet" href="css/bootstrap.min.css"> | <link rel="stylesheet" href="css/bootstrap.min.css"> | ||
Ligne 347 : | Ligne 393 : | ||
<!-- Optional JavaScript --> | <!-- Optional JavaScript --> | ||
<!-- jQuery first, then bundle of Popper.js and Bootstrap.js --> | <!-- jQuery first, then bundle of Popper.js and Bootstrap.js --> | ||
<! option 1: CDN --> | <!-- option 1: CDN --> | ||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" | <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" | ||
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" | integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" | ||
Ligne 356 : | Ligne 402 : | ||
crossorigin="anonymous"> | crossorigin="anonymous"> | ||
</script> | </script> | ||
<! option 2: files --> | <!-- option 2: files --> | ||
<script src="js/jquery-3.5.1.slim.min.js"></script> | <script src="js/jquery-3.5.1.slim.min.js"></script> | ||
<script src="js/bootstrap.bundle.min.js"></script> | <script src="js/bootstrap.bundle.min.js"></script> |
Dernière version du 29 mai 2021 à 15:53
Liens
Description
- Single Responsability Principle: les classes CSS ont 1 seul effet
- Normalisation: même rendu quelque soit le navigateur
- Responsive Design
Layout
Container
classe | Description |
---|---|
container | max-width, contenu centré |
container-fluid | width 100%, contenu centré |
Grid Layout
Une page est divisé en 12 colonnes. |
<!-- 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">
|
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 |
Content
Tables
Classes | Description |
---|---|
table | séparateur entre chaque ligne |
table-striped | alternance de couleurs pour chaque ligne |
table-bordered | bordures autour des cellules |
table-hover | colore la ligne survolée par la sourie |
table-condensed | table plus petite |
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 |
<a class="btn btn-danger" href="/delete.html">
<span class="glyphicon glyphicon-trash"></span>
</a>
|
Alert
<div class="alert alert-danger" role="alert">
Message d'alerte!
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Message d'alerte!
</div>
|
Modal - popup
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch modal
</button>
<div class="modal fade" id="exampleModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
|
Blured background
body.modal-open {
filter: blur(1px);
}
|
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<div class="navbar-brand">Navbar</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="nav navbar-nav"> <!-- aligné à gauche -->
<li><a asp-controller="MyController" asp-action="MyAction1">Link1</a></li>
<li class="navbar-text">Texte</li>
</ul>
<ul class="nav navbar-nav navbar-right"> <!-- aligné à droite -->
<li><a asp-controller="MyController" asp-action="MyAction2">Link2</a></li>
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/link">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
|
<nav id="menu" class="nav nav-pills nav-fill flex-column">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>
|
#menu {
width: 200px;
}
|
Carousel
- crossfade: animate slides with a fade transition instead of a slide
- data-interval="false": not automatic cycle
data-interval="false"
: not automatic cycle
Spinner
<div id="spinner" class="text-center">
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
|
$("#spinner").css("display", "none");
|
Collapse
<a data-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>
|
Utilities
Text
classe | Description |
---|---|
text-center | centrer le texte |
text-justify | justifier le texte |
font-weight-bold | gras |
text-uppercase | majuscules |
text-truncate | truncate the text with an ellipsis. Requires inline-block or block and width or max-width |
Margin / Padding
classe | Description |
---|---|
mt-0 | margin-top: 0 !important |
mx-auto | margin-right: auto !important margin-left: auto !important |
p-3 | padding: $spacer !important |
Values from 0 to 5 1=0.25rem 2=0.5rem 3=1rem 4=1.5rem 5=3rem |
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 |
Flex
classe | Description |
---|---|
d-flex | display: flex |
justify-content-around | justify-content: space-around |
align-items-baseline | align-items: baseline |
Border
classe | Description |
---|---|
border | border: 1px solid white |
border-0 | border-width: 0px |
border-primary | border-color: blue |
rounded | border-radius: 0.25rem |
Autres
classe | Description |
---|---|
float-left float-right | élément flottant |
d-block d-inline d-inline-block | display |
w-100 h-50 | width: 100%; height: 50%; |
Forms
<form>
<div class="form-group">
<label asp-for="MyProperty" class="control-label"></label>
<input asp-for="MyProperty" class="form-control" />
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-default" />
</div>
|
Tooltip
<div data-toggle="tooltip" data-placement="top" title="Tooltip text">
Content text
</div>
|
Theme
Bootswatch: Free themes for Bootstrap
- Download a theme (bootstrap.min.css) and replace the original bootstrap file
- How to customize an existing theme
Installation
Use CDN or download ready-to-use compiled code.
versions
<!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>
|
Images
<!-- responsive -->
<img src="..." class="img-fluid">
|