Bootstrap

De Didaquest
Aller à la navigationAller à la recherche

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

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

  • 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: [10]
  • Etape 2 : Les Media Queries
  • Etape 3 : Les ressources :
- Avec Bootply ( le site : [11] la page directement pour travailler et utiliser les ressources [12]
- Notre préférence : Bootsnipp [13]
- Autres ressources : The Ultimate guide to bootstrap: [14]

Design elements, playground and code snippets for Bootstrap

* Interface pour créer des formulaire : https://bootsnipp.com/forms
* 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/

Récupérée de « https://didaquest.org/w/index.php?title=Bootstrap&oldid=49926 »