Cramnurbel

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Barre Latérale (Sidebar) ======

Voici un layout contenant une **barre de navigation** et une **barre latérale**.

Diviser la page entre la **navbar** et la div **container** :

<code html>
<body>

    <nav class="navbar ...">
    </nav>
    
    <div class="container-fluid">
    </div>

</body>
</code>

Le conteneur sera constitué d'une ligne et de deux colonnes :

<code html>
    <div class="container-fluid">
        <div class="row">
            
            <nav class="col-3">
            </nav>
            
            <main class="col-9" role="main">
            </main>
            
        </div>
    </div>
</code>

Ajout de CSS afin de fixer la sidebar sur toute la hauteur, même si la
partie principale peut scroller :

<code html>
    <div class="container-fluid">
        <div class="row">
            
            <nav class="col-3 bg-light sidebar">
            </nav>
            
            <main class="col-9 ml-auto" role="main">
            </main>
            
        </div>
    </div>
</code>

<code css>
.sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	padding: 48px 10px 0 10px;
	border-right: 1px solid gainsboro;
}

main {
	padding-top: 50px;
}
</code>

Ensuite, remplir la **sidebar** avec des liens :

<code html>
            <nav class="col-3 bg-light sidebar">

                <h6>Section 1</h6>
                
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a href="#" class="nav-link active">Option 1</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link"       >Option 2</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link"       >Option 3</a>
                    </li>
                </ul>

                <h6>Section 2</h6>
                
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a href="#" class="nav-link"       >Option 4</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link"       >Option 5</a>
                    </li>
                </ul>
            </nav>
</code>
Cramnurbel

Outils pour utilisateurs

Outils du site

Outils de la page
