bootstrap

FRAMEWORK FRONTEND
bootstrap
1
BOOTSTRAP
•
pourquoi l’utilisation d’un framework
frontend:
• ne
pas ré-inventer la roue (menu, bouton,
formulaire,…)
• développer
plus vite
• développer
pour les tous les types de
terminaux(site responsive) • faciliter
les modifications
2
BOOTSTRAP
• site
officiel bootstrap:
• http://getbootstrap.com/
• exemple
de bootstrap:
• http://startbootstrap.com
3
BOOTSTRAP
•
les grands principes:
• le
CSS: toute une librairie de classes
prédéfinies (h2, form, …)
• les
composants: toute une librairie
d’objet prédéfinis (nav boutons…)
• le
javascript: toute une librairie de
scripts prédéfinis (scroll, transition,
carousel…)
4
BOOTSTRAP
•
la pré-personnalisation du framework
• choix
des outils à utiliser
• préparation
du thème et génération du
CSS (grace à CSS LESS)
5
BOOTSTRAP
•
le responsive:
• le
•
responsive avec bootstrap
outils de test de responsive:
• viewport
rezise
6
BOOTSTRAP
•
démarrer un projet sous bootstrap:
• téléchargement
• organisation
du bootstrap
de l’espace de travail
• utilisation
d’un IDE de développement
(ici SublimeText+ Zen Coding/Emmet)
•
installation de Emmet: CMD+SHIFT+P /install/ Emmet
7
BOOTSTRAP
• fichier
de base
• utilisation
• onglets
d’un débuggueur réseau, console, element
• installation
de jquery
8
BOOTSTRAP
•
notion de grille sous bootstrap:
• la
gestion par défaut en 12 colonnes
9
BOOTSTRAP
•
notion de responsive et d’amplitude:
• « col-xs- »
• « col-sm- »
• « col-md- »
• « col-lg- »
10
BOOTSTRAP
•
responsive et amplitute
11
BOOTSTRAP
•
menu de navigation:
• structure
• classe
de base:
« navbar navbar-default »
(ou « navbar navbar-inverse »)
• class
« nav-header »
• classe
« navbar-brand »
• classe
« active »
12
BOOTSTRAP
•
menu de navigation:
• gestion
du responsive (via « collapse »)
• effacement
du menu si la largeur est
trop petite:
• class
« nav-header »
• classe
« navbar-brand »
• classe
« active »
13
BOOTSTRAP
•
menu de navigation:
•
afficher un icône pour accéder au menu pour un affichage de petite largeur:
•
•
•
•
•
« nav-toggle »
data-toggle=« collapse » (pour la gestion en js)
data-target=« #labarremenu » (pour la gestion en js)
id=« labarremenu »
« icon-bar »
14
BOOTSTRAP
•
menu de navigation:
• fixer
le menu: « navbar-fixedtop »
• supprimer
le chevauchement du
menu avec le corps de la page
• ajouter
un style sur le body
15
BOOTSTRAP
•
les images:
• img-responsive
• img-rounded
• img-circle
• img-thumbnail
16
BOOTSTRAP
• glyphicon
17
BOOTSTRAP
• onglet
• « nav
nav-tab »
• « tab-content »
• « tab-pane »
• data-toggle=« tab » (pour que le js de
bootstrap puisse gérer les événements de
clique sur les liens et les relier aux tab-pane)
18
BOOTSTRAP
•
formulaires
• « input-group »
• « form-control »
• « btn
btn-success »
• « input-group-btn »
• « input-group-addon »
!
!
19
BOOTSTRAP
•
les panels:
• « panel
panel-success »
• « panel-heading »
• « panel-body »
20
BOOTSTRAP
•
les panels:
• les
liens de navigation dans des panels
• « nav-stacked »
21
BOOTSTRAP
•
les tableaux:
• « table »
• table-bordered
• table-condensed
• table-striped
• table-hover
22
BOOTSTRAP
•
label:
• « label
label-success »
!
•
badge:
• « badge »
23
BOOTSTRAP
•
les carousels:
• script
de base
24
BOOTSTRAP
•
les carousels:
•
« carousel-indicators »
•
« item »
•
« carousel-caption »
•
« carousel-control »
!
!
!
!
25
BOOTSTRAP
•
bootstrap:
•
allez plus loin…
• http://startbootstrap.com
26

Download Report