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_5:racsok [2024/09/06 22:16] – admin
+++ oktatas:web:front-end_framework:bootstrap_5:racsok [2025/08/01 09:14] (aktuális) – eltávolítva admin
@@ Sor 1: / Sor 1: @@
-[[oktatas:web:front-end_framework:bootstrap_5|< Bootsrap 5]]
-====== Rácsok ======
-  * **Szerző:** Sallai András
-  * Copyright (c) 2022, Sallai András, 2022
-  * Szerkesztve: 2024
-  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
-  * Web: https://szit.hu
-===== A Bootsrap5 rácsok =====
-A Bootsrap5 rácsai flexdobozokból jönnek létre.
-darab oszlop van meghatározva webhelyen keresztül.
-Ha nincs szükséged 12 oszlopra, akkor arányosan
-feloszthatod a rendelkezésre álló 12 helyet.
-oszlop:
-<html>
-<style>
-.gridsystem01 tr td {
-    background-color: #bbb;
-    height: 100px;
-    border-spasing: 3px;
-}
-.gridsystem01 {
-    width: 400px;
-}
-</style>
-<table class="gridsystem01">
-    <tr>
-        <td></td>
-        <td></td>
-        <td></td>
-        <td></td>
-        <td></td>
-        <td></td>
-        <td></td>
-        <td></td>
-        <td></td>
-        <td></td>
-        <td></td>
-        <td></td>
-    <tr>
-</table>
-</html>
-Három rész:
-<html>
-<style>
-.gridsystem02 tr td {
-    background-color: #bbb;
-    height: 100px;
-}
-.gridsystem02 {
-    width: 400px;
-}
-</style>
-<table class="gridsystem02">
-    <tr>
-        <td></td>
-        <td></td>
-        <td></td>
-    <tr>
-</table>
-</html>
-Két rész:
-<html>
-<style>
-.gridsystem03 tr td {
-    background-color: #bbb;
-    height: 100px;
-}
-.gridsystem03 {
-    width: 400px;
-}
-</style>
-<table class="gridsystem03">
-    <tr>
-        <td></td>
-        <td colspan="2"></td>
-    <tr>
-</table>
-</html>
-Négy rész, forrással:
-<html>
-<style>
-.gridsystem04 tr td {
-    background-color: #00bb00;
-    height: 100px;
-    border-spacing: 3px;
-}
-.gridsystem04 {
-    width: 400px;
-}
-</style>
-<table class="gridsystem04">
-    <tr>
-        <td>a</td>
-        <td>b</td>
-        <td>c</td>
-        <td>d</td>
-    <tr>
-</table>
-</html>
-<code html>
-<div class="row">
-  <div class="col-sm-3">a</div>
-  <div class="col-sm-3">b</div>
-  <div class="col-sm-3">c</div>
-  <div class="col-sm-3">d</div>
-</div>
-</code>
-===== Maximális méretek =====
-Az oszlopok egy bizonyos méret alatt egymás alá kerülnek.
-Hogy mi legyen ez a határ a **sm, md, lg, xl** kulcsokkal határozhatjuk meg.
-<code html>
-<div class="row bg-success">
-  <div class="col-sm-4">sm</div>
-  <div class="col-sm-4">sm</div>
-  <div class="col-sm-4">sm</div>
-</div>
-<div class="row bg-warning">
-  <div class="col-md-4">md</div>
-  <div class="col-md-4">md</div>
-  <div class="col-md-4">md</div>
-</div>
-<div class="row bg-info">
-  <div class="col-lg-4">lg</div>
-  <div class="col-lg-4">lg</div>
-  <div class="col-lg-4">lg</div>
-</div>
-<div class="row bg-danger">
-  <div class="col-xl-4">xl</div>
-  <div class="col-xl-4">xl</div>
-  <div class="col-xl-4">xl</div>
-</div>
-</code>
-<html>
-<iframe src="m/bootstrap/grid/index_grid_max.html" sandbox
-style="resize:both;">
-</iframe>
-</html>
-Mivel nem lehet teljes szélességében látni a fenti beépített weblapot,
-itt egy közvetlen link:
-  * https://szit.hu/m/bootstrap/grid/index_grid_max.html