2.5.0
- colonnes de bas de page enveloppés dans un
div.row
2.1.0
- liens placés dans une liste
ul.list-unstyled .col-sm-3remplacé par.col-sm-4.col-md-3pour plus de lisibilité sur les écrans de petite taille et wrapper.rowinutile supprimé
Dans le pied de page on place des liens qui sont ainsi accessibles depuis toutes les pages. Ces liens peuvent mener, en tant que plan du site, vers des pages du site Internet actuel, mais aussi faire référence à des contenus externes, p. ex. des sites partenaires. Selon les besoins, le pied de page peut être divisé en différents domaines.
Mise en œuvre pour les smartphones
Sur les smartphones, certaines fonctions de l’en-tête, p. ex. la navigation de service et le logo fédéral complet, sont déplacés vers le pied de page.
<footer>
<nav class="footer-service">
<ul>
<li><a href="#">Emergencies</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="site-map">
<h2 class="sr-only">Footer</h2>
<a role="button" tabindex="0" data-target="#site-map" data-toggle="collapse" class="site-map-toggle collapsed" aria-label="Toggle sitemap">Sitemap</a>
<div class="container-fluid" id="site-map">
<div class="row">
<div class="col-sm-6 col-md-3">
<h3>Einreise & Aufenthalt in der Schweiz</h3>
<ul class="list-unstyled">
<li><a href="#">Einreise in die Schweiz</a></li>
<li><a href="#">Visabestimmungen</a></li>
<li><a href="#">Aufenthalt in der Schweiz</a></li>
<li><a href="#">Geschäftstätigkeit in der Schweiz</a></li>
<li><a href="#">Ausländische Vertretungen in der Schweiz</a></li>
<li><a href="#">Informationen zur Schweiz</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<h3>Einreise & Aufenthalt in der Schweiz</h3>
<ul class="list-unstyled">
<li><a href="#">Einreise in die Schweiz</a></li>
<li><a href="#">Visabestimmungen</a></li>
<li><a href="#">Aufenthalt in der Schweiz</a></li>
<li><a href="#">Geschäftstätigkeit in der Schweiz</a></li>
<li><a href="#">Ausländische Vertretungen in der Schweiz</a></li>
<li><a href="#">Informationen zur Schweiz</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<h3>Einreise & Aufenthalt in der Schweiz</h3>
<ul class="list-unstyled">
<li><a href="#">Einreise in die Schweiz</a></li>
<li><a href="#">Visabestimmungen</a></li>
<li><a href="#">Aufenthalt in der Schweiz</a></li>
<li><a href="#">Geschäftstätigkeit in der Schweiz</a></li>
<li><a href="#">Ausländische Vertretungen in der Schweiz</a></li>
<li><a href="#">Informationen zur Schweiz</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<h3>Einreise & Aufenthalt in der Schweiz</h3>
<ul class="list-unstyled">
<li><a href="#">Einreise in die Schweiz</a></li>
<li><a href="#">Visabestimmungen</a></li>
<li><a href="#">Aufenthalt in der Schweiz</a></li>
<li><a href="#">Geschäftstätigkeit in der Schweiz</a></li>
<li><a href="#">Ausländische Vertretungen in der Schweiz</a></li>
<li><a href="#">Informationen zur Schweiz</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-3">
<h3>Einreise & Aufenthalt in der Schweiz</h3>
<ul class="list-unstyled">
<li><a href="#">Einreise in die Schweiz</a></li>
<li><a href="#">Visabestimmungen</a></li>
<li><a href="#">Aufenthalt in der Schweiz</a></li>
<li><a href="#">Geschäftstätigkeit in der Schweiz</a></li>
<li><a href="#">Ausländische Vertretungen in der Schweiz</a></li>
<li><a href="#">Informationen zur Schweiz</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<h3>Einreise & Aufenthalt in der Schweiz</h3>
<ul class="list-unstyled">
<li><a href="#">Einreise in die Schweiz</a></li>
<li><a href="#">Visabestimmungen</a></li>
<li><a href="#">Aufenthalt in der Schweiz</a></li>
<li><a href="#">Geschäftstätigkeit in der Schweiz</a></li>
<li><a href="#">Ausländische Vertretungen in der Schweiz</a></li>
<li><a href="#">Informationen zur Schweiz</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<h3>Einreise & Aufenthalt in der Schweiz</h3>
<ul class="list-unstyled">
<li><a href="#">Einreise in die Schweiz</a></li>
<li><a href="#">Visabestimmungen</a></li>
<li><a href="#">Aufenthalt in der Schweiz</a></li>
<li><a href="#">Geschäftstätigkeit in der Schweiz</a></li>
<li><a href="#">Ausländische Vertretungen in der Schweiz</a></li>
<li><a href="#">Informationen zur Schweiz</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<h3>Einreise & Aufenthalt in der Schweiz</h3>
<ul class="list-unstyled">
<li><a href="#">Einreise in die Schweiz</a></li>
<li><a href="#">Visabestimmungen</a></li>
<li><a href="#">Aufenthalt in der Schweiz</a></li>
<li><a href="#">Geschäftstätigkeit in der Schweiz</a></li>
<li><a href="#">Ausländische Vertretungen in der Schweiz</a></li>
<li><a href="#">Informationen zur Schweiz</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- End of Site-map -->
<!-- Use normal `container` instead of `container-fluid` -->
<div class="container-fluid">
<h3>Informiert bleiben</h3>
<nav>
<ul>
<li><a class="icon icon--before icon--twitter" href="#">Twitter</a></li>
<li><a class="icon icon--before icon--facebook" href="#">Facebook</a></li>
<li><a class="icon icon--before icon--rss" href="#">RSS Feed</a></li>
<li><a class="icon icon--before icon--message" href="#">Newsletter</a></li>
</ul>
</nav>
<h3>DEZA – Weltweit vor Ort</h3>
<p>
Besuchen Sie die Websites der Schweizer Kooperationsbüros.
</p>
<p>
<select name="country">
<option value="Switzerland">Switzerland</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="...">...</option>
</select>
</p>
</div>
<div class="footer-address">
<span class="hidden-xs">Bundesamt für Statistik</span>
<nav class="pull-right">
<ul>
<li><a href="#">Rechtliches</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</nav>
</div>
</footer>