Bootstrap

Présentation

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Téléchargement et code source

• code source sur GitHub: https://github.com/twbs/bootstrap

Tutoriels et formation

Prérequis

• HTML & CSS : [1]

• Mémento des balises HTML: [2]
• Memento des proprietes css: [3]
• Structurer votre page : [[4]]
• Model en boite : [[5]]
• Techniques puissante de mise en page, notre préférence: Flexbox (la plus récente et de loin la plus puissante): (Petit tutoriel : [[6]] )

• Un peu de javascript
• Un peu de PHP mais pas forcément
• Vérifier la validité W3C: [7]

Trois façons différentes: adresse (URL) ou envoi du fichier.html ou copier-coller du code HTML.

Activité pratique préliminaire

• Créer un dossier sur votre ordinateur : mon-premier-site
• Imaginer votre future première page (vous pouvez consulter un ensemble de model sur le web)
• Dans le dossier "mon-premier-site" créer un dossier images: y mettre les images
• Faire votre premier page index.html vide à la racine du dossier "mon-premier-site"
• Préparer un premier squelette de page en html: copier le code et les images [[8]]
• Mettre en forme le design avec un fichier css

Principales étapes, de préférence chronologiquement:
:1 - Polices personnalisées (étape pas nécessaire si vous utilisez des police standard).
:2 - Définition des styles principaux de la page (largeur du site, fond, couleur par défaut du texte).
:3 - En-tête et liens de navigation.
:4 - Bannière (représentant le pont de San Francisco).
:5 - Section principale du corps de page, au centre.
:6 - Pied de page (footer).

Pour bootstrap

• Un petit guide : [9] ou [10] ou encore [11]
• Informations sur Bootstrap site dédié: https://getbootstrap.com
• Télécharger au pas

• minimum le dossier dossierdist
• ou simplement utiliser les CDN: "CDN" est l'acronyme de « Content delivery network » ; c'est un réseau de serveurs qui met à disposition des librairies. Il devient ainsi inutile de prévoir ces librairies sur son propre serveur, il suffit de « pointer » vos besoins vers eux en mettant juste quelques lignes de code sur votre page.

• Etape 1 : Une trame pour démarrer: [12]
• Etape 2 : Les Media Queries
• Etape 3 : Les ressources :

- Avec Bootply ( le site : [13] la page directement pour travailler et utiliser les ressources [14]

- Notre préférence : Bootsnipp [15]

- Autres ressources : The Ultimate guide to bootstrap: [16]

Design elements, playground and code snippets for Bootstrap

• https://bootsnipp.com/

* Interface pour créer des formulaire : https://bootsnipp.com/forms

• https://mdbootstrap.com : Material Design for Bootstrap

* Interface pour choisir des icons

https://mdbootstrap.com/docs/jquery/content/icons-list/

* Interface pour MD Bootstrap Snippets - best source of Bootstrap code examples & plugins

https://mdbootstrap.com/snippets/