Un framework est un ensemble d’outils et de composants logiciels organisés conformément à un plan d’architecture et des patterns, l’ensemble formant ou promouvant un « squelette » de programme. Il est souvent fourni sous la forme d’une bibliothèque logicielle, et accompagné du plan de l’architecture cible du framework.
Bootstrap
Est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option.
Premier pas avec Bootstrap.
- Récupérer le zip Bootstrap et le dézipper (http://getbootstrap.com/docs/4.1/examples/) ou télécharger le dist directement(Compiled CSS and JS) ici.
- Copier et coller le dossier dist dans un dossier que l’on nomme ici: m2-220-010-base-bootstrap et le renomer bootstrap.
- Au même niveau que dist, créer un autre dossier CSS et dedans un fichier: styles.css
- Puis aussi un fichier: index.html
- Ouvrir m2-220-010-base-bootstrap avec VisualStudioCode
- Récupérer le starter template de l’introduction dans la documentation du site Bootstrap (http://getbootstrap.com/docs/4.1/getting-started/introduction/) et le coller dans index.html
- Changer les titres et rajouter <link rel= »stylesheet » href= »css/styles.css »> Pour faire le lien avec notre fichier css si nous voulons le surcharger.
- En bas de la page html, avant le </body> coller les liens suivant:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Les choses importantes
- La class= »container » définie un container avec marge.
- La class= »container-fluid » définie un container sans marge.
- La class= »row » définie une ligne.
- La class= »col-md-12″ définie que celle-ci prendra les 12 colonnes de la grille, sur un écran de moyen taille.
- La class= »col-xs-12 col-sm-12 col-md-12 col-lg-12″ définie que celle-ci prendra les 12 colonnes de la grille, sur les écrans de taille xs, sm, md, et lg (et il existe aussi xl). Nous pouvons indiquer pour chaque écran le nombre de colonne que nous désirons obtenir en changeant 12 par celui que nous voulons.
- La class= »btn btn-default » produit un bouton. btn est obligatoire et btn-default ou btn-succes désigne la couleur(le style), il y en à d’autres à consulter sur le site.
- La class= »img-fluid » pour fixer les images à la taille de leur parent.
- La class= »img-thumbnail » aspect vignette et fixer les images à la taille de leur parent.
- La class= »py-5″ marge vertical, (le chiffre de 1 à 5).
- La class= »px-5″ marge horizontal, (le chiffre de 1 à 5).
- La class= »p-5″ marge vertical, et horizontal,(le chiffre de 1 à 5).
- La class= »jumbotron jumbotron-fluid » pour un composant léger et flexible qui peut éventuellement étendre la totalité de la fenêtre d’affichage afin de présenter les messages marketing clés sur votre site.
- La class= »offset-lg-3″ pour laisser une marge de 3colonne sur écran large.
- La class= »ml-lg-auto » ou « mx-lg-auto » permet une marge automatique(ici sur écran large).