développement web

1. BOOTSTRAP
COURS PRÉSENTE PAR : RANDRIANARIVO TOKIARIZO JEANNY LANDRY

2. Plan du cours
• Introduction sur le bootstrap
• Utiliser bootstrap
• Fonctionnalité du bootstrap
• Contenue du bootstrap

3. Introduction sur bootstrap
• Bootstrap est un framework CSS gratuit et open-source destiné au
développement Web frontal réactif et mobile-first. Il contient des
modèles de conception HTML, CSS et JavaScript pour la
typographie, les formulaires, les boutons, la navigation et d’autres
composants d’interface.

4. HISTORIQUE
Bootstrap
Bootstrap 2 et 3
Bootstrap 4
Bootstrap 5

5. Tous savoir sur bootstrap
• Demarrer avec bootstrap:
• https://getbootstrap.com/docs
/5.3/getting-
started/introduction/

6. Instalation
TELECHARGER
INSTALER AVEC LE TERMINALE VIA NPM
UTILISER UN LIEN CDN

7. Telechargement
On peut le telecharger avec le lien:
https://getbootstrap.com/docs/5.3/get
ting-started/download/

8. Installation avec npm
On utilise le code :
npm install bootstrap@5.3.0-alpha1

9. Utiliser un lien CDN
On peut voir le lien cdn dans la même
page de la téléchargement

10. Contenue d’un bootstrap
les dossiser de l’element source du
bootstrap

11. bootstrap/
├── dist/
│ ├── css/
│ └── js/
├── site/
│ └──content/
│ └── docs/
│ └── 5.3/
│ └── examples/
├── js/
└── scss/

12. Comment utiliser bootstrap
Bootstrap.css

13. .css
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-grid.rtl.css
│ ├── bootstrap-grid.rtl.css.map
│ ├── bootstrap-grid.rtl.min.css
│ ├── bootstrap-grid.rtl.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-reboot.rtl.css
│ ├── bootstrap-reboot.rtl.css.map
│ ├── bootstrap-reboot.rtl.min.css
│ ├── bootstrap-reboot.rtl.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap-utilities.rtl.css
│ ├── bootstrap-utilities.rtl.css.map
│ ├── bootstrap-utilities.rtl.min.css
│ ├── bootstrap-utilities.rtl.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap.rtl.css
│ ├── bootstrap.rtl.css.map
│ ├── bootstrap.rtl.min.css
│ └── bootstrap.rtl.min.css.map

14. COMMENT UTILISER BOOTSTRAP
Bootstrap.js

15. .js Bootstrap/
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.esm.js
├── bootstrap.esm.js.map
├── bootstrap.esm.min.js
├── bootstrap.esm.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map

16. Intégrer les éléments de la bootstrap

17. Les éléments de bootstrap
• dispositions
• Contenu
• Formes
• Composants
• Aides
• Utilitaire
• Etendre

18. Disposition
Conteneur
La grille
Colonnes
La grids

19. Conteneur
• Complete la large de l’écran, le conteneur d’une page peut se
modifier par rapport au taille de l’ecran:
• sm: 540px, small
• md: 720px, moyenne
• lg: 960px, large
• xl: 1140px, extra large
• xxl: 1320px ;

20. grille
• On peut contrôler le dimensionnement et le comportement des
conteneurs et des colonnes à chaque point d’arrêt avec. En utilisant
la classe: col

21. Colonnes
• On peut créer beaucoup de colonnes dans un conteneur grâce a la
ligne ajouter dans un conteneur.
• La taille d’une colonne c’est 12 le max, il peut être créer
automatique.

22. contenue
Image
Table
Typographie
Figures

23. Image
• Modifier les paramètres
• Modifier les caractéristiques

24. Tables

25. Typographie
• Type de titre paramètre dans dans le bootstrap:
• <h1>
• <h2>
• <h3>
• <h4>
• <h5>
• <h6>

26. Formes
Control formulaire
Le select
La disposition
Le validation
Le contrôle radio bouton

27. Contrôle formulaires
• form-control
type: text
type: number
type: file
type: pasword
type: color, date ...

28. Le select
• Form select
• simple
• muttiple

29. Disposition

30. Les composants
l’alerte
Les boutons
Groupe de bouton
Bouton fermer
Barre de navigation
Navigation et onglet
Info-bulles
Pagination
…

31. L’alerte
• Classe de type alerte
• Information
• Danger
• Warning
• Success
• secondary

32. Les boutons
• Type de bouton

33. Barre de navigation
• Les différent barre de navigation
•

34. Infos-bulles
• Pour faire une remarque ou une notification

35. Aides
Les couleurs d’arriere plan
Les positions
Visuellement cache
Lien colore
…

36. Utilitaire
Ombre
Positions
Opacité
Background
Border
couleur

37. Etendre
Icones
approche

38. Merci d’avoir assister le cours
• Je vous pris d’aller visiter le site
https://getbootstrap.com/docs/5.3/