szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:front-end_framework:bootstrap 4|< Bootsrap 4]]

====== Rácsok ======

  * **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 Bootsrap4 rácsok =====

A Bootsrap4 rácsai flexdobozokból jönnek létre.
12 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. 

12 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" 
width="400"
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