Responsive web design

Tutorial bootstrap 3, intégrez un site responsive

Comment démarrer l’intégration d’un site internet avec Bootstrap 3 ?

Ce tutorial bootstrap 3 va vous permettre de démarrer sur le Responsive Web Design, en revanche quelques prérequis sont nécessaires. Vous devez avoir des notions dans les langages HTML, CSS, voir Javascript (notamment jQuery).

Quel est donc ce Bootsrap dont tout le monde parle ? Bootstrap a été conçu par une équipe de développeurs Twitter. L’objectif est de fournir une collection d’outils et un cadre de travail pour la réalisation de vos sites web. Attention, Bootstrap s’utilise uniquement côté client et non côté serveur. De ce fait, il peut être utilisé dans un cadre PHP, .NET, Java, Ruby, etc…

Au delà des différents styles proposés dans le cœur Bootstrap, sa grande force est de fournir une grille pour générer des interfaces web « Responsive Design », ou dit pour le commun des mortels, des interfaces qui s’adaptent parfaitement selon le type d’appareil utilisé (ordinateur, tablette, smartphone…).

Où trouver Bootstrap 3 ?

Le site officiel se trouve à sur l’adresse http://getbootstrap.com

Vous ne parlez pas anglais ? Nous avons la solution : http://www.oneskyapp.com/fr/docs/bootstrap/getting-started/
(Ce site semble souffrir de dysfonctionnements, notamment au niveau des exemples en Javascript, préférez plutôt le site officiel).

Vous aimez GitHub ? Rendez-vous sur le lien https://github.com/twbs/bootstrap

Tour le chauffe !

Avant de démarrer dans le vif du sujet, nous allons lire… ou plutôt vous allez lire la documentation officielle. On se retrouve dans 15 minutes …

Vous êtes encore là ? Sans rire, ne lisez pas tout mais brossez les différentes pages afin d’avoir une petite idée des possibilités offertes par votre futur meilleur ami ! Imprégniez vous surtout des pages CSS, Components, et Javascript.

Nous prendrons pour acquis que vous tout lu à partir de CE point •

En avant Guingamp !

(Au moment où je rédige cet article, nous sommes en pleine coupe du monde 2014… veuillez m’excuser pour cette allusion footballistique hasardeuse. Matraquage médiatique oblige…)

Rendez-vous sur la page : http://getbootstrap.com/getting-started/

Au lieu de télécharger Bootstrap avec le bouton Download Bootstrap, vous allez prendre le second bloc Source code avec le bouton Download source.
Pourquoi cette archive ? Elle contient le noyau Bootstrap dans le dossier /dist/ mais elle contient également quelques précieux exemples qui nous permettrons de démarrer en toute simplicité. Rendez-vous dans le dossier /docs/examples/

capture-dossier-bootstrap

Si vous consultez l’un de ces sous-dossiers, vous verrez deux fichiers :

  1. Le fichier index.html qui contient le minimum syndical selon le cas de figure.
  2. Le fichier de styles .css qui modifie ou surcharge légèrement le comportement de Bootstrap.

Je vous invite fortement à faire le tour complet de chaque exemple. Regardez comment sont montés les pages .HTML et les feuilles de style .CSS dans votre éditeur de code préféré. Je pense que vous serez étonné du rendu obtenu avec le peu de code CSS utilisé.
Vous commencez à percevoir le pouvoir de la Force Bootstrap.
J’allais oublier un détail ! Quand vous consultez les pages dans votre navigateur, pensez à redimensionner la fenêtre, et vous pourrez constater la magie du Responsive Design made in Bootstrap.

A présent, nous allons étudier la maquette ci-dessous, nous ne verrons pas la partie codage pur mais plutôt les éléments à utiliser pour obtenir le résultat escompté.

Maquette bootstrap

Si vous n’avez pas encore parcouru la doc. ou les fichiers exemples… sachez que c’est maintenant ou jamais !

Première mi-temps !

Pour le démarrage à proprement parler, vous devez prendre la page :
/docs/examples/starter-template/index.html

Si vous souhaitez réellement une page blanche, vous aurez plus ou moins le code suivant :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Viewport pour une interface Responsive -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>Une page vierge Bootstrap</title>

    <!-- Noyau Bootstrap CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Votre CSS perso -->
    <link href="mon-style.css" rel="stylesheet">

    <!-- Rendre les vieux IE comptatibles... -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>


    <!-- jQuery avec le noyau Bootstrap JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
</html>

Le code source source en bleu contient réellement Bootstrap, le reste du code devrait vous sembler familier.

Bien-évidemment, dans les exemples les sources se trouvent dans un sous-dossier ../../dist/XX/ quand votre projet sera monté, vous n’aurez pas besoin d’avoir une structure aussi « tordue ».

bootstrap-maquette-part2

Pour la têtière, je vous suggère de reprendre l’exemple du dossier
/docs/examples/jumbotron-narrow/

En reprenant le bloc
div class= »header’’

Documentation : http://getbootstrap.com/components/#navbar

bootstrap-maquette-part3

La zone centrale supérieure, nous sommes typiquement dans la page
/docs/examples/carousel/

Rendez-vous au div id=’’myCarousel’’

Documentation : http://getbootstrap.com/javascript/#carousel

bootstrap-maquette-part4

Nous voici dans la zone centrale, le sysètme de colonnes arrive en renfort !
/docs/examples/grid/

Si vous avez lu la doc 😉 je vous rappelle que le système de grille est basé sur 12 colonnes

Documentation : http://getbootstrap.com/css/#grid

bootstrap-maquette-part5

La dernière partie étant la plus simple, nous sommes dans CSS basique.
/docs/examples/sticky-footer/

En utilisant le div id= »footer »

Deuxième mi-temps :

A vous de jouer !

Click to rate this post!
[Total: 51 Average: 3.4]

A propos jeanluc

Check Also

Ie html5

Internet explorer reconnait  il les nouvelles balises html5 ? comme header, nav, footer etc… voir …

4 Commentaires

  1. Encourageant !

  2. Merci pour cette intro de bootsrap en français.
    J’ai bien aimé, ce fut clair pour moi.

  3. Très utile merci. Je crois que tout site n’a pas d’autre choix que d’avoir un site responsive, les nouvelles normes du web imposent à tout site d’être mobile pour garantir un seo de qualité depuis les Smartphones et mobiles.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *