TP Initiation Bootstrap

MMI 1ère année TD_Initiation bootstrap (2h00)
TD Initiation bootstrap (2h00)

1- Installation de bootstrap
Créez un dossier www_bootstrap/
Téléchargez bootstrap sur le site
https://github.com/twbs/bootstrap/releases/download/v4.0.0-beta.3/bootstrap-4.0.0-beta.3-dist.zip
Extraire le zip à la racine
2- Construire la base du site

- Créez les répertoires images/
- Créez les fichiers index.html et design.css

- Créez les balises de départ pour bien démarrer (doctype, html, head, body)
2- Balise head
balises meta
- Ajoutez les meta (auteur, description, mots clés et utf-8)
- Ajoutez la balise meta responsive viewport
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
balises link
- Ajoutez un commentaire « bootstrap »
- Ajoutez un link avec les attributs :
rel="stylesheet" et href="css/bootstrap.min.css"
- Ajoutez une balise link pour votre fichier design.css
3- Balise script en fin de code
- A la fin du code avant </body> ajoutez les scripts suivant (jquery, bootstrap.min.js
< !-- jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>


<script src="js/bootstrap.min.js"></script>
4-Containers
Il éxiste deux types de container container et container fluid

container est limimté à 1280px et container-fluid prends la totalité de la largeur de la page
- Créez une class nommé red dans votre design.css

Fixer la hauteur à 600px et lui mettre un background rouge
- Ajoutez une div class container et red

<div class="container red">

</div>
- Testez et vérfiez en changeant container par container-fluid dans votre html

- Puis fixer en container sans la classe red
UCA - IUT Département MMI Le Puy en Velay Page 1
5- Grid system
Bootstrap mets à disposition un système de grille pour organiser les éléments de la page.
- Ajoutez une div class row imbriquée dans la div container

- Ajoutez ensuite 3 div col-sm imbriquée dans la div row
Mais on aurait pu mettre les div avec la class col-4
Voici une liste des options de grille

https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
- Modifiez la class red en lui fixant sa hauteur à 80px ;
- Créez les class pink, blue, green, orange dans votre css
Leur fixer la hauteur à 80px et leur mettre un background adapté
Construire son propre système de grille en respectant le partage de l’écran comme sur cet
exemple
Sur cet exemple fixez les div centrales à une largeur en chiffre
Sur cet exemple la div row aura une class class="row justify-content-md-center"
On fixera la div centrale en col-md-auto

Disposition verticale
- Avec une classe row class="row align-items-start"

Si l’on change start par center ou bien par end on peux disposer nos colones en vetical
- Reproduire la disposiotion verticale comme sur l’exemple ci dessous
6- Les objets media
Les media se comporte de cette façon

<div class="media">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue
felis in faucibus.
</div>
</div>
Sur une grille de 5 Construisez le media ci-dessous

7- images
Ajoutez un container et un row à 12
Ajoutez une balise image avec une class rounded-circle

(les angles seront brisés en forme cercle)
<img src="..." alt="..." class="rounded-circle">
Faites un essai avec cette photo

https://pbs.twimg.com/profile_images/673540900153368576/0IblFD2P.png
Si l’on ajoute une classe img_responsive à cette image, elle sera responsive.
Testez la responsivité sur Firefox avec Ctrl + Shift + m
A l’aide d’une classe float-right placez là à droite
8- Menu bootstrap
L’avantage de bootstrap est de proposer des menus responsive fonctionnel préconçu
- Copiez le code source de ce « fixed menu »

https://getbootstrap.com/docs/4.0/examples/navbar-top-fixed/ dans votre index.html
9- Construire son propre site à l’aide de bootstrap
Si vous avez terminé le TP construisez votre propre site bootstrap à l’aide des Exemples
bootstrap https://getbootstrap.com/docs/4.0/examples/

TP Initiation Bootstrap

Transféré par

Droits d'auteur :

Formats disponibles

TP Initiation Bootstrap

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP Initiation Bootstrap

Transféré par

Droits d'auteur :

Formats disponibles

MMI 1ère année TD_Initiation bootstrap (2h00)

TD Initiation bootstrap (2h00)

2- Construire la base du site

- Créez les fichiers index.html et design.css

- Ajoutez une balise link pour votre fichier design.css

3- Balise script en fin de code

Il éxiste deux types de container container et container fluid

- Créez une class nommé red dans votre design.css

- Ajoutez une div class container et red

- Testez et vérfiez en changeant container par container-fluid dans votre html

- Ajoutez une div class row imbriquée dans la div container

Voici une liste des options de grille

- Modifiez la class red en lui fixant sa hauteur à 80px ;

On fixera la div centrale en col-md-auto

- Avec une classe row class="row align-items-start"

- Reproduire la disposiotion verticale comme sur l’exemple ci dessous

6- Les objets media

Les media se comporte de cette façon

Sur une grille de 5 Construisez le media ci-dessous

UCA - IUT Département MMI Le Puy en Velay Page 3

Ajoutez un container et un row à 12

Ajoutez une balise image avec une class rounded-circle

Faites un essai avec cette photo

A l’aide d’une classe float-right placez là à droite

L’avantage de bootstrap est de proposer des menus responsive fonctionnel préconçu

- Copiez le code source de ce « fixed menu »

9- Construire son propre site à l’aide de bootstrap

UCA - IUT Département MMI Le Puy en Velay Page 4

Vous aimerez peut-être aussi