Bootstrap 3

9
Bootstrap 3 ONPO- 14/04/2016

Transcript of Bootstrap 3

Page 1: Bootstrap 3

Bootstrap 3ONPO- 14/04/2016

Page 2: Bootstrap 3

C’est quoi Bootstrap ?

Il s’agit d’un Framework front-end (html, css et js).

Le Framework le plus fameux et le plus utilisé dans le web.

Il est utilisé pour faciliter et accélérer le développement web.

Bootstrap donne la possibilité de créer des designs responsives (i.e. compatible avec les différents layouts et screens).

Créée par Twitter, sa 1ère version (release) est apparue en 2012.

La version stable actuelle est 3.3.6. La version 4 est en cours de développement

(version alpha). Site Officiel: http://getbootstrap.com/ . Bootstrap est gratuit.

Page 3: Bootstrap 3

Utilisation de Bootstrap

Cliquez sur l'icône pour ajouter une image

Page 4: Bootstrap 3

Let’s DIVe into Bootstrap 3

Page 5: Bootstrap 3

Une page web « moderne »

Page 6: Bootstrap 3

Une page web « moderne »

La section « Menu » : class=‘navbar navbar-inverse navbar-fixed-top’.

La partie « Header » : class = ‘jumbotron’. La partie « content » : class = ‘container’ > class

=‘row’ > class =‘col-*’. La partie « footer » : <footer></footer>

Page 7: Bootstrap 3

Démo. #1

Page 8: Bootstrap 3

Avantages & Inconvénients

Avantages Facilité de prototypage,

intégration et développement avec bootstrap.

Structuration et méthodologie de développement et design web.

Framework du futur. Compatibilité avec les

différents browsers ( amélioration progressive pour IE7 et 8).

Amélioration du UI et UX grâce à la flexibilité des composants et à l’utilisation du système de notifications colorées.

Inconvénients Rendu parfois limité sur

IE et ses anciennes versions.

L’héritage de classes CSS peut parfois devenir lourd.

Limitation parfois du design suite à l’utilisation du système de grille.

Mais ce n’est pas la fin du monde ! On peut résoudre ça.

Page 9: Bootstrap 3

Merci pour votre attention !!!