« Bootstrap 4 » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
(→Liens) |
|||
Ligne 318 : | Ligne 318 : | ||
</div> | </div> | ||
</kode> | </kode> | ||
= Theme = | |||
* [https://themes.getbootstrap.com/collections/all Thèmes officiels] | |||
== [https://bootswatch.com Bootswatch: Free themes for Bootstrap] == | |||
* Download a theme ({{boxx|bootstrap.min.css}}) and replace the original bootstrap file | |||
= [http://getbootstrap.com Installation] = | = [http://getbootstrap.com Installation] = |
Version du 24 janvier 2021 à 15:37
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
<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>
|
<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
Utilities
Text
classe | Description |
---|---|
text-center | centrer le texte |
text-justify | justifier le texte |
font-weight-bold | gras |
text-uppercase | majuscules |
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 |
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 |
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
Installation
Use CDN or download ready-to-use compiled code.
<!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">
|