Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:front-end_framework:bootstrap_4:kontenerek [2024/09/06 22:13] – [Folyékony konténererek] admin
+++ oktatas:web:front-end_framework:bootstrap_4:kontenerek [2025/08/01 09:28] (aktuális) – eltávolítva admin
@@ Sor 1: / Sor 1: @@
-[[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 |
-<code html>
-<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>
-</code>
-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ó.
-<html>
-<iframe src="m/bootstrap/index_fix_container.html" sandbox
-style="resize:both;">
-</iframe>
-</html>
-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.
-<code>
-<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>
-</code>
-<html>
-<iframe src="m/bootstrap/index_fluid_container.html" sandbox
-style="resize:both;">
-</iframe>
-</html>
-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
-px. 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:
-<code>
-<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>
-</code>
-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 =====
-<code html>
-<div class="container p-3 my-3 border">
-</code>
-  * container - tároló
-  * p-3  - minden oldalon belsőmargó
-  * my-3 - alul és felül margó
-  * border - szegély körbe
-<code html>
-<div class="container bg-primary text-white p-3 my-3 border">
-</code>
-  * 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 |