Bootstrap

Image

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

Nous commencons par des codes très simples. Plus vous progresserez, page après page, plus les scripts seront sophistiqués.

C 0001 - Bonjour tout le monde !

Dîtes bonjour...

<!DOCTYPE html>
<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>

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 !

C 0002 - Formulaire

Réaliser un petit formulaire...

<!DOCTYPE html>
<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>

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 !

Info+

Origine
» Date de création : 2011
* Créé par Mark Otto et Jacob Thornton
* Développé par Bootstrap Core Team

* Écrit en JavaScript, HTML, CSS et SASS
* Multiplateforme
* Licence MIT

Cas pratiques

Afin de vous entraîner, nous ajoutons chaque semaine dans cette section des petits programmes pour vous maintenir à niveau.

CAS 1

NIVEAU BASE

Réaliser 3 pages aux contenus éditoriaux différents

Ce petit programme vous permettra de développer 3 pages, l'une consacrée à un article, la deuxième à une galerie de photographies et la troisième, à une succession de vidéos.

ESSAYEZ

CAS 2

NIVEAU INTERMÉDIAIRE

Développer un site avec 2 styles différents

Ce petit kit vous permettra de développer un petit site Web, utilisant deux, voire trois styles graphiques différents en Responsive Design.

ESSAYEZ

CAS 3

NIVEAU EXPERT

Préparer une série de petites bibliothèques de styles

Concevoir et développer une bibliothèque complète, regroupant plusieurs catégories de styles applicables à des sites ou App. Web, en fonction d'une catégorie dominante.

ESSAYEZ
2021 (C) Fond of Code tm (marque déposée) - Reflex001 / Diego Piccini (da Todi).
Tous droits réservés. Contenu éditorial protégé (www.lewebethique.com).

À propos...

À propos...
Reflex001

Programmation
Développement Web

Rappels

Rappels

Légal/Support

Légal/Support
Image