Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:front-end_framework:bootstrap_4:racsok

< Bootsrap 4

Rácsok

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:

Három rész:

Két rész:

Négy rész, forrással:

a b c d

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

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.

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

Mivel nem lehet teljes szélességében látni a fenti beépített weblapot, itt egy közvetlen link:

oktatas/web/front-end_framework/bootstrap_4/racsok.txt · Utolsó módosítás: 2021/04/26 14:20 szerkesztette: admin