[PDF] Apprendre le bootstrap support de cours | Cours Bootstrap

“

http://thomas-bodin.com/cours/iim/bootstrap.pdf

http://thomas-bodin.com/cours/iim/exercices-bootstrap.zip

Retrouvez moi sur Twitter @ThomasBodinFr

Planning 4

Getting Started

Components

CSS

Javascript

Bootstrap (1/4)

1. Présentation

2. Téléchargement & installation

3. Exemples

4. Compatibilités

1. Présentation à créer les bases et à organiser le code informatique pour faciliter _{le travail des programmeurs, que ce soit en terme de productivité}

ou de simplification de la maintenance. Il en existe beaucoup pour les applications web qui ciblent de nombreux langages : Java,

Python, Ruby, PHP…

Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous aide à mettre en forme les pages web : organisation, aspect, animation…

Bootstrap est un framework CSS, mais pas seulement, puisqu'il embarque également des composants HTML et JavaScript.

1. Présentation

Intérêts de Bootstrap

▫ Cross-browser, c'est à dire que la présentation est similaire quel que soit le navigateur utilisé

▫ Gagner du temps de développement parce qu'il nous propose les fondations de la présentation

▫ Propose une grille pour faciliter le positionnement des éléments

▫ Eléments complémentaires : boutons esthétiques, barres de navigation, etc…

▫ Responsive Web Design

1. Présentation

Inconvénients de Bootstrap

▫ Pour l’utiliser efficacement il faut bien le connaître, ce qui implique un temps d'apprentissage

▫ La normalisation de la présentation peut devenir lassante en lissant les effets visuels

1. Présentation

Origines

Le projet Bootstrap a été créé au départ par Mark Otto et Jacob Thornton pour répondre à des besoins internes de

développement de Twitter au niveau de l'uniformisation de

l'aspect des pages web. Il s'agissait juste de stylisation CSS, mais le framework s'est ensuite enrichi de composants Javascript.

Il a ensuite été publié en 2011 en devenant rapidement populaire parce qu'il est venu se positionner dans un espace vacant du développement. Son système de grille de 12 colonnes est devenu une référence.

Le framework en est actuellement à la version 3. La version 4 est actuellement en phase de finalisation.

2. Téléchargement & installation

12

Mise en place de l'environnement :

1) Créer un dossier “Bootstrap” sur votre ordinateur 2) Vous mettrez dans ce dossier des sous-dossiers pour

chaque exercice de ce cours

3) Ouvrez le dossier “Bootstrap” dans votre éditeur

4) Créer un fichier index.html dans le dossier “Bootstrap” 5) Installer Bootstrap

6) Appliquer sur votre body la class “text-center” 14

<p>Lorem ipsum <span>dolor sit amet</span>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h2>Mon 2e titre</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <a href="#">Mon lien</a>

</body> </html>

Bootstrap (2/4)

1. Système de grille

2. Typos

3. Formulaires

4. Boutons

5. Images

6. Helpers

7. Responsive utilities

Exercice 1 :

1. Créer un système de colonne responsive a. 4 colonnes (dans un container) b. 3 colonnes (dans un container)

c. 2 colonnes (sur toute la largeur de l’écran) 2. Créer des colonnes avec des décalages

a. 5 - (2) - 5 (sur toute la largeur de l’écran) b. (1) - 11 (dans un container)

22

1. Centrer les titres de niveau 1 et 2 2. Passer tous les titres en majuscule

1. Liste sans puce

28

1. Créer un petit formulaire

Exercice 5 :

1. Rendre les logos et l’image responsive 2. Arrondir l’image

34

7. Responsive utilities

Exercice 6 :

Rendre le site responsive 1. Sur tablette :

a. Cacher la barre de connexion b. Cacher le menu

2. Sur mobile :

a. Cacher la barre de connexion b. Cacher le menu

c. Cacher image dans le pied de page

d. Mettre les contenus textes les uns en dessous des autres

e. Mettre les éléments du pied de page les uns en dessous des autres

Bootstrap (3/4)

1. Glyphicons 2. Dropdown 3. Nav 4. Breadcrumb 5. Pagination 6. Thumbnail 40

1. Glyphicons

Bibliothèque d’icônes similaires à fontawesome

42

2. Dropdown

44

4. Breadcrumb

1. Mettre en place une navigation RWD 2. Créer un fil d’ariane :

48

1. Faire la page de blog du site

2. Créer une pagination avec première page active 3. Le bouton précédent doit être désactivé

Exercice 9 :

1. Créer une grille de 3 colonnes avec 2 thumbnails a. Image

b. Titre c. Texte

d. Bouton “En savoir plus” 52

Bootstrap (4/4)

4. Carousel

56

1. Mettre en place une modale sur une image d’un plat de nourriture pour la voir en plus grand

2. Mettre en place une modale qui apparaît dès qu’on arrive sur le site pour prévenir d’une promotion

Exercice 11 :

1. Tester les tabs pour une carte de restaurant a. Entrées

b. Plats c. Desserts 60

62

1. Faire un FAQ sur le restaurant a. Horaires

b. Présentation du chef c. Histoire du restaurant d. Avis clients

Exercice 13 :

1. Mettre en place un carrousel du restaurant 66

68

Merci !

@ThomasBodinFr

hi@thomas-bodin.com