Différences entre versions de « Bootstrap »
De Didaquest
Aller à la navigationAller à la recherche (Page créée avec « = Design elements, playground and code snippets for Bootstrap = * https://bootsnipp.com/ :: * Interface pour créer des formulaire : https://bootsnipp.com/forms Categor... ») |
|||
| (20 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
| + | = 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''' : [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] | ||
| + | ::* '''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]] | ||
| + | ::* 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]] ) | ||
| + | * '''Un peu de [[javascript]]''' | ||
| + | * '''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 == | ||
| + | * 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 [[https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1606688-tp-creez-un-site-pas-a-pas]] | ||
| + | * 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''' : [https://openclassrooms.com/fr/courses/1885491-prenez-en-main-bootstrap] ou [https://laravel.sillo.org/bootstrap-4-presentation] ou encore [https://www.pierre-giraud.com/bootstrap-apprendre-cours/introduction] | ||
| + | * '''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: [https://getbootstrap.com/docs/4.3/getting-started/introduction] | ||
| + | :* '''Etape 2''' : Les Media Queries | ||
| + | :* '''Etape 3''' : Les ressources : | ||
| + | :::- Avec Bootply ( le site : [https://www.bootply.com] la page directement pour '''travailler et utiliser les ressources [https://www.bootply.com/new]''' | ||
| + | :::- Notre préférence : Bootsnipp [https://bootsnipp.com/builder] | ||
| + | :::- Autres ressources : The Ultimate guide to bootstrap: [https://www.webdesignerdepot.com/2014/10/the-ultimate-guide-to-bootstrap] | ||
| + | |||
= Design elements, playground and code snippets for Bootstrap = | = Design elements, playground and code snippets for Bootstrap = | ||
* https://bootsnipp.com/ | * https://bootsnipp.com/ | ||
:: * Interface pour créer des formulaire : https://bootsnipp.com/forms | :: * 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/ | ||
| − | [[Category: Web]] [[Category: Informatique]] [[Category: HTML]] [[Category: Web]] [[Category: | + | [[Category: Web]] [[Category: Informatique]] [[Category: HTML]] [[Category: Web]] [[Category: framework]] |
Version actuelle datée du 23 janvier 2020 à 21:21
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
- 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 :
Design elements, playground and code snippets for Bootstrap
- * 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
