Sommaire

Introduction
Téléchargement et installation
Page HTML
Le code CSS

 

Tutoriel

Le développement d’une application web professionnelle requiert de nombreuses compétences, notamment celles de designer pour coder la partie graphique de l’application (UI) et offrir la meilleure expérience utilisateur possible (UX). Rappelons que Bootstrap est un framework CSS. Il propose un ensemble de composants (CSS et JavaScript) qui permettent de créer rapidement l’architecture d’un site web et constitue un gain énorme pour le développement.

Apres avoir introduit le framework Bootstrap 3 et indiqué les différences avec la version précédente , aujourd’houi nous allons créer un simple formulaire de contact avec bootstrap 3.

Dans notre exemple, nous avons un certain nombre de clients et les nouveaux prospects pourraient nous envoyer une demande de devis. Nous souhaitons créer un formulaire assez complet qui nous permettra de recueillir leurs détails personnels et pour être en mesure de traiter correctement leur demande. Le formulaire de contact comportera les champs nom, prénoms, email, téléphone, site internet, et un champ texte pour le message à proprement dit. Il faut bien ajouter un bouton pour poster le message. On se limitera à ces champs, mais on pourrait continuer et ajouter un champ pour importer des fichiers. Cela n’apportera rien de plus.

Téléchargement

Le code de la dernière version de Bootstrap se trouve sur le site getbootstrap.com. Dézippez l’archive dans un dossier et étudiez le contenu. Nous allons ajouter le fichier bootstrap.css dans notre code. Pour réduire le nombre de requêtes de ressources sur votre serveur web, vous pouvez aussi utiliser les versions CDN comme http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css . Le code final de ce tutoriel utilisera cette version dans le souci de réduire le nombre de fichier à télécharger.

Page HTML

Commençons par écrire le code HTML du tutoriel:

[sws_code language=”html”]

Formulaire de contact

  
 

[/sws_code]

Que venons-nous de faire ?

L’élément principal div .container contient une colonne dans lequel nous avons codé un formulaire classique. Ce dernier comporte les champs que nous souhaitons ajouter. Maintenant appliquons y les nouvelles classes de Bootstrap 3 qui nour permettrons de positionner correctement et automatiquement les éléments dans un ordre assez bien visible.

Dans un tutoriel précédant pour avons détaillé les nouvelles classes Bootstrap. On obtient un meilleur contrôle du rendu des éléments de code HTML en les entourant de div de la class .form-group. Dans chaque nouveau sous container “form-group”, nous pouvons enfin utiliser un div avec les classes prédéfinies de grille Bootstrap. le framework propose désormais .col-xs-*, .col-sm-*, .col-md-*et .col-lg-* que nous n’allons pas détaillé encore ici. Rappelons seulement que l’on peut combiner les classes et les inclure les unes dans les autres pour obtenir des rendus très complexes et contrôler précisément le comportement sur des écrans de différentes tailles (ordinateur de bureau, tablettes, smart phones géants type Samsumg Galaxy 2 ou smart phones avec des écrans plus petits).

Voici à quoi pourrait ressembler le code complet:

[sws_code language=”html”]

Formulaire de contact

[/sws_code]

 

Résultat final

Nous obtenons ainsi le résultat final:

Bootstrap 3 tutoriel

Bootstrap 3 tutoriel

Le code complet de ce tutoriel Bootstrap 3 est disponible ICI:
[Téléchargement introuvable]

Vous pouvez utiliser et adapter cet exemple, en y ajoutant d’autres champs comme des champs upload ou des cases à cocher ou des listes. Cet exemple n’utilise aucun code javascript/jquery. Cela fera l’object d’un nouveau tutoriel.
Pour un peu de fan,  nous vous conseillons de visiter le site www.flatvsrealism.com ; vous y trouverez ici un jeu très bien fait qui explique un peu toute la tendance de design qui a abouti à Bootstrap 3 :