Xavier Lamorlette

Template Bootstrap avec tête de page fixe et ajustable

Voici un petit template Bootstrap qui donne le rendu suivant : exemple de rendu du template.

Caractéristiques

Éléments utilisés

Barre de navigation

La barre de navigation est fournie par Bootstrap.

Barre de navigation :

<ul class="nav nav-tabs nav-justified" role="navigation">
  <li class="active"><a href="#premier" data-toggle="tab"><i class="fa fa-home fa-lg"></i> Premier onglet</a></li>
  <li><a href="#deuxieme" data-toggle="tab"><i class="fa fa-list fa-lg"></i> Deuxième onglet</a></li>
  <li><a href="#troisieme" data-toggle="tab"><i class="fa fa-book fa-lg"></i> Troisième onglet</a></li>
</ul>

Contenu des onglets :

<div class="tab-content">
  <div class="tab-pane fade active in" id="premier">
    <p>Contenu du premier onglet</p>
  </div>
  <div class="tab-pane fade" id="deuxieme">
    <p>Contenu du deuxième onglet</p>
  </div>
  <div class="tab-pane fade" id="troisieme">
    <p>Contenu du troisième onglet</p>
  </div>
</div>

Tête et pied de page fixes

Pour avoir une tête et un pied de page fixes (i.e. toujours visibles), on utilise les classes Bootstrap appropriées :

<div id="tete" class="navbar navbar-fixed-top">
[...]
</div>

<div id="principale">
[...]
</div>

<div id="pied" class="navbar-fixed-bottom">
[...]
</div>

On définit les propriétés CSS correspondantes suivantes :

#tete {
  margin-bottom: 0;
  border-bottom: 1px solid #eee;
}

#principale {
  min-height: 100%;
  height: auto;
  padding-top: 219px;
  padding-bottom: 51px;
}

#pied {
  background-color: white;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 0px;
  border-top: 1px solid #eee;
}

Ajustement automatique de la hauteur de la partie principale

Dans l'extrait CSS ci-dessus on voit qu'un padding fixe est donné pour la section "principale", mais celui-ci est en fait ensuite ajusté automatiquement en fonction des hauteurs de la tête et du pied de page, avec le code Javascript suivant :

function ajusteAffichage()
{
  var hauteurTete = $("#tete").outerHeight();
  var hauteurPied = $("#pied").outerHeight();
  var paddingTopPrincipale = hauteurTete + 10;
  var paddingBottomPrincipale = hauteurPied;
  $("#principale").css("padding-top", paddingTopPrincipale + "px");
  $("#principale").css("padding-bottom", paddingBottomPrincipale + "px");
}

$(function()
{
  ajusteAffichage();
  window.onresize = ajusteAffichage;
});

Basculement de la tête du pied de page en parties statiques

Pour basculer la tête et le pied de page en parties statiques lorsque la taille de l'écran devient trop petite pour afficher correctement la partie principale, on calcule le ratio entre les hauteurs totales de ces parties et la hauteur de la fenêtre, puis on ajuste dynamiquement les classes CSS de ces parties en fonction de ce ratio ; on ajuste également le padding de la partie principale. La fonction Javascript présentée ci-dessus devient alors :

function ajusteAffichage()
{
  var hauteurFenetre = $(window).height();
  var hauteurTete = $("#tete").outerHeight();
  var hauteurPied = $("#pied").outerHeight();

  var paddingTopPrincipale = 0;
  var paddingBottomPrincipale = 0;
  var ratio = (hauteurTete + hauteurPied) * 100 / hauteurFenetre;
  $("#ratio").text(ratio.toFixed(1) + "%");

  if (ratio > 33)
  {
    $("#tete").removeClass("navbar-fixed-top");
    $("#pied").removeClass("navbar-fixed-bottom");
    $("#principale").css("min-height", "0");
    paddingTopPrincipale = 10;
  }
  else
  {
    $("#tete").addClass("navbar-fixed-top");
    $("#pied").addClass("navbar-fixed-bottom");
    $("#principale").css("min-height", "100%");
    paddingTopPrincipale = hauteurTete + 10;
    paddingBottomPrincipale = hauteurPied;
  }

  $("#principale").css("padding-top", paddingTopPrincipale + "px");
  $("#principale").css("padding-bottom", paddingBottomPrincipale + "px");
}

Vous pouvez consulter tout cela mis ensemble en regardant les sources de l'exemple de rendu du template.

La dernière mise à jour de cette page date d'avril 2014.

Le contenu de ce site est, en tant qu'œuvre originale de l'esprit, protégé par le droit d'auteur.
Pour tout commentaire, vous pouvez m'écrire à xavier.lamorlette@gmail.com.