Nouvelles ressources en React
Nouvelles ressources pour les niveaux intermédiaires.
Lire la suite...
Bootstrap est un ensemble d'outils spécifiques à la création du "look and feel" de sites et d'App. web.
DÉBUTANT(E)
⇒ Exemples de codes
→ Vous devez être bilingue (Fr/En). Les exemples de code sont en Anglais.
→ Commençons par des codes très simples. Plus vous progresserez, page après page, plus les scripts seront sophistiqués. Vous devrez cependant parcourir 30 à 40 pages par niveau, avant de passer à l'étape suivante…
→ Pour évaluer vos codes, cliquez sur l'icône en bas à gauche de la page (roues dentées), puis choisissez un compilateur dans la liste qui s'ouvrira dans un autre onglet. Pour finir, testez votre travail.
À VOUS DE REPRODUIRE ET DE VOUS IMMERGER !
C 0001 - Hello World en couleurs
Reproduisez ce code (ne faites pas de copier-coller !). Attention à l'indentation !
<!DOCTYPE html>
<html>
<head>
<title>Colors dropdown</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. /dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h1 class="text-center">Hello World in color</h1>
<center>
<div class="dropdown" data-bs-theme="light">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
Just choose
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
<li><a class="dropdown-item active" href="#">Collection 1</a></li>
<li><a class="dropdown-item" href="#">Color 1</a></li>
<li><a class="dropdown-item" href="#">Color 2</a></li>
<li><a class="dropdown-item" href="#">Color 3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Total colors</a></li>
</ul>
</div>
</center>
</body>
</html>
C 0002 - Des fruits et des légumes
Reproduisez ce code (ne faites pas de copier-coller !). Attention à l'indentation !
<!DOCTYPE html> <html> <head> <title>Fruits and vegetables dropdown</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. /dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. /dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h1 class="text-center">Fruits and Vegetables</h1> <center> <div class="dropdown" data-bs-theme="light"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false"> Fruits </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLoight"> <li><a class="dropdown-item active" href="#">Collection 1</a></li> <li><a class="dropdown-item" href="#">Orange</a></li> <li><a class="dropdown-item" href="#">Banana</a></li> <li><a class="dropdown-item" href="#">Lemon</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Total fruits</a></li> </ul> </div> <div class="dropdown" data-bs-theme="light"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false"> Vegetables </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight"> <li><a class="dropdown-item active" href="#">Collection 2</a></li> <li><a class="dropdown-item" href="#">Carrot</a></li> <li><a class="dropdown-item" href="#">Spinach</a></li> <li><a class="dropdown-item" href="#">French beans</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Total vegetables</a></li> </ul> </div> </center> </body> </html>
CHOISISSEZ VOTRE COMPILATEUR
Reproduisez ce code, en choisissant l'un des compilateurs ci-dessous (ne copiez-collez pas ! Ce serait trop facile). Tous ont la même fonction, choisissez-en un en tenant simplement compte de vos préférences.
Lorsque vous copiez votre code, remplacez le code existant (par défaut) figurant déjà dans le compilateur, par le vôtre.
Attention ! Pour certains de ces compilateurs, vous devez vous-même choisir le langage de programmation, dans le menu qui vous est alors proposé. Bien évidemment, n'oubliez pas de cliquer sur RUN !
Tout sur Bootstrap
Code
Outils et méthodologies
Info/Outils+
» Date de création : 2011
* Créé par Mark Otto et Jacob Thornton
* Développé par Twitter
* Écrit en JavaScript...
Actualité
Les commentaires que vous nous laissez sont systématiquement soumis à une modération rigoureuse. Les incivilités et calomnies, les menaces, les intimidations de toutes sortes, plus globalement toutes les violences verbales gratuites, ou bien la diffusion d’informations non vérifiées… ne sont pas tolérées. Nous nous réservons en outre le droit de ne publier que les commentaires qui font effectivement avancer le débat et permettent une meilleure compréhension du sujet traité par l'article présenté sur cette page (ainsi que toutes ses ramifications) et ce, quelle qu’en soit la teneur globale.
