Fondation sidebar
navigation Sidebar
l' utilisation de la Fondation <ul class="side-nav">
"> pour créer une barre latérale:
Exemples
<Class Ul = "side-nav ">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
<Li> <a href = "#"> Link 4 </ a> </ li>
</ Ul>
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
<Li> <a href = "#"> Link 4 </ a> </ li>
</ Ul>
Essayez »
Le lien d'activation avec la ligne de démarcation
Je clique sur le lien dans <li>
Utilisez le .active
classe identifiée en utilisant .divider
classe pour ajouter la ligne horizontale:
Exemples
<Class Ul = "side-nav ">
<Li class = "active"> <a class = href = "a" "#"> Link 1 </ a> </ li>
<Li> <a class = "a" href = "#"> Link 2 </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a class = "a" href = "#"> Link 3 </ a> </ li>
<Li> <a class = "a" href = "#"> Link 4 </ a> </ li>
</ Ul>
<Li class = "active"> <a class = href = "a" "#"> Link 1 </ a> </ li>
<Li> <a class = "a" href = "#"> Link 2 </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a class = "a" href = "#"> Link 3 </ a> </ li>
<Li> <a class = "a" href = "#"> Link 4 </ a> </ li>
</ Ul>
Essayez »
Grille sidebar
Nous pouvons utiliser le mode de conception de la grille pour définir la barre de navigation latérale, les exemples sont les suivants:
Exemples
<Class Div = "ligne">
<Class = "Div moyennes-4 colonnes" style = "background-color: # f1f1f1;">
<Class Ul = "side-nav ">
<Li class = "active"> <a href = "#"> Accueil </ a> </ li>
<Li> <a href = "#"> savoir HTML </ a> </ li>
...
</ Ul>
</ Div>
<class = "Div moyennes-8 colonnes">
<H1> Side Nav </ h1 >
<P> Certains textes .. </ p>
...
</ Div>
</ Div>
<Class = "Div moyennes-4 colonnes" style = "background-color: # f1f1f1;">
<Class Ul = "side-nav ">
<Li class = "active"> <a href = "#"> Accueil </ a> </ li>
<Li> <a href = "#"> savoir HTML </ a> </ li>
...
</ Ul>
</ Div>
<class = "Div moyennes-8 colonnes">
<H1> Side Nav </ h1 >
<P> Certains textes .. </ p>
...
</ Div>
</ Div>
Essayez »