Objectifs

-Maîtriser Bootstrap
-Savoir adapter le code source de Bootstrap
-Savoir intégrer votre propre design grâce Bootstrap
-Développer des sites Web responsive

Programme

-Définition d’un framework CSS

– Rappels sur HTML5 / CSS3

– Les alternatives à bootstrap

– Pourquoi utiliser bootstrap ?

– Introduire Bootstrap dans son projet
Travaux pratiques
Installation de Bootstrap. Habiller une page HTML avec Bootstrap

– Principe de structuration et d’intégration

– Faire une mise en page responsive

– Du pixel au root em (rem)

– Mise en place de la grille

– Container, Row, Columns

– Utiliser Flexbox avec la grille Bootstrap
Travaux pratiques
Créer une page web responsive basée sur une grille.

 -Titres, et mise en pages du texte

– Les Images responsives

– Tableaux et liste d’éléments

– Navs et Navbars pour la navigation

– Breadcrumb ou fil d’Ariane

– Medias objects

– Cards

– Les listes

– Boutons, groupes de boutons et boutons déroulants

– Pagination

– Formulaires et Inputs

– Les alertes

– Un peu de déco : les badges, les spinners

– Jumbotron

– Lecteurs vidéos et audios personnalisés
Travaux pratiques
Intégration du CSS personnalisé dans votre projet

-Carrousels de photos, accordéons

– Collapse elements

– Modals ou Boîtes modales

– Popovers

– Progress ou Barre de progression

– Scrollspy

– Toasts

– Tooltips

– Menus déroulants

– Tabulation
Travaux pratiques
Utilisation de JavaScript et jQuery

– Analyser des modèles construits à partir de Bootstrap.

– Créer un site avec un des modèles.

– Créer une page à partir d’un modèle en surchargeant le fichier CSS.

– Utiliser des fichiers SAAS avec un préprocesseur et/ou un serveur NodeJS.

Référence :  WEB029

Type de Stage : Pratique

Durée : 2 jours

Public concerné:

Développeurs Web,
Webdesigners et Webmasters

Prérequis:

Connaissances de base en HTML
et CSS.