Outils pour utilisateurs
html_css:bootstrap4:barre_laterale
Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
|
html_css:bootstrap4:barre_laterale [2020/02/29 08:06] marclebrun |
html_css:bootstrap4:barre_laterale [2020/03/03 13:35] (Version actuelle) |
||
|---|---|---|---|
| Ligne 11: | Ligne 11: | ||
| </nav> | </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="container-fluid"> | ||
| <div class="row"> | <div class="row"> | ||
| - | | + | |
| + | <nav class="col-3"> | ||
| + | </nav> | ||
| + | |||
| + | <main class="col-9" role="main"> | ||
| + | </main> | ||
| + | | ||
| </div> | </div> | ||
| </div> | </div> | ||
| + | </code> | ||
| - | </body> | + | 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> | ||
| + | |||
| + | <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> | ||
| + | |||
html_css/bootstrap4/barre_laterale.1582963611.txt.gz · Dernière modification: 2020/02/29 08:06 (modification externe)
Outils de la page
Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
