Forum | Najnowsze tutoriale tworzenie stron internetowych
 

W3.CSS Referencje


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