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

Introduction¶

Disclaimer¶

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 doc.!
  
  http://getbootstrap.com
- lisez la biblio… (et vérifiez dans la doc.!)

Définition¶

Bootstrap est un framework CSS, responsive et mobile-first
CSS: Cascading Style Sheets, langage de description de la présentation de documents (HTML)
framework: cadre support pour votre propre développement (!= bibliothèque)
autres: Foundation, Pure.CSS, Materialize, etc.

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

Pourquoi un framework?¶

CSS est (était?) un langage relativement simple, conçu pour les machines!
CSS 2 est un langage vieux: versions 2: 1998, 2.1: 2011
usages du Web évoluent beaucoup plus vite que la norme
navigateurs ont tous une implémentation différente

Note

À faire

point: CSS d’usage difficile / subtile ? (ex: positionnement?)

À faire

boom des navigateurs et versions

À faire

estimations/graphs booms navigateurs / usages?

« so 2009 »…
développeur n’est pas web designer!
capitalisation savoir-faire des autres
présentation « suffisante » par défaut

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

Dissection d’un framework¶

reset CSS
gestion des vendors prefixs
grid system
glyphes
typographie cohérente
styles pour éléments courants (messages, boutons, formulaires, etc.)
éléments de GUI (menu, tabs, etc.)
helpers
…

Exemples de ce qu’offre un framework¶

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

Histoire¶

Twitter Blueprint: outil interne à Twitter, développé par Mark Otto et Jacob Thornton
2011/08: renommé Twitter Bootstrap et mis en opensource (GitHub)
2012/01: Bootstrap 2 (grid layout, responsive design)
2013/08: Bootstrap 3 (mobile first, flat design)
2015/08: Bootstrap 4 alpha
Aujourd’hui:
- compte GitHub: > 86000 stars, > 35000 forks, > 11000 commits, > 600 contributeurs
- framework CSS le plus utilisé (source: EDM)

Usage¶

Généralités¶

picorez!
documentation!

Getting started¶

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

voir: http://getbootstrap.com/getting-started/

Template de démarrage:

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

Nécessité d’utiliser chaque ligne du template
Template de démarrage plus complet ici: http://getbootstrap.com/getting-started/#template

À 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

Essayer sans Bootstrap & avec différents navigateurs…

Fonctionnalités basiques¶

Ne rien faire¶

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.

Tableaux¶

Ajouter aux <table> les classes .table, et éventuellement: .table-striped, .table-bordered ou .table-hover.
Démo examples/table.html

Boutons¶

Ajout de la classe .btn: rendu comme un bouton pour <a>, <button> et <input>
Choix de:
- mise en forme suivant sémantique (default, primary, danger, link, etc.) – obligatoire!
- taille (xs, sm, [défaut], lg)
- état activé ou non
Démo examples/button.html

Formulaires¶

