Bootstrap est un ensemble d'utilitaires nécessaires à la création du design d'une page ou d'une App. Web.
Mais plus que tout, ces outils sont nécessaires au développement maîtrisé du Responsive Design. Le contenu d'une page doit en effet pouvoir s'afficher correctement et de façon spécifique, aussi bien dans un navigateur Web, que sur un smartphone.
Exemples de codes
→ Commençons par des codes très simples. Plus vous progresserez, page après page, plus les scripts seront sophistiqués. Vous devez néanmoins passer le cap de 30 à 40 pages par niveau, avant de passer à la prochaine étape...
→ Afin d'évaluer vos codes, cliquez sur l'icône à gauche en bas de page (rouages), puis choisissez un compilateur dans la liste qui s'ouvrira dans un autre onglet. Finalement, testez votre travail.
MAINTENANT, RECOPIEZ ET IMPRÉGNEZ-VOUS !
C 0001 - Bonjour tout le monde !
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Il faut bien commencer...</h1>
<p>Redimensionnez et remarquez les changements.</p>
</div> <div class="container">
<div class="row">
<div class="col-sm-4">
<h3>C1</h3>
<p>Bonjour tout le monde !</p>
<p>TXT1</p>
</div>
<div class="col-sm-4">
<h3>C2</h3>
<p>TIT2</p>
<p>TXT2</p>
</div>
<div class="col-sm-4">
<h3>C3</h3>
<p>TIT3</p>
<p>TXT3</p>
</div>
</div>
</div>
</body>
</html>
C 0002 - Formulaire
<html lang="en">
<head>
<title>Exemple de formulaire</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Formulaire basique</h2>
<form action="processing.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Entrez votre email" name="email">
</div>
<div class="form-group">
<label for="pwd">Mot de passe:</label><input type="password" class="form-control" id="pwd" placeholder="Entrez votre mot de passe" name="pwd"></div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Se souvenir de moi</label></div>
<button type="submit" class="btn btn-default">Soumettre</button>
</form>
</div>
</body>
CHOISISSEZ VOTRE COMPILATEUR
Reproduisez ce code, en choisissant l'un des compilateurs (♦ voir DEF) 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 !
Spécifications techniques Bootstrap
Outils et méthodologies
Info+ (Bootstrap)
* Créé par Mark Otto et Jacob Thornton
* Développé par Bootstrap Core Team
* Écrit en JavaScript, HTML, CSS et SASS
* Multiplateforme
* Licence MIT
