Différences entre versions de « Bootstrap »
De Didaquest
Aller à la navigationAller à la recherche| Ligne 6 : | Ligne 6 : | ||
= Tutoriels et formation = | = Tutoriels et formation = | ||
== Prérequis == | == Prérequis == | ||
| − | * HTML & CSS : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3 | + | * '''HTML & CSS''' : [https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3] |
::* '''Mémento des balises HTML''': [https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1608357-memento-des-balises-html] | ::* '''Mémento des balises HTML''': [https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1608357-memento-des-balises-html] | ||
::* '''Memento des proprietes css''': [https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1608902-memento-des-proprietes-css] | ::* '''Memento des proprietes css''': [https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1608902-memento-des-proprietes-css] | ||
| − | |||
::* Structurer votre page : [[https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605881-structurez-votre-page]] | ::* Structurer votre page : [[https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605881-structurez-votre-page]] | ||
::* Model en boite : [[https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1606168-decouvrez-le-modele-des-boites]] | ::* Model en boite : [[https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1606168-decouvrez-le-modele-des-boites]] | ||
::* '''Techniques puissante de mise en page''', notre préférence: '''Flexbox''' (la plus récente et de loin la plus puissante): (Petit tutoriel : [[https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/3298561-faites-votre-mise-en-page-avec-flexbox]] ) | ::* '''Techniques puissante de mise en page''', notre préférence: '''Flexbox''' (la plus récente et de loin la plus puissante): (Petit tutoriel : [[https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/3298561-faites-votre-mise-en-page-avec-flexbox]] ) | ||
| − | * Un peu de [[javascript]] | + | * '''Un peu de [[javascript]]''' |
| − | * Un peu de [[PHP]] mais pas forcément | + | * '''Un peu de [[PHP]]''' mais pas forcément |
| + | * '''Vérifier la validité W3C''': [http://validator.w3.org] | ||
| + | : Trois façons différentes: adresse (URL) ou envoi du fichier.html ou copier-coller du code HTML. | ||
== Activité pratique préliminaire == | == Activité pratique préliminaire == | ||
Version du 3 octobre 2019 à 11:20
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]
- 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
https://openclassrooms.com/fr/courses/1885491-prenez-en-main-bootstrap
- informations sur Bootstrap directement sur le site dédié: https://getbootstrap.com
Design elements, playground and code snippets for Bootstrap
- * Interface pour créer des formulaire : https://bootsnipp.com/forms
