Débutant(e)
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

→ 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 !

Reproduisez ce code (ne le copier-coller pas!).
<!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>

C 0002 - Formulaire

Reproduisez ce code (ne le copier-coller pas!).
<!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>
Icon

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

Info+ (Bootstrap)

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

Outils+ (Bootstrap)

Logiciels et environnements

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

Actualité

À propos...

À propos...
Reflex001

Programmation
Développement
Web

Entreprise basée à
Nice - FRANCE / Montréal - CANADA
Uniquement sur RDV...
© 2022 - Tous droits réservés.
ISSN Demande d'enregistrement en cours...

Rappels

Rappels

Légal/Support

Légal/Support
Image
© Copyright 2022 Reflex001. Designed By Art and Earth Networks and Technology / Diego Piccini / Piccini da Todi G&D Studio