Klasy kontenerów
| Klasa | definiuje | |
|---|---|---|
| w3-kontenerów | Pojemnik na zawartość HTML (dodaje 16px dopełnienie lewy i prawy) | Spróbuj |
| Używany z klas kolorów | Spróbuj | |
| Używane jako nagłówek | Spróbuj | |
| Używany jako stopce | Spróbuj | |
| Używany z w3-leftbar | Spróbuj | |
| Używany z w3-bottombar | Spróbuj | |
| w3 poprzeczny | Pojemnik na zawartość HTML (dodaje 16px margines górny i dolny) | Spróbuj |
| w3-odznaka | Okrągły znaczek 8 | Spróbuj |
| w3-tag | Tag prostokątna bardziej później! | Spróbuj |
| w3-ul | Nieuszeregowana Lista | Spróbuj |
| w3-display-kontenerów | Pojemnik na zajęciach W3-display- (pozycja elementu w lewym górnym rogu, w prawym górnym rogu, na dole po lewej stronie lub w prawym dolnym rogu lub w środku pojemnika) | Spróbuj |
| w3-image | Przestarzała. Użyj w3-display-pojemnik zamiast. | Spróbuj |
| w3-blockquote | Usunięto w 2,0 (zastosowanie w3-leftbar zamiast) | Spróbuj |
| w3-code | pojemnik code | Spróbuj |
| w3-Progress-kontenerów | Pasek postępu kontenerów | Spróbuj |
Tabela Klasy
| Klasa | definiuje | |
|---|---|---|
| w3-table | Pojemnik do tabeli HTML | Spróbuj |
| w3 paski | Rozłożony tabeli | Spróbuj |
| w3-border | graniczy tabeli | Spróbuj |
| w3-graniczy | graniczy linie | Spróbuj |
| w3-centered | centered tabeli | Spróbuj |
| w3-hoverable | Hoverable tabeli | Spróbuj |
| w3-table-all | Wszystkie właściwości ustawione | Spróbuj |
| Z w3 paski W3 transgranicznym, i w3-graniczy | Spróbuj | |
| Z kolorowym głowy | Spróbuj | |
| Z w3-odpowiedzialna | Spróbuj | |
| Z w3-tiny | Spróbuj | |
| Z w3-small | Spróbuj | |
| Z w3-large | Spróbuj | |
| Z w3-Xlarge | Spróbuj | |
| Z w3-XXLarge | Spróbuj | |
| Z w3-xxxlarge | Spróbuj | |
| kolorem | Spróbuj | |
| Z w3-ple | Spróbuj |
Klasy karciane
| Klasa | definiuje | |
|---|---|---|
| w3-kartkę | Pojemnik na treści HTML (z ramką) | Spróbuj |
| w3-card-2 | Pojemnik na treści HTML (2px ramką shadow) | Spróbuj |
| w3-card-4 | Pojemnik na treści HTML (4px ramką shadow) | Spróbuj |
| w3-card-8 | Pojemnik na treści HTML (8 pikseli ramką shadow) | Spróbuj |
| w3-card-12 | Pojemnik na treści HTML (12px graniczy shadow) | Spróbuj |
| w3-card-16 | Pojemnik na treści HTML (16px graniczy shadow) | Spróbuj |
| w3-card-24 | Pojemnik na treści HTML (24px graniczy shadow) | Spróbuj |
reagujących Klasy
| Klasa | definiuje | |
|---|---|---|
| w3-rzędowy | Pojemnik do jednego rzędu zawartości płynu reagującego | Spróbuj |
| w3-row-wyściółka | Row, gdzie wszystkie kolumny mają domyślną wyściółkę | Spróbuj |
| w3-content | Pojemnik na stałym rozmiarze skupione treści | Spróbuj |
| w3 połowę | Połowa Pojemnik kolumna (1/2) Ekran | Spróbuj |
| W3 trzecia | Trzecia kolumna kontenerów (1/3) Ekran | Spróbuj |
| w3-twothird | Dwie trzecie Pojemnik kolumna (2/3) Ekran | Spróbuj |
| w3 czwarta | Dzielnica Pojemnik kolumna (1/4) Ekran | Spróbuj |
| w3-threequarter | Trzy czwarte Pojemnik kolumna (3/4) Ekran | Spróbuj |
| w3-kol | Pojemnik Kolumna za treści HTML | Spróbuj |
| L1 - L12 | Rozmiary reagujące na dużych ekranach | Spróbuj |
| m1 - m12 | rozmiary ekranów reagujących na średnich | Spróbuj |
| S1 - S12 | Rozmiary reagujących na małych ekranach | Spróbuj |
| w3-hide-small | Zawartość ukryć się na małych ekranach (mniej niż 601px) | Spróbuj |
| w3-hide-Medium | Ukrywanie treści średnich ekranów | Spróbuj |
| w3-hide-large | Zawartość ukryć się na dużych ekranach (większy niż 992px) | Spróbuj |
Klasy nawigacyjne
| Klasa | definiuje | |
|---|---|---|
| w3-navbar | Pasek nawigacyjny | Spróbuj |
| Składany pasek nawigacyjny | Spróbuj | |
| w3-topnav | Górnym pasku nawigacyjnym | Spróbuj |
| w3-sidenav | Boczny pasek nawigacyjny | Spróbuj |
| Boczny pasek nawigacyjny nakładanie główną treść | Spróbuj | |
| Boczny pasek nawigacyjny nakładanie wszystkich głównych treści | Spróbuj | |
| Boczny pasek nawigacyjny przesuwając główną treść w prawo | Spróbuj | |
| Boczny pasek nawigacyjny z nakładki tle | Spróbuj | |
| w3-collapse | W pełni automatyczny reagujący boku nawigacji | Spróbuj |
| w3-dropnav | rozwijane nawigacji | Spróbuj |
| w3-rozwijane kliknięciem | Klikalny rozwijana elementem | Spróbuj |
| w3-rozwijana-aktywowanych | Hoverable elementem rozwijana | Spróbuj |
| Hoverable elementem rozwijana (stosowany w w3-paska nawigacyjnego) | Spróbuj | |
| Hoverable elementem rozwijana (stosowany w w3-sidenav) | Spróbuj | |
| Hoverable elementem rozwijana (stosowany w w3-topnav) | Spróbuj | |
| w3-akordeon | Ukryć i pokazać zawartość składaną | Spróbuj |
| Klikalny akordeon i rozwijana stosowane w w3-sidenav | Spróbuj | |
| w3-paginacja | linki paginacji | Spróbuj |
Klasy przycisków
| Klasa | definiuje | |
|---|---|---|
| w3-btn | Prostokątny przycisk HTML | Spróbuj |
| Prostokątny przycisk HTML z Ripple Effect | Spróbuj | |
| w3-btn-floating | Okrągły przycisk pływające | Spróbuj |
| Circular pływających przycisk z Ripple Effect | Spróbuj | |
| w3-btn-group | zgrupowane przyciski | Spróbuj |
| w3-btn-block | przyciski pełnej szerokości (100%) | Spróbuj |
Klasy wejściowe
| Klasa | definiuje | |
|---|---|---|
| w3-forma | Tak samo jak w3-wyściółką | Spróbuj |
| Formularz wejściowy jak karta | Spróbuj | |
| w3-input | elementy napędowe | Spróbuj |
| Elementy napędowe (na górze etykiety) | Spróbuj | |
| Elementy napędowe (Etykiety na dole) | Spróbuj | |
| w3-group | Grupa elementów HTML | Spróbuj |
| w3-label | etykieta wejściowa | Spróbuj |
| w3-validate | Sprawdza wejściowego (kolor zmienia się, gdy nieprawidłowe wejście) | Spróbuj |
| w3-check | Pole input type | Spróbuj |
| w3-Radio | input type Radio | Spróbuj |
| w3-select | Wybór wejścia elementem | Spróbuj |
| w3-animate-input | Animuje szerokość wejścia 100% | Spróbuj |
modalne Klasy
| Klasa | definiuje | |
|---|---|---|
| w3-modal | Modal kontenerów | Spróbuj |
| w3-modal-content | Modal wyskakujący elementem | Spróbuj |
| w3-podpowiedź | Etykietka elementem | Spróbuj |
| w3-text | tekst tooltip | Spróbuj |
| Etykietka inline | Spróbuj |
Zajęcia animacyjne
| Klasa | definiuje | |
|---|---|---|
| w3-animate-top | Animuje element z górnej -300px do 0px | Spróbuj |
| w3-ożywione lewej | Animuje element od lewej -300px do 0px | Spróbuj |
| w3-animate-bottom | Animuje element z dolnym -300px do 0px | Spróbuj |
| w3-animate-tuż | Animuje element z prawej -300px do 0px | Spróbuj |
| w3-animate-krycie | Animuje danego elementu krycie od 0 do 1 | Spróbuj |
| w3-animate-zoom | Animuje element od 0 do 100% rozmiarów | Spróbuj |
| w3-animate-fading | Animuje danego elementu krycie od 0 do 1 i 1 do 0 (zanika i na zewnątrz) | Spróbuj |
| w3-spin | Zakręć ikoną 360 stopni | Spróbuj |
| Zakręć dowolnego elementu o 360 stopni | Spróbuj | |
| w3-animate-input | Animuje szerokość pola wejściowego do 100% | Spróbuj |
Klasy użytkowe
| Klasa | definiuje | |
|---|---|---|
| w3-tiny | Określa rozmiar czcionki 10 pikseli | Spróbuj |
| w3-small | Określa rozmiar czcionki 12 pikseli | Spróbuj |
| w3-large | Określa rozmiar czcionki 20 pikseli | Spróbuj |
| w3-XLarge | Określa rozmiar czcionki 24 pikseli | Spróbuj |
| w3-XXLarge | Określa rozmiar czcionki 32 pikseli | Spróbuj |
| w3-xxxlarge | Określa rozmiar czcionki 48 pikseli | Spróbuj |
| w3-jumbo | Określa rozmiar czcionki 64 pikseli | Spróbuj |
| w3-slim | Określa szczuplejsze tekst | Spróbuj |
| w3-wide | Określa szerszy tekst | Spróbuj |
| w3-pionowe | Określa tekst pionowy | Spróbuj |
| w3-top | Poprawiono treści na górę strony | Spróbuj |
| w3-center | centered treści | Spróbuj |
| w3-circle | krążył treści | Spróbuj |
| w3-hide | Omiń (display: none) | Spróbuj |
| w3-show | Pokaż treść (display: block) | Spróbuj |
| w3-show-block | Alias w3-show (display: block) | Spróbuj |
| w3-show-inline-block | Pokaż treść jako inline-block (display: inline-block) | Spróbuj |
| w3-hide-small | Zawartość ukryć się na małych ekranach (mniej niż 601px) | Spróbuj |
| w3-hide-Medium | Ukrywanie treści średnich ekranów | Spróbuj |
| w3-hide-large | Zawartość ukryć się na dużych ekranach (większy niż 992px) | Spróbuj |
| w3 lewej | Lewa Skorygowana treść | Spróbuj |
| w3-tuż | Prawo Skorygowana treść | Spróbuj |
| w3-left-align | Tekst wyrównany do lewej | Spróbuj |
| w3-right-align | Tekst wyrównany do prawej | Spróbuj |
| w3-uzasadnić | Prawe i lewe tekst wyrównany | Spróbuj |
| w3-display-kontenerów | Pojemnik na zajęcia w3-display- (position: relative) | Spróbuj |
| w3-display-topleft | Zawartość Pozycja w lewym górnym rogu | Spróbuj |
| w3-display-topright | Zawartość Pozycja w prawym górnym rogu | Spróbuj |
| w3-display-bottomleft | Zawartość Pozycja w lewym dolnym rogu | Spróbuj |
| w3-display-bottomright | Zawartość Pozycja w prawym dolnym rogu | Spróbuj |
| w3-display-middle | Zawartość Pozycja w środku (w pionie iw poziomie) | Spróbuj |
| w3-display-topmiddle | Zawartość położenie w środku na górze elementu | Spróbuj |
| w3-display-bottommiddle | Zawartość położenie w środku w dolnej części elementu | Spróbuj |
| w3-serif | Zmienia czcionkę serif | Spróbuj |
| w3-krycie | Dodaje krycie do tekstu | Spróbuj |
| Dodaje krycie do dowolnego elementu | Spróbuj | |
| w3-overlay | Tworzy efekt nakładki | Spróbuj |
| w3-text-shadow | Dodaje cień do tekstu | Spróbuj |
Klasy kolor
| Klasa | definiuje | |
|---|---|---|
| w3-czerwone | czerwony kolor tła | Spróbuj |
| w3-różowe | Kolor tła różowy | Spróbuj |
| w3-fioletowy | fioletowy kolor tła | Spróbuj |
| w3-deep-fioletowy | Kolor tła głęboki fiolet | Spróbuj |
| w3-indygo | Kolor tła indygo | Spróbuj |
| w3-blue | Kontekst kolor niebieski | Spróbuj |
| w3-jasnoniebieski | Kolor tła jasnoniebieski | Spróbuj |
| w3-cyan | Kolor tła cyan | Spróbuj |
| w3-turkusowy | Kolor tła turkusowy | Spróbuj |
| w3-morski | Kolor tła morski | Spróbuj |
| w3-zielone | Kolor tła zielone | Spróbuj |
| w3-jasnozielony | Kolor tła jasnozielony | Spróbuj |
| w3-wapienny | wapna kolor tła | Spróbuj |
| w3-piaskowa | Kolor tła piasku | Spróbuj |
| w3-khaki | Kolor tła khaki | Spróbuj |
| w3-żółta | żółty kolor tła | Spróbuj |
| w3-bursztynowa | Kolor tła bursztynu | Spróbuj |
| w3-pomarańczowe | Tło w kolorze pomarańczowym | Spróbuj |
| w3-deep-pomarańczowe | Kolor tła głęboki pomarańczowy | Spróbuj |
| w3-niebiesko-szary | Kolor tła niebieski szary | Spróbuj |
| w3-brązowa | Tło kolor brąz | Spróbuj |
| w3-jasnoszary | Kolor tła jasnoszary | Spróbuj |
| w3-szara | Tło kolor szary | Spróbuj |
| w3-ciemnoszary | Kolor tła ciemnoszary | Spróbuj |
| w3-czarna | Tło kolor czarny | Spróbuj |
| w3-blado-czerwone | Kolor tła blado czerwone | Spróbuj |
| w3-blado-żółtej | Kolor tła jasnożółty | Spróbuj |
| w3-jasnozielone | Kolor tła jasnozielone | Spróbuj |
| w3-blado-niebieskie | Kolor tła bladoniebieskie | Spróbuj |
| w3-przezroczysty | Transparent background-color |
Klasy Hover
Wszystkie powyższe barwniki mogą być również stosowane jako klasy kursorem:
| Klasa | definiuje | |
|---|---|---|
| w3-hover biały | biały kolor Hover | Spróbuj |
| w3-hover czarny | Hover kolor czarny | Spróbuj |
| w3-hover czerwony | Kolor czerwony Hover | Spróbuj |
| w3-hover niebiesko | Hover kolor niebieski | Spróbuj |
| w3-hover zielone | Hover kolor zielony | Spróbuj |
| w3-hover turkusowy | Hover kolor turkusowy | Spróbuj |
| w3-hover pomarańczowy | Hover kolorze pomarańczowym | Spróbuj |
| w3-hover szara | Hover kolor szary | Spróbuj |
| w3-hover jasnozielone | Hover kolor jasnozielony | Spróbuj |
| w3-hover text-czerwona | Najedź czerwony kolor tekstu | Spróbuj |
| w3-hover text-czerwona | Najedź tekst koloru niebieskiego | Spróbuj |
| w3-hover text-zielony | Najedź tekstu Kolor Zielony | Spróbuj |
| w3-hover text-fioletowy | Hover fioletowy kolor tekstu | Spróbuj |
| w3-hover kolor obramowania | Hover kolor obramowania | Spróbuj |
| w3-hover krycie | Dodaje przejrzystości do elementu przy aktywowaniu (60% krycie) | Spróbuj |
| w3-hover cień | Dodaje cień do elementu przy aktywowaniu | Spróbuj |
| w3-hover none | Usuwa skutki kursorem myszy z elementu | Spróbuj |
okrągłe Klasy
| Klasa | definiuje | |
|---|---|---|
| w3-round | Element zaokrąglone (border-radius) 4px | Spróbuj |
| w3-round-small | Element zaokrąglone (border-radius) 2px | Spróbuj |
| w3-round-Medium | Element zaokrąglone (border-radius) 4px | Spróbuj |
| w3-round-large | Element zaokrąglone (border-radius) 8 pikseli | Spróbuj |
| w3-round-XLarge | Element zaokrąglone (border-radius) 16px | Spróbuj |
| w3-round-XXLarge | Element zaokrąglone (border-radius) 32px | Spróbuj |
| w3-round-jumbo | Element zaokrąglone (border-radius) 64px | Spróbuj |
Klasy dopełnienia
| Klasa | definiuje | |
|---|---|---|
| w3-padding-0 | Usuwa wszystkie wyściółkę z elementu | Spróbuj |
| w3-wyściółka | Wypełnienie 8 pikseli górny i dolny i 16px lewo i prawo. | Spróbuj |
| w3-padding-maleńka | Wypełnienie 2px górze i na dole, a 4px lewo i prawo. | Spróbuj |
| w3-padding-small | Wypełnienie 4px górze i na dole, a 8 pikseli w lewo i prawo. | Spróbuj |
| w3-padding-Medium | Wypełnienie 8 pikseli górny i dolny i 16px lewo i prawo. | Spróbuj |
| w3-padding-duże | Wypełnienie 12px górny i dolny i 24px lewo i prawo. | Spróbuj |
| w3-padding-XLarge | Wypełnienie 16px górny i dolny i 32px lewo i prawo. | Spróbuj |
| w3-padding-XXLarge | Wypełnienie 24px górny i dolny i 48px lewo i prawo. | Spróbuj |
| w3-padding-jumbo | Wypełnienie 32px górny i dolny i 64px lewo i prawo. | Spróbuj |
| w3-padding-top | Wypełnienie top 8 pikseli | Spróbuj |
| w3-padding-tuż | Wyściółka prawy 16px | Spróbuj |
| w3-padding-bottom | Wypełnienie dolna 8 pikseli | Spróbuj |
| w3-padding-left | Wypełnienie lewej 16px | Spróbuj |
| w3-padding-Hor-4 | Wypełnienie 4px górny i dolny | Spróbuj |
| w3-padding-Hor-8 | Wypełnienie 8 pikseli górny i dolny | Spróbuj |
| w3-padding-HOR-12 | Wypełnienie 12px górny i dolny | Spróbuj |
| w3-padding-HOR-16 | Wypełnienie 16px górny i dolny | Spróbuj |
| w3-padding-HOR-24 | Wypełnienie 24px górny i dolny | Spróbuj |
| w3-padding-HOR-32 | Wypełnienie 32px górny i dolny | Spróbuj |
| w3-padding-HOR-48 | Wypełnienie 48px górny i dolny | Spróbuj |
| w3-padding-HOR-64 | Wypełnienie 64px górny i dolny | Spróbuj |
| w3-padding-Hor-128 | Dopełnienie 128px górny i dolny | Spróbuj |
| w3-padding-ver-4 | Wypełnienie 4px lewo i prawo. | Spróbuj |
| w3-padding-ver-8 | Wypełnienie 8 pikseli w lewo i prawo. | Spróbuj |
| w3-padding-ver-16 | Wypełnienie 16px lewo i prawo. | Spróbuj |
| w3-padding-ver-24 | Wypełnienie 24px lewo i prawo. | Spróbuj |
| w3-padding-ver-32 | Wypełnienie 32px lewo i prawo. | Spróbuj |
| w3-padding-ver-48 | Wypełnienie 48px lewo i prawo. | Spróbuj |
| w3-padding-ver-64 | Wypełnienie 64px lewo i prawo. | Spróbuj |
Klasy Margin
| Klasa | definiuje | |
|---|---|---|
| w3-margin-0 | Usuwa wszystkie marginesy elementu | Spróbuj |
| w3-marża | margines 16px | Spróbuj |
| w3-margin-top | Margines górny 16px | Spróbuj |
| w3-margin-right | Prawy margines 16px | Spróbuj |
| w3-margin-bottom | Dolny margines 16px | Spróbuj |
| w3-margin-left | Margines lewy 16px | Spróbuj |
Klasy graniczne
| Klasa | definiuje | |
|---|---|---|
| w3-border | Granice (górny, prawy, dolny, lewy) | Spróbuj |
| w3-border-top | Granica górna | Spróbuj |
| w3-border-right | prawej krawędzi | Spróbuj |
| w3-border-bottom | dolnej granicy | Spróbuj |
| w3-border-left | Granicznej w lewo | Spróbuj |
| w3-border-0 | Usuwa wszelkie granice | Spróbuj |
| w3-kolor obramowania | Wyświetla wszystkie zdefiniowane granice w określonym kolorze (jak czerwony, itp) | Spróbuj |
| w3-bottombar | Dodaje dolną granicę gruba (bar) do elementu | Spróbuj |
| w3-leftbar | Dodaje grubości lewej krawędzi (bar) do elementu | Spróbuj |
| w3-rightbar | Dodaje grubą prawą krawędź (bar) do elementu | Spróbuj |
| w3-topbar | Dodaje grubą górną granicę (bar) do elementu | Spróbuj |
| w3-hover kolor obramowania | Hoverable kolor obramowania | Spróbuj |