ihmpour$les$applicaons$web$ - l’atelier...
TRANSCRIPT
Dans les épisodes précédents…
• Cours introduc/on applica/ons Web + HTML/CSS + Début de concep/on + TD HTML/CSS
• Cours introduc/on PHP • Cours présenta/on Noyau Fonc/onnel fourni et example d’intégra/on à un « micro-‐framework » MVC
• Cours AJAX
2 / 29
A quoi ça sert ?
• A vous faciliter la vie avec le CSS
• A faciliter la mise en place de l’architecture de vos pages web
• A rendre vos sites web (ou prototypes) plus aWrac/fs
4 / 29
Ouvrons la boîte ! • Framework CSS
• Code CSS permeWant une bonne organisa/on et structure de sa page
• Une méthode et des exemples
• Des plugins jQuery pour faciliter l’ajout d’interac/ons
• Un moyen de personnaliser
5 / 29
Un parmi tant d’autres ! • Elas/css • Knacss • Blueprint • 960 Grid System • YUI • 52Framework • Inuitcss • Elements CSS framework • BlueTrip • ez-‐css • ...
(source : hWp://fr.openclassrooms.com/informa/que/cours/prenez-‐en-‐main-‐bootstrap/un-‐framework-‐1)
6 / 29
« Installa/on »
• hWp://getbootstrap.com/ge:ng-‐started/ • Css – bootstrap-‐theme.css (bootstrap-‐theme.min.css) – bootstrap.css (bootstrap.min.css)
• Js – bootstrap.js (bootstrap.min.js)
• Fonts – glyphicons-‐halflings-‐regular.svg
7 / 29
Inser/on dans sa page • Responsive
<meta name="viewport" content="width=device-‐width, ini/al-‐scale=1"> • CSS
– Base de Bootstrap <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> – Thème associé <link href="bootstrap/css/bootstrap-‐theme.min.css" rel="stylesheet”>
• JS – jQuery <script src=“js/jquery.min.js"></script> – Plugins Bootstrap <script src="bootstrap/js/bootstrap.min.js"></script>
8 / 29
La base : un système de grille
• Grille basé sur 12 colonnes • Tous les éléments peuvent être placés dans ceWe grille
• <div class="container"></div> – Avec largeur fixée
• <div class="container-‐fluid"></div> – Prend toute la largeur de la page
9 / 29
« Lignes » et « Colonnes » • Groupe de colonnes : .row
– <div class="row"></div> – Doit être placé dans un .container ou .container-‐fluid puis peut être placé dans .col-‐*
– Définit 12 « emplacements »
• Colonnes : .col-‐xs-‐*, .col-‐sm-‐*, .col-‐md-‐*, .col-‐lg-‐* – <div class="col-‐md-‐*"></div> – Doit être placé dans un groupe .row – .col-‐md-‐4 => prend la place de 4 emplacements – .col-‐md-‐8 => prend 8 emplacements – .col-‐md-‐1 => prend 1 emplacement – …
Source : [Site de Bootstrap] hWp://getbootstrap.com/css/#grid
10 / 29
Décalage de colonnes : offset • Décalage d’une colonne avec .col-‐md-‐offset-‐*
– .col-‐md-‐offset-‐3 => décalage de 3 emplacements sur la droite – .col-‐md-‐offset-‐1 => décalage de 1 emplacement sur la droite – …
• AWen/on de ne pas dépasser 12 emplacements au total !
Source : [Site de Bootstrap] hWp://getbootstrap.com/css/#grid
12 / 29
Menu de naviga/on <div class="navbar navbar-‐default navbar-‐fixed-‐top" role="naviga/on">
<div class="container"> <div class="navbar-‐header"> <buWon type="buWon" class="navbar-‐toggle" data-‐
toggle="collapse" data-‐target=".navbar-‐collapse"> <!-‐-‐ … -‐-‐> </buWon> <a class="navbar-‐brand" href="#">Cours POO-‐IHM :
Bibliothèque de films</a> </div><!-‐-‐/.navbar-‐header-‐-‐> <div class="navbar-‐collapse collapse"> <ul class="nav navbar-‐nav"> <li><a href="./index.php">Accueil</a></li> <li><a href="./index.php?
controller=Films&ac/on=listAll">Films</a></li> </ul> </div><!-‐-‐/.nav-‐collapse -‐-‐> </div><!-‐-‐/.container-‐-‐>
</div> Démo : [mvc-‐poo-‐ihm-‐2014-‐ajax-‐jquery-‐bootstrap] [hWp]
/index.php 13 / 29
Exemple : Accueil <div class="navbar navbar-‐default navbar-‐fixed-‐top" role="naviga/on"> <!-‐-‐ Menu de naviga/on -‐-‐> </div>
<div class="container">
<div class="jumbotron"> <h1>Bienvenue dans ma bibliothèque de films!</h1> <p>Les fonc/onnalités minimales aWendues : lister, afficher, créer,
editer, supprimer pour les films et les stars (acteur/réalisateur).</p> </div>
</div>
Démo : [mvc-‐poo-‐ihm-‐2014-‐ajax-‐jquery-‐bootstrap] [hWp] /index.php
14 / 29
Formulaires • Ajout de style mais aucune classe css spécifique sur un <form> • .form-‐group (<div>) : pour regrouper un label (<label>) et son
control (<input>) • .form-‐control (<input>): sur chaque control (<input>) • 2 layouts op/onnels proposés
– Inline form : .form-‐inline (<form>)
– Horizontal form : .form-‐horizontal (<form>), .form-‐group (<div>) => .control-‐label (<label>), .form-‐control (<input>)
Démo : [Site de Bootstrap] hWp://getbootstrap.com/css/#forms
15 / 29
Formulaires : Inputs (1/2) • Contrôle de la taille
– Hauteur du control : .input-‐lg, .input-‐sm, + taille par defaut (sans classe) – Largeur basée sur la « grille » : .col-‐xs-‐*, .col-‐sm-‐*, .col-‐md-‐*, .col-‐lg-‐*
• Valida/on : sur div.form-‐group .has-‐success .has-‐warning .har-‐error
Source : [Site de Bootstrap] hWp://getbootstrap.com/css/#forms-‐control-‐valida/on
Source : [Site de Bootstrap] hWp://getbootstrap.com/css/#forms-‐control-‐sizes
16 / 29
Formulaires : Inputs (2/2) • Ajoute du texte collé au <input>, au début ou à la fin
– Se combine avec les différents layouts vu précédemment – U/liser .input-‐group (<div>) : /!\ Ne remplace pas un .form-‐group => il
faut insérer le .input-‐group dans le .form-‐group – Puis u/liser .input-‐group-‐addon (<span>)
• Avant le control (input.form-‐control) : pour ajouter du texte avant • Après le control (input.form-‐control) : pour ajouter du texte après
<div class="input-‐group"> <span class="input-‐group-‐addon">@</span> <input type="text" class="form-‐control" placeholder="Username">
</div>
• Possibilité d’ajouter « d’autres éléments » : boutons, menu déroulant…
• A la place de .input-‐group-‐addon, il faut u/liser .input-‐group-‐btn
Source : [Site de Bootstrap] hWp://getbootstrap.com/components/#input-‐groups
17 / 29
Boutons • Classe .btn • S’applique à n’importe quel élément HTML
– Souvent : <a>, <buWon>, <input> (type=buWon ou type=submit)
• En supplément de .btn : .btn-‐default, .btn-‐primary, .btn-‐success, .btn-‐info, .btn-‐warning, .btn-‐danger, .btn-‐link (apparence du lien, mais comportement du bouton)
• Différentes tailles disponibles : – .btn-‐xs, .btn-‐sm, .btn-‐lg – Une taille par défaut entre « sm » et « lg »
Source : [Site de Bootstrap] hWp://getbootstrap.com/css/#buWons
18 / 29
Tableaux • .table : pour appliquer le style bootstrap • .table-‐bordered : pour obtenir des bords • .table-‐striped : pour « colorer » 1 ligne sur 2 • .table-‐hover : pour changer le fond d’une ligne au survol souris • Sur chaque ligne : <tr></tr> ou chaque cellule <td></td>
– .acbve : met en gris – .success : met en vert – .info : met en bleu – .warning : met en orange – .danger : met en rouge
• Englober un tableau <table class="table"></table> dans un élément avec la classe .table-‐responsive – Permet d’ajouter une scroll-‐bar horizontale sur les « pe/ts » écrans
Source : [Site de Bootstrap] hWp://getbootstrap.com/css/#tables
19 / 29
Images
• Images qui s’adaptent à la taille de l’écran – .img-‐responsive (<img>)
• 3 types d’affichages proposés – .img-‐rounded (<img>) – .img-‐circle (<img>) – .img-‐thumbnail (<img>)
Source : [Site de Bootstrap] hWp://getbootstrap.com/css/#images
20 / 29
Icones
• Glyphicons : 200 ! • .glyphicon (<span>) • + .glyphicon-‐* (* : search, euro, cloud, ok, map-‐marker …)
<buWon class="btn btn-‐info btn-‐lg"> <span class="glyphicon glyphicon-‐search"></span> Ac/ver le filtre par style !
</buWon>
Source : [Site de Bootstrap] hWp://getbootstrap.com/components/#glyphicons
21 / 29
Progress Bars et Badges • Barre de progression
– Elément englobant -‐ la barre elle-‐même: .progress (<div>) – Pourcentage d’avancement -‐ à l’intérieur d’un .progress : .progress-‐bar (<div>) +
style="width: **% » <div class="progress">
<div class="progress-‐bar" style="width: 60%;">60%</div> </div>
– Plusieurs « couleurs » -‐ s’applique à div.progress-‐bar: .progress-‐bar-‐success, .progress-‐bar-‐info, .progress-‐bar-‐warning, .progress-‐bar-‐danger
– Avec rayures -‐ s’applique à div.progress : .progress-‐striped
– Anima/on des rayures : ajout de .acbve – Empilement des barres : plusieurs .progress-‐bar dans un même .progress
• Badge : MeWre en avant un nombre (ex: emails non lus, news en aWente…)
– .badge (<span>) -‐ ex: <a href="#">Inbox <span class="badge">42</span></a>
Source : [Site de Bootstrap] hWp://getbootstrap.com/components/#progress
Source : [Site de Bootstrap] hWp://getbootstrap.com/components/#badges 22 / 29
Alertes • Ajouter .alert à un <div> • Ajouter une des classes
« de contexte » : .alert-‐success, .alert-‐info, .alert-‐warning, .alert-‐danger
• Fermeture de l’alerte
– Ajout de la classe .alert-‐dismissable – Plugin javascript : data-‐dismiss="alert" sur un élément <buWon> avec la
classe .close <div class="alert alert-‐warning alert-‐dismissable">
<buWon type="buWon” class="close" data-‐dismiss="alert">&/mes;</buWon> Message : ATTENTION !
</div>
Source : [Site de Bootstrap] hWp://getbootstrap.com/components/#alerts
Source : [Site de Bootstrap] hWp://getbootstrap.com/javascript/#alerts
23 / 29
Modals : Plugin javascript <!-‐-‐ BuWon trigger modal -‐-‐> <buWon class="btn btn-‐primary" data-‐toggle="modal" data-‐target="#myModal">
Launch demo modal </buWon> <!-‐-‐ Modal -‐-‐> <div class="modal fade" id="myModal" tabindex="-‐1" role="dialog"> <div class="modal-‐dialog"> <div class="modal-‐content"> <div class="modal-‐header"> <buWon type="buWon" class="close" data-‐dismiss="modal">&/mes;</buWon> <h4 class="modal-‐btle" id="myModalLabel">Modal /tle</h4> </div> <div class="modal-‐body"> One fine body... </div> <div class="modal-‐footer"> <buWon type="buWon" class="btn btn-‐default" data-‐dismiss="modal">Close</buWon> <buWon type="buWon" class="btn btn-‐primary">Save changes</buWon> </div> </div> </div> </div>
Source : [Site de Bootstrap] hWp://getbootstrap.com/javascript/#modals 24 / 29
Tool/ps • Plugin javascript : – au survol afficher de l’informa/on
<buWon type="buWon" class="btn btn-‐default" data-‐toggle="toolbp" data-‐placement="leh" btle="Toolbp on leh">Toolbp on leh</buWon>
• 4 direc/ons -‐ data-‐placement : – le�, top, boWom, right
• Plugin à « ac/ver » au chargement de la page : $(document).ready(func/on () { $("[data-‐toggle='tool/p']").tool/p(); });
Source : [Site de Bootstrap] hWp://getbootstrap.com/javascript/#tool/ps
25 / 29
Popover • Plugin javascript :
– Au click, ajout d’une « pop-‐up » dans la direc/on indiquée
<buWon type="buWon" class="btn btn-‐info” data-‐container="body" data-‐toggle="popover" data-‐placement="right" data-‐content="Vivamus sagiks lacus vel augue laoreet rutrum faucibus." btle="Popover on right"> Popover on right </buWon> • 4 direc/ons -‐ data-‐placement :
– le�, top, boWom, right
• Plugin à « ac/ver » au chargement de la page : $(document).ready(func/on () { $("[data-‐toggle='popover']").popover(); });
Source : [Site de Bootstrap] hWp://getbootstrap.com/javascript/#popovers
26 / 29
Collapse et Carousel
Source : [Site de Bootstrap] hWp://getbootstrap.com/javascript/#carousel
Source : [Site de Bootstrap] hWp://getbootstrap.com/javascript/#collapse
27 / 29
EXEMPLES COMPLETS SUR LE SITE DE BOOTSTRAP HTTP://GETBOOTSTRAP.COM/
/!\ ATTENTION À LA VERSION UTILISÉE /!\
VERSION 3.1.1
Démo : [mvc-‐poo-‐ihm-‐2014-‐ajax-‐jquery-‐bootstrap] [hWp] /index.php?controller=Films&ac/on=listAll
28 / 29