Différences entre versions de « Bootstrap »
De Didaquest
Aller à la navigationAller à la recherche| (6 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 33 : | Ligne 33 : | ||
== Pour bootstrap == | == Pour bootstrap == | ||
| − | * '''Un petit guide''' : [https://openclassrooms.com/fr/courses/1885491-prenez-en-main-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 | * '''Informations sur Bootstrap''' site dédié: https://getbootstrap.com | ||
* '''Télécharger au pas''' | * '''Télécharger au pas''' | ||
::* minimum le dossier dossierdist | ::* 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. | ::* 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 | + | :* '''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: framework]] | [[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
