[[oktatas:web:front-end_framework:bootstrap 4|< Bootsrap 4]] ====== Konténerek ====== * **Szerző:** Sallai András * Copyright (c) Sallai András, 2020 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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 |

Bootsrap weblap

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.

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: * [[https://szit.hu/m/bootstrap/index_fluid_container.html|index_fix_container.html]] ===== Folyékony konténererek ===== A folyékony konténerek létrehozására használjuk a .container-fluid osztályt.

Bootsrap weblap

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.

Megnyithatjuk új böngészőlapon: * [[https://szit.hu/m/bootstrap/index_fluid_container.html|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:
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.
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 =====
* container - tároló * p-3 - minden oldalon belsőmargó * my-3 - alul és felül margó * border - szegély körbe
* 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 |