Tous éléments standards des formulaires: <textarea>, <select>, <input> et ses types: text, password, checkbox, radio, ainsi que (HTML5) datetime, email, search, etc.
classe .form-control pour éléments
<div class="form-group"> pour label + son élément
trois layouts possibles: vertical (default), inline (.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>

Démo examples/forms.html

Et pour quelques classes de plus¶

fil d’Ariane (breadcrumbs):

<(o|u)l class="breadcrumb">, et dernier élément .active
pagination: <ul class="pagination">, et .disabled & .active
étiquettes (labels):

<span class="label label-$STATUS">

où $STATUS in (primary|info|danger|etc.)
badges: <span class="badge">
notifications (alerts): .alert &

.alert-(success|info|warning|danger)

liens avec .alert-link
Démo examples/misc.html

Grille¶

Principe¶

layout sous forme d’une grille de 12 colonnes
container .container[-fluid], ligne .row, colonne .col-$SIZE-$N
colonnes fusionnables: 12 c. =

12 * 1 c.,

3 * 4 c.,

8 c. + 4 c., etc.

<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

Offset, nesting & réordonnancement¶

offset: nombre de colonnes vides précédentes:

.col-$SIZE-offset-$N

Dé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
réordonnancement rendu de colonnes VS déclaration dans document HTML:

.col-$SIZE-push-$N & .col-$SIZE-pull-$N

Démo examples/grid.html#neword

Tailles du viewport¶

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

Extra: visibilité¶

rien à voir avec le système de grille
cacher un élément: .hidden-$SIZE
afficher un élément: .visible-$SIZE-$DISLAY, où $DISPLAY in (block|inline|inline-block)
média print: .hidden-print et

.visible-print-$DISPLAY

Application au Répertoire¶

Démos: examples/repertoire/*.html

Pour aller plus loin¶

JavaScript¶

Plugins jQuery pour animation des composants de Bootstrap:

fenêtres modales
dropdown menu
ScrollSpy
toggable tabs
tooltips et Popovers
collapse: ex. accordéon
caroussel

Note

limité volontairement à seule partie CSS du framework

Composants¶

dropdowns: alignement, titres dans liste, division, état désactivé d’items
boutons dropdowns
nav-tabs, navbar
thumbnails & media objects
etc.

Préprocesseurs CSS¶

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

Extras¶

customization en ligne, sans préprocesseur CSS: http://getbootstrap.com/customize/
documentation traduite en français: http://www.oneskyapp.com/fr/docs/bootstrap/getting-started/
thèmes libres chez bootswatch: https://bootswatch.com/; ou payants (pas de pub. ;-)
plugins jQuery pour: tree view, éditeurs WYSIWYG
jQueryUI Bootstrap
FontAwesome recommandé en lieu et place de Glyphicons
Bootlint

Note

thèmes payants (Bootstrap, autres?)
- bootstrapbay.com
- bootply.com
- bootsnipp.com (?? thèmes?)
- etc.

À faire

autres extras?

À faire

extending Bootstrap?

Bibliographie¶

=> Bootstrap Essentials <= by Snig Bhaumik (Packt Publishing, 2015)
Learning Bootstrap by Aravind Shenoy & Ulrich Sossou (Packt Publishing, 2014)
Jump Start Bootstrap by Syed Fazle Rahman (SitePoint, 2014)
Bootstrap by Jake Spurlock (O’Reilly, 2013)
Twitter Bootstrap Web Development How-To by David Cochran (Packt Publishing, 2012)

Note

Bootstrap (O’Reilly):

« vieux » (2013, Bootstrap 2)
apporte peu de choses par rapport à la doc. officielle

Bootstrap Essentials (Packt)

J’ai beaucoup apprécié son survol: du bon matos, exhaustif et détaillé!

Learning Bootstrap (Packt)

Accent mis (par rapport aux autres ouvrages) sur la customization de Botstrap via LESS

Bootstrap v4¶

Le développement pour la version 4 de Bootstrap a commencé! Au menu:

passage de LESS à Sass
reboot (reset): normalize.css++
amélioration de la documentation!
possibilité d’utiliser flexbox
encore plus de possibilités de customization, mais suppression de l’interface web online de customization
suppression du support de browsers obsolètes: IE8 and iOS 6

Voir aussi

http://v4-alpha.getbootstrap.com/

À faire

flexbox ?!

Autres pages¶

ToDo liste

Introduction à Bootstrap¶

Introduction¶

Disclaimer¶

Définition¶

Pourquoi un framework?¶

Dissection d’un framework¶

Exemples de ce qu’offre un framework¶

Histoire¶

Usage¶

Généralités¶

Getting started¶

Fonctionnalités basiques¶

Ne rien faire¶

Tableaux¶

Boutons¶

Formulaires¶

Et pour quelques classes de plus¶

Grille¶

Principe¶

Offset, nesting & réordonnancement¶

Tailles du viewport¶

Extra: visibilité¶

Application au Répertoire¶

Pour aller plus loin¶

JavaScript¶

Composants¶

Préprocesseurs CSS¶

Extras¶

Bibliographie¶

Bootstrap v4¶

Autres pages¶

Table des Matières

Sujet suivant

Cette page