Felhasználói eszközök
oktatas:web:front-end_framework:bootstrap_5:kontenerek
Tartalomjegyzék
Konténerek
- Szerző: Sallai András
- Copyright © Sallai András, 2021
- Web: https://szit.hu
Bootstrap konténerek
A konténer alapvető elrendezési elem a Bootstrap-ben.
A Bootstrap három különböző konténert tartalmaz:
- .container - minden töréspontnál beállít egy max-width értéket
- .container-fluid - minden töréspontnál 100%
- .container-{töréspont} - a max-width megadott töréspontig 100%
A következő táblázatban látható a .countainer és a .container-fluid-hoz képest, hogyan viszonyulnak a töréspont beállítások.
| Extra small | Small | Medium | Large | Extra Large | XX-Large | |
| <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px | |
| .container | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
| .container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
| .container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
| .container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
| .container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
Az alapértelmezett tároló
Az alapértelmezett tároló egy reszponzív, fix szélességű tároló.
<div class="container"> <!-- Ide jön a tartalom --> </div>
Érzékeny konténerek
<div class="container-sm">100% a small töréspontig</div> <div class="container-md">100% a medium töréspontig</div> <div class="container-lg">100% a large töréspontig</div> <div class="container-xl">100% az extra large töréspontig</div> <div class="container-xxl">100% az extra extra large töréspontig</div>
Folyékony tartály
<div class="container-fluid"> ... </div>
oktatas/web/front-end_framework/bootstrap_5/kontenerek.txt · Utolsó módosítás: 2021/10/24 17:46 szerkesztette: admin
Hacsak máshol nincs egyéb rendelkezés, ezen wiki tartalma a következő licenc alatt érhető el: CC Attribution-Share Alike 4.0 International
