2.5.0
- wrapped footer columns in a
div.row
2.1.0
- placed links in a
ul.list-unstyledlist - changed
.col-sm-3in.col-sm-4.col-md-3for more readability on small size and removed useless.rowwrapper
Im Seitenfuss werden Links platziert, die somit auf allen Seiten gleich zugänglich sind. Diese können auf Seiten in der aktuellen Webseite als Sitemap verlinken oder aber auch auf externe Inhalte, wie z.B. Partnersites verweisen. Der Footer lässt sich nach Bedarf in verschiedene Bereiche unterteilen.
Umsetzung für Smartphones
Auf Smartphones werden einige Funktionen aus dem Header, wie z.B. Service-Navigation und das vollständige Bundeslogo in den Footer verschoben.
<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>