HTML-guide til udvikling af integrationsløsninger til Borger.dk

Faneblade

Faneblade kan benyttes både i selvbetjeningsløsninger og integrationer på eksempelvis Min Side.

Klassen active benyttes til at angive det aktive menupunkt.

<ul class="nav nav-tabs">
	<li class="active"><a href="#">Menupunkt</a></li>
	<li><a href="#">Menupunkt</a></li>
	<li><a href="#">Menupunkt</a></li>
	<li><a href="#">Menupunkt</a></li>
	<li><a href="#">Menupunkt</a></li>
</ul>

Responsive faneflade

Som udgangspunkt vises faneblade på næste linje, hvis der ikke yderligere vandret plads i den boks, som de er en del af.

Det er dog også også muligt at lave responsive faneflade, der skaber menupunkter, der lægger oven på hinanden på små skærme. Dette gøres med klassen nav-tabs-responsive.

<ul class="nav nav-tabs nav-tabs-responsive">
	<li class="active"><a href="#">Menupunkt</a></li>
	<li><a href="#">Menupunkt</a></li>
	<li><a href="#">Menupunkt</a></li>
	<li><a href="#">Menupunkt</a></li>
	<li><a href="#">Menupunkt</a></li>
</ul>

Fanebladsboks

Det er muligt at lave en fanebladsboks, så man eksempelvis på et afgrænset område af en løsning kan skifte indhold

<div class="tabbable"> <!-- Only required for left/right tabs -->
	<ul class="nav nav-tabs">
		<li class="active"><a href="#tab1" data-toggle="tab">Simpel søgning</a></li>
		<li><a href="#tab2" data-toggle="tab">Avanceret søgning</a></li>
		<li><a href="#tab2" data-toggle="tab">Kortsøgning</a></li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane active">
			<form class="form-horizontal">
				...
			</form>
		</div>
	</div>
</div>