W3.Układ CSS
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Witam Układ W3.CSS.
W3.Klasy układu CSS
W3.CSS wersja 2.90/2.91 wprowadziła następujące klasy dla układu „kolumnowego”:
| Klasa | Opis |
|---|---|
| w3-wiersz komórek | Pojemnik na komórki (kolumny). |
| w3-komórka | Komórka układu (kolumna). |
| w3-komórka-góra | Wyrównuje zawartość u góry komórki (kolumny). |
| w3-komórka-środek | Wyrównuje zawartość do pionowego środka komórki (kolumny). |
| w3-komórka-dno | Wyrównuje zawartość na dole komórki (kolumny). |
| w3-mobilny | Dodaje do komórki (kolumny) responsywność zorientowaną na urządzenia mobilne. Wyświetla elementy jako elementy blokowe na urządzeniach mobilnych. |
Klasy układu zastępują przestarzałe klasy układu.
Nowy klaser układu jest bardziej wszechstronny i łatwiejszy w użyciu.
Wycofane klasy układu są wymienione na dole tej strony.
Elementy bloku HTML
Pierwotnie elementy blokowe HTML (takie jak elementy <div>) były wyświetlane jako bloki pionowe:
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Przykład
<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>
Komórki układu
Klasa w3-cell redefiniuje elementy blokowe do wyświetlania w poziomie (jak komórki tabeli):
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Przykład
<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>
Kontener układu
Wiersz w3-komórek jest pojemnikiem na komórki (kolumny).
Szerokość kontenera w3-cell-row definiuje całkowitą szerokość wszystkich zawartych komórek.
Domyślna szerokość to 100%:
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Przykład
<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>
Jeśli zmienisz szerokość kontenera komórek, zmniejszy to całkowitą szerokość zawartych komórek:
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Przykład
<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>
Komórki układu dopasowują się samoczynnie
Klasa w3-cell ma bardzo ładny wbudowany standard samoregulacji. Elementy obok siebie automatycznie dostosują się do wymaganej szerokości:
Witam Układ W3.CSS.
Witam Układ W3.CSS. Witam Układ W3.CSS.
Przykład
<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>
Dopasuj komórki układu do równej wysokości
Znajdujące się obok siebie elementy w3 komórek również automatycznie dostosują się do równej wysokości:
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Przykład
<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>
Responsywny układ
Klasa w3-mobile dodaje responsywność mobile first do dowolnego elementu HTML.
W połączeniu z w3-cell wyświetla kolumny układu pionowo na małych ekranach/telefonach komórkowych i poziomo na średnich/dużych ekranach.
Na średnich i dużych ekranach:
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Na małych ekranach:
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Przykład
<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>
Łatwe wyrównanie
Klasa w3-cell bardzo ułatwia wyrównanie tekstu.
Istnieją 3 różne klasy wyrównania:
- w3-komórka górna (domyślnie)
- w3-komórka-środek
- w3-komórka-dno
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Przykład
<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>
Klasa w3-cell-row rozciąga elementy do szerokości strony:
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Witam Układ W3.CSS.
Przykład
<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>
Przestarzałe klasy układu tabeli W3.CSS
| w3-layout-container | Zamiast tego użyj w3-cell-row. |
| w3-układ-wiersz | |
| w3-komórka-układ | Zamiast tego użyj komórki w3-cell. |
| w3-układ-top | Zamiast tego użyj w3-cell-top. |
| w3-układ-środek | Zamiast tego użyj w3-cell-middle. |
| w3-układ-dół | Zamiast tego użyj w3-cell-bottom. |
| w3-layout-col | Zamiast tego użyj w3-mobile. |
Przestarzałe klasy zostaną usunięte z W3.CSS w wersji 4.0.