<div id='global-content' class='hundred-percent'>

  <div id='top-content'>
    <div class='content-center'>
      <h1 class=''>Titres et actions transverses</h1>
      <div class='info-comp'>
        <h3>Avec entête</h3>
        <h4>Sous-titre</h4>
        <h5>Sous-sous titre</h5>	
      </div>
      <div class='transversal-actions'>

        <!-- ex d'appel du loader sur le contenu global grâce à class=loading-content (cf JS en bas de page) -->
        <a class='btn loading-default loading-content'><i class='icon-spinner'></i> content</a>

        <!-- ex d'appel du loader sur le bloc code grâce à class=loading-code (cf JS en bas de page) -->
        <a class='btn loading-default loading-code'><i class='icon-spinner'></i> code</a>

        <div class='btn-group'>
          <a class='btn dropdown-toggle' data-toggle='dropdown' href='#'>
            Dropdown
            <span class='caret'></span>
          </a>
          <ul class='dropdown-menu'>
            <li><a href='#'>Sous-menu/a></li>
          </ul>
        </div>
        <button class='btn'><i class='icon-pdf picto-btn'></i>PDF</button>
      </div>
    </div>
  </div>
  
  <div id='main-content'>
    contenu principal...
  </div>
  
</div>
<script type='text/javascript'>
  /*exemple de loader sur la partie contenue*/
  $('a.loading-default.loading-content').toggle(function() {
    $('#main-content').showLoading()
  }, function() {
    $('#main-content').hideLoading()
  }); 
  /*exemple de loader dans l'encart code*/
  /* attention, la cible doit être théoriquement un id */
  $('a.loading-default.loading-code').toggle(function() {
    $('#main-content .code-bloc pre').showLoading()
  }, function() {
    $('#main-content .code-bloc pre').hideLoading()
  });
</script>