Rozložení W3.CSS
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Třídy rozložení W3.CSS
W3.CSS verze 2.90 / 2.91 zavedly následující třídy pro „sloupcové“ rozložení:
| Třída | Popis |
|---|---|
| w3-řada buněk | Kontejner pro buňky (sloupce). |
| w3-buňka | Rozložení buňky (sloupec). |
| w3-cell-top | Zarovná obsah k horní části buňky (sloupce). |
| w3-cell-middle | Zarovná obsah na svislý střed buňky (sloupce). |
| w3-cell-bottom | Zarovná obsah na konec buňky (sloupce). |
| w3-mobile | Přidá do buňky (sloupce) odezvu na prvním místě na mobilu. Zobrazuje prvky jako blokové prvky na mobilních zařízeních. |
Třídy rozvržení nahrazují zastaralé třídy rozvržení.
Nové třídiče rozložení jsou všestrannější a snáze se používají.
Zastaralé třídy rozvržení jsou uvedeny ve spodní části této stránky.
Prvky bloku HTML
Původně se prvky bloku HTML (jako prvky <div>) zobrazovaly jako svislé bloky:
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Příklad
<div class="w3-container w3-red">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green">
<p>Hello W3.CSS Layout.</p>
</div>
Rozložení buněk
Třída w3-cell předefinuje prvky bloku tak, aby se zobrazovaly vodorovně (jako buňky tabulky):
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Příklad
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
Rozvržení kontejneru
W3-cell-row je kontejner pro buňky (sloupce).
Šířka kontejneru w3-cell-row definuje celkovou šířku všech obsažených buněk.
Výchozí šířka je 100 %:
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Příklad
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Pokud změníte šířku kontejneru buněk, zmenší se celková šířka obsažených buněk:
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Příklad
<div class="w3-cell-row"
style="width:75%">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Buňky rozvržení jsou samonastavitelné
Třída w3-cell má velmi pěkný vestavěný samonastavitelný standard. Vedle sebe umístěné prvky se automaticky upraví na potřebnou šířku:
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS. Dobrý den, rozložení W3.CSS.
Příklad
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>
Buňky rozvržení Upravte na stejnou výšku
Vedle sebe umístěné prvky w3-cell se také automaticky samy nastaví na stejnou výšku:
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Příklad
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
Responzivní rozložení
Třída w3-mobile přidává mobilnímu prvku první odezvu k jakémukoli prvku HTML.
Při použití společně s w3-cell zobrazí sloupce rozložení vertikálně na malých obrazovkách/mobilních telefonech a horizontálně na středních/velkých obrazovkách.
Na středních a velkých obrazovkách:
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Na malých obrazovkách:
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Příklad
<div class="w3-container w3-red
w3-cell w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div
class="w3-container w3-blue w3-cell w3-mobile">
<p>Hello
W3.CSS Layout.</p>
</div>
Snadné zarovnání
Třída w3-cell velmi usnadňuje zarovnání textu.
Existují 3 různé třídy zarovnání:
- w3-cell-top (výchozí)
- w3-cell-middle
- w3-cell-bottom
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Příklad
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
Třída w3-cell-row roztáhne prvky tak, aby odpovídaly šířce stránky:
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Dobrý den, rozložení W3.CSS.
Příklad
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Zastaralé třídy rozložení tabulky W3.CSS
| w3-layout-container | Místo toho použijte w3-cell-row. |
| w3-layout-row | |
| w3-layout-cell | Místo toho použijte w3-cell. |
| w3-layout-top | Místo toho použijte w3-cell-top. |
| w3-layout-middle | Místo toho použijte w3-cell-middle. |
| w3-layout-bottom | Místo toho použijte w3-cell-bottom. |
| w3-layout-col | Místo toho použijte w3-mobile. |
Zastaralé třídy budou z W3.CSS ve verzi 4.0 odstraněny.