New Python Resources
New Python ressources for intermediate levels...
Read More
Bootstrap is a set of tools specifically for creating the ‘look and feel’ of web sites and App. web.
BEGINNER
⇒ Code Examples
→ You must be bilingual (Fr/En). Code examples are in English.
→ Let's start with very simple codes. The more you progress, page after page, the more sophisticated the scripts will be. However, you must go over 30 to 40 pages per level, before moving on to the next step...
→ In order to evaluate your codes, click on the icon on the left at the bottom of the page (gears), then choose a compiler from the list that will be open in another tab. Finally, test your work.
NOW REPRODUCE AND IMMERSE YOURSELF!
C 0001 - Hello World in color
Reproduce this code (do not copy and paste!).
<!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/This email address is being protected from spambots. You need JavaScript enabled to view it. /dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/This email address is being protected from spambots. You need JavaScript enabled to view it. /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 - Fruits and Vegetables
Reproduce this code (do not copy and paste!).
<!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/This email address is being protected from spambots. You need JavaScript enabled to view it. /dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/This email address is being protected from spambots. You need JavaScript enabled to view it. /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
Reproduce this code, choosing one of the compilers below (don't copy and paste! It would be too easy). They all have the same function, just choose one according to your preferences.
When copying your code, replace the existing (default) code already in the compiler with your own.
Warning! For some of these compilers, you must choose the programming language yourself from the menu that is then offered. Of course, don't forget to click on RUN!
All about Bootstrap
Code
Tools/Methodologies
Info+
» Creation date: 2011
* Created by Mark Otto and Jacob Thornton
* Developed by Twitter
* Written in JavaScript...
News
The comments you leave us are systematically subject to rigorous moderation. Incivility and slander, threats, intimidation of all kinds, more generally all gratuitous verbal violence, or the dissemination of unverified information... are not tolerated. We also reserve the right to publish only comments which effectively advance the debate and allow a better understanding of the subject covered by the article presented on this page (as well as all its ramifications) and this, whatever its overall content.
