Responsive multi-column list: verschil tussen versies
Uit MediaWikiGids
(Nieuwe pagina aangemaakt met 'Een veel gebruikte manier om een lijst netjes weer te geven, is door de lijst verdelen over een aantal kolommen. Om de weergave op schermen van verschillende groott...') |
(→Pure CSS) |
||
| Regel 18: | Regel 18: | ||
Zie : [https://codepen.io/ThiefMaster/pen/afGbB voorbeeld] | Zie : [https://codepen.io/ThiefMaster/pen/afGbB voorbeeld] | ||
| + | |||
| + | <div class="columns"> | ||
| + | <ul> | ||
| + | <li>William Brown</li> | ||
| + | <li>Miss Havisham</li> | ||
| + | <li>Rupert Campbell-Black</li> | ||
| + | <li>Julien Sorel</li> | ||
| + | <li>Sherlock Holmes</li> | ||
| + | <li>Nigel Molesworth</li> | ||
| + | <li>Harriet M Welsch</li> | ||
| + | <li>Oskar Schell</li> | ||
| + | <li>Elinor Dashwood</li> | ||
| + | </ul> | ||
| + | </div> | ||
Versie van 21 feb 2019 om 18:21
Een veel gebruikte manier om een lijst netjes weer te geven, is door de lijst verdelen over een aantal kolommen. Om de weergave op schermen van verschillende grootte te optimaliseren, moet het aantal kolommen afnemen bij kleinere schermen.
Oplossing met Bootstrap
NB: De sorteer-richting bij deze oplossing is "per rij" oftewel "van links naar rechts".
- Cell_1
- Cell_2
- Cell_3
- Cell_4
- Cell_5
- Cell_6
- Cell_7
Pure CSS
Zie : voorbeeld
- William Brown
- Miss Havisham
- Rupert Campbell-Black
- Julien Sorel
- Sherlock Holmes
- Nigel Molesworth
- Harriet M Welsch
- Oskar Schell
- Elinor Dashwood