Scribd
Importer
49 vues3 pages

Cours Bootstrap Niveau 0

Bootstrap est un framework CSS open-source développé par Twitter, facilitant la création de sites web responsives et modernes grâce à des composants et classes prédéfinis. Il offre un gain de temps, une large bibliothèque de composants et est compatible avec tous les navigateurs. Le document présente également des méthodes d'utilisation, la structure de base d'une page, le système de grille, des exemples de composants, ainsi que des bonnes pratiques et ressources utiles.

Transféré par

Armand ADJIBAKO
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, TXT ou lisez en ligne sur Scribd

Thèmes abordés

  • surcharge de classes,
  • développement web,
  • bonnes pratiques,
  • prototypage,
  • exemple concret,
  • alignements,
  • compatibilité navigateurs,
  • tendances web,
  • meilleures pratiques,
  • interface utilisateur
49 vues3 pages

Cours Bootstrap Niveau 0

Bootstrap est un framework CSS open-source développé par Twitter, facilitant la création de sites web responsives et modernes grâce à des composants et classes prédéfinis. Il offre un gain de temps, une large bibliothèque de composants et est compatible avec tous les navigateurs. Le document présente également des méthodes d'utilisation, la structure de base d'une page, le système de grille, des exemples de composants, ainsi que des bonnes pratiques et ressources utiles.

Transféré par

Armand ADJIBAKO
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, TXT ou lisez en ligne sur Scribd

Thèmes abordés

  • surcharge de classes,
  • développement web,
  • bonnes pratiques,
  • prototypage,
  • exemple concret,
  • alignements,
  • compatibilité navigateurs,
  • tendances web,
  • meilleures pratiques,
  • interface utilisateur

COURS BOOTSTRAP NIVEAU 0

1. Qu'est-ce que Bootstrap ?

Bootstrap est un framework CSS open-source dvelopp par Twitter. Il permet de crer facilement des sites web

responsives et modernes grce une srie de composants et de classes prdfinis.

2. Pourquoi utiliser Bootstrap ?

- Gain de temps

- Design responsive et moderne

- Large bibliothque de composants prts lemploi

- Compatible avec tous les navigateurs

3. Comment utiliser Bootstrap ?

Mthode 1 : CDN (aucun fichier tlcharger)

<link href='[Link] rel='stylesheet'>

Mthode 2 : Tlchargement et lien local dans votre projet.

4. Structure de base d'une page Bootstrap

<!DOCTYPE html>

<html lang='fr'>

<head>

<meta charset='UTF-8'>

<title>Page Bootstrap</title>

<link href='[Link]' rel='stylesheet'>

</head>

<body>

<h1>Hello, Bootstrap!</h1>

</body>

</html>
COURS BOOTSTRAP NIVEAU 0

5. Le systme de grille

Bootstrap utilise un systme de grille 12 colonnes pour structurer le contenu.

Exemple :

<div class='row'>

<div class='col-md-6'>Colonne 1</div>

<div class='col-md-6'>Colonne 2</div>

</div>

6. Les composants Bootstrap

- Boutons : <button class='btn btn-primary'>Cliquez</button>

- Alertes : <div class='alert alert-warning'>Attention !</div>

- Navbar : barres de navigation

- Cartes : encadrs d'information

7. Les classes utilitaires

Bootstrap offre des classes pour les espacements (marges et padding), alignements, couleurs, tailles de

texte, etc.

Exemples : .mt-3, .text-center, .bg-primary

8. Exemple concret

Une page simple avec :

- une navbar

- un titre

- une carte avec contenu

- un footer

Structurez le tout avec .container et des ranges (.row).

9. Bonnes pratiques

- Utiliser .container pour encadrer le contenu


COURS BOOTSTRAP NIVEAU 0

- Ne pas surcharger avec trop de classes

- Tester sur diffrentes tailles dcran ds le dbut

10. Ressources utiles

- Site officiel : [Link]

- Templates : [Link]

- Editeur live : [Link]

Vous aimerez peut-être aussi