< Bootsrap 4

Konténerek

Szerző: Sallai András

Copyright © Sallai András, 2020

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

A konténerek

A konténerek a bennük lévő tartalmat veszik körbe. Kétféle konténer van:

.container - fix szélességű konténer

.container-fluid - folyékony szélességű konténert biztosít

A fix szélességű konténer

A fix szélességű konténerekhez használjuk a .container osztályt.

Ezek a fix szélességek a képernyő méretének változásával változnak, a max-width értékkel megadva.

Extra small	Small	Medium	Large	Extra Large
<576px	>=576px	>=768px	>=992px	>=1200px
max-width	100%	540px	720px	960px	1140px
<div class="container"> <h1>Bootsrap weblap</h1> <p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div>

Próbáljuk ki a fix szélességű weblapot. Változtassuk meg a beépített weblap méretét. A méret a beépített weblap jobb alsó sarokban, egér húzással állítható.

Megnyithatjuk új böngészőlapon:

index_fix_container.html

Folyékony konténererek

A folyékony konténerek létrehozására használjuk a .container-fluid osztályt.

<div class="container-fluid">
<h1>Bootsrap weblap</h1>
<p class="text-justify">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>

Megnyithatjuk új böngészőlapon:

index_fluid_container.html

Konténerek helykitöltése

Az alapértelmezett konténer helykitöltése (belső margó /padding/) jobbról és balról 15px. Alul és felül azonban nincs helykitöltés, ezért állíthatunk, például a pt-4 jelölővel felső helykitöltést:

<div class="container pt-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

A következő osztályok használhatók:

pt-1, pt-2, pt-3, pt-4, pt-5

Konténerek szegélye és színe

<div class="container p-3 my-3 border">

container - tároló

p-3 - minden oldalon belsőmargó

my-3 - alul és felül margó

border - szegély körbe

<div class="container bg-primary text-white p-3 my-3 border">

bg-primary - kék színű háttér

text-white - fehé szöveg

Szöveg színezése:

text-muted

text-primary

text-success

text-info

text-warning

text-danger

text-secondary

text-white

text-dark

text-body

text-light

Lehetséges beállítások:

bg-primary

bg-success

bg-info

bg-warning

bg-danger

bg-secondary

bg-dark

bg-light

Rugalmas konténerek

A rugalmas konténerek minimális szélessége a .container-sm|md|lg|xl beállításokkal állíthatók be. Az alábbi táblázat bemutatja, milyen beállításnál, milyen minimális szélesség, szélességhatárok vannak:

Extra small	Small	Medium	Large	Extra Large
<576px	>=576px	>=768px	>=992px	>=1200px
.container-sm	100%	540px	720px	960px	1140px
.container-md	100%	100%	720px	960px	1140px
.container-lg	100%	100%	100%	960px	1140px
.container-lg	100%	100%	100%	100%	1140px