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 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é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.

<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

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

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

<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

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: