Introduction à Bootstrap
| auteur: | Vincent Férotin |
|---|---|
| date: | 2015-09-29 (version du 2015-09-30) |
| pour: | vjfdev |
| licence: | 
Creative Commons Attribution-ShareAlike 4.0 unported |
| auteur: | Vincent Férotin |
|---|---|
| date: | 2015-09-29 (version du 2015-09-30) |
| pour: | vjfdev |
| licence: |
Creative Commons Attribution-ShareAlike 4.0 unported |
expertise orateur
contenu présente présentation VS espéré
introduction à Bootstrap (voir spoilers)
sous-ensemble de Bootstrap (voir ci-après)
spoilers:
lisez la biblio… (et vérifiez dans la doc.!)
Note
À faire
Détailler CSS: sélecteur + propriétés?
À faire
Détailler mobile-first?
À faire
Détailler responsive design! (sous-section dédiée?)
2: 1998, 2.1: 2011Note
À faire
point: CSS d’usage difficile / subtile ? (ex: positionnement?)
À faire
boom des navigateurs et versions
À faire
estimations/graphs booms navigateurs / usages?
Note
À faire
usage de CSS compliqué: language subtile?
À faire
so 2009: questions on StackOverflow
À faire
great for beginners et/ou CSS mal connu du dév.
À faire
temps
h1:
.h1, h1 {
font-size: 36px;
}
.h1, .h2, .h3, h1, h2, h3 {
margin-bottom: 10px;
margin-top: 20px;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
color: inherit;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
input[type="search"]
input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
NB: « The vendor mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. »
Note
À faire
gain temps/complexité
À faire
anecdote sur recherche exemple vendor prefixes, trouve Autoprefixer
télécharger sur: http://getbootstrap.com/getting-started#download
inclure css/bootstrap.min.css dans <head>:
<link href="css/bootstrap.min.css" rel="stylesheet">
profit!
Avertissement
En fait, c’est plus compliqué ;-/
Note
<!DOCTYPE html>
<html lang="$LANG">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>$TITLE</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container"><!-- OU class="container-fluid" -->
<!-- $BODY -->
</div>
</body>
</html>
Note
À faire
détailler ligne à ligne? http://v4-alpha.getbootstrap.com/getting-started/introduction/#starter-template
À faire
Liens vers autres explications: page de doc. « getting started » de la v4. http://v4-alpha.getbootstrap.com/getting-started/introduction/#starter-template
Démo examples/hello.html
Démo examples/default.html
Note
Par défaut, Bootstrap style déjà quelques éléments HTML, sans qu’il soit besoin de leur attribuer une quelconque class.
<table> les classes .table, et éventuellement:
.table-striped, .table-bordered ou .table-hover.examples/table.html.btn:
rendu comme un bouton pour <a>, <button> et <input>default, primary, danger, link, etc.)
– obligatoire!xs, sm, [défaut], lg)examples/button.html<textarea>, <select>, <input> et ses types:
text, password, checkbox, radio,
ainsi que (HTML5) datetime, email, search, etc..form-control pour éléments<div class="form-group"> pour label + son élément.form-inline),
« horizontal » (.form-horizontal) <form style="width: 50%;">
<div class="form-group">
<label for="name">Nom</label>
<input id="name" type="text" class="form-control"
placeholder="Jean Dupont" />
</div>
<div class="form-group">
<label for="email">E-mail</label>
<input id="email" type="email" class="form-control"
placeholder="jean.dupont@vjf.cnrs.fr" />
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" class="form-control" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-default">Envoyer!</button>
</form>
examples/forms.html<(o|u)l class="breadcrumb">, et dernier élément .activepagination: <ul class="pagination">, et
.disabled & .active
badges: <span class="badge">
Démo examples/misc.html
layout sous forme d’une grille de 12 colonnes
container .container[-fluid],
ligne .row, colonne .col-$SIZE-$N
<div class="container">
<div class="row"><!-- 12 unités de colonnes dispo. -->
<div class="col-md-8"> COLONNE DE TAILLE 8 </div>
<div class="col-md-4"> COLONNE DE TAILLE 4 </div>
</div>
</div>
Démo examples/grid.html#cols
.col-$SIZE-offset-$NDémo examples/grid.html#offset
nesting: imbrication de sous-colonnes par imbrication de .rows,
permettant nouveau dimensionnement de colonnes, ex:
9 c. -> 6 + 6 c.
Démo examples/grid.html#nesting
.col-$SIZE-push-$N & .col-$SIZE-pull-$NDémo examples/grid.html#neword
dimension supplémentaire au nombre de colonnes: taille du viewport
| Taille | xs |
sm |
md |
lg |
|---|---|---|---|---|
| Pixels | < 768 px. | ≥ 768 px. | ≥ 992 px. | ≥ 1200 px. |
définition pour un même container de plusieurs couples taille * colonnes:
<div class="col-xs-6 col-md-8"> ... </div>
les dimensions pour grands viewports l’emportent sur petits,
les petits peuvent suffire pour les plus grands:
.col-xs-$N s’applique aussi bien à xs, md & lg;
.col-lg-$N ne s’applique qu’à lg
Démo examples/grid.html#viewports
Démos: examples/repertoire/*.html
Plugins jQuery pour animation des composants de Bootstrap:
Note
Principe: programmez vos CSS: variables, nesting, fonctions, mixins, boucles, etc.
$primary: #3bbfce;
.content-navigation {
border-color: $primary;
color: darken($primary, 10%);
}
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
Bootstrap est écrit en LESS et porté en SASS
Note
À faire
autres extras?
À faire
extending Bootstrap?
Note
Le développement pour la version 4 de Bootstrap a commencé! Au menu:
Voir aussi
À faire
flexbox ?!