Scribd
Importer
38 vues12 pages

Bootstrap

Le document présente un guide sur l'utilisation de frameworks CSS/HTML, en se concentrant sur Bootstrap. Il aborde des concepts clés tels que la structure de Bootstrap, l'utilisation de la grille, le positionnement CSS, et la création de navigation adaptative. Des exercices pratiques sont également inclus pour appliquer les connaissances acquises.

Transféré par

yoling0514
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF ou lisez en ligne sur Scribd
38 vues12 pages

Bootstrap

Le document présente un guide sur l'utilisation de frameworks CSS/HTML, en se concentrant sur Bootstrap. Il aborde des concepts clés tels que la structure de Bootstrap, l'utilisation de la grille, le positionnement CSS, et la création de navigation adaptative. Des exercices pratiques sont également inclus pour appliquer les connaissances acquises.

Transféré par

yoling0514
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF ou lisez en ligne sur Scribd
Frameworks CSS/HTML(5) I. Sommaire II. Framework ?. III, Le contenu de Bootstrap.. IV. La base HTML(S) de Bootstrap. IV.1. Exercice 4.... V. Positionnement CSS, et décoration avec un Framework....... V.L. Utilisation de la grille d’un framework. V.1.1. Qu’est-ce qu'une grille ? V.1.2. Le cas de la grille de Bootstrap. V1.3. Exercice 5, V.2. Quelques classes CSS spécifiques de Bootstrap. V2.1. Des classes pour positioner sur la grille... V.2.2. Des classes typographiques et décoratives. V2.3. Exercice 6. VI. Mise en ceuvre de la navigation. 8 VILL. Une barre de menu avec Bootstrap. 8 VLLL. Exercice 7... 9 ‘VL2. Un fil d’ Ariane avec Bootstrap... VI, Exercice 8 VII. Conception adaptative (Responsive design) nnn VIT.1. Les classes « responsives » de Bootstrap. VILL.L. Largeur des élément VIL1.2. Montrericacher des éléments VIL.2. Le menu responsive de Bootstrap... ‘VIL3. Exercice 9. VILL. Exercice 1 Il. Framework ? Le développement web présente de nombreux défis. Ex. : * faire des sites web vite (industrialiser) * faire des sites web jolis + faire des sites web utilisables + faire des sites web accessibles (handicaps, ordinateurs/smartphones/tablettes, robots @indexation, etc.) + réutiliser les éléments déja concus Un des moyens de relever ces défis est de se fonder sur les bonnes pratiques qui existent déja pour : + accélérer le développement + bien faire (joli, utilisable, accessible : navigateurs, écrans, personnes, robots) + réutiliser ce qui a déja été réussi Le framework est un outil qui peut étre défini par: Un framework est un cadre pour organiser et faciliter le développement grace & des concepts clairs, des méthodes efficaces, des morceaux de code, et des éléments graphiques préconcus qui fonctionnent partout. Ex. : Bootstrap est un framework CSS (notamment) trés utilisé (développé par Twitter et Libre) Autres ex. : Foundation, Blueprint, KnackCss, etc. Ill. Le contenu de Bootstrap Le framework est a récupérer ici : [Link] il contient différents fichiers fichiers ventilés dans des répertoires : + des fichiers CSS (qui décrivent tous les blocs de régles) + des fichiers d’icdnes dans divers formats (pour compatibilité) + des fichiers JavaScript (pour gérer la compatibilité avec tous les navigateurs et pour ajouter des fonctionnalités). Ces fichiers utilisent la bibliothéque JavaScript jQuery qu’il faut télécharger aussi : [Link] Certains fichiers contient « min » dans leur nom, et d’autres non : * Les fichiers sans « min » sont fichiers lisibles et contiennent des commentaires aidant & leur compréhension. Ils sont destinés au développement * Les fichiers avec « min» sont des fichiers « minifiés », c'est A dire compressés (sans commentaires, ni espaces, etc.) qui sont utilisés pour le site en production (pour diminuer la bande passante nécessaire) Placez le répertoire « bootstrap » dans votre répertoire de travail, ainsi qu’une copie du fichier de CV sur lequel nous travaillons. Placez dans un répertoire nomme « jquery » le fichier téléchargé ici : hetp:/ [Link]/jquery-2,1,[Link] Nous sommes préts @ utiliser Bootstrap. IV. La base HTML(5) de Bootstrap Bootstrap propose un DOM de base pour les fichiers HTML. Il faut utiliser pour profiter des avantages du framework. Voici cette base: IDOCTYPE htmi> Stns chead> > Base de bootstrap rewport content=" widt cotstrap/ssfboostap mins Ms shigtand hespong cep supper of © MORE: — inttpsf/[Link]/3.7,OfntmiSshivjs"> etpsil/[Link]{responay/i.> [Link]'> ‘

Titre du contenu

‘contenu ‘