Úvod W3.CSS (kuchyňský dřez)
W3.CSS Barvy
Třídy barev w3 jsou inspirovány moderními barvami používanými v marketingu, dopravními značkami a lepicími papírky:
Kontejnery W3.CSS
Třída w3-container je nejdůležitější z tříd W3.CSS. Poskytuje rovnost jako:
- Společné okraje
- Společné vycpávky
- Běžné vertikální vyrovnání
- Běžné horizontální vyrovnání
- Běžná písma
- Běžné barvy
Třída w3-container se obvykle používá s prvky kontejneru HTML, jako jsou:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form> a další.
Toto je záhlaví
Tento článek je světle šedý a text je hnědý. Tento článek je světle šedý a text je hnědý. Tento článek je světle šedý a text je hnědý. Tento článek je světle šedý a text je hnědý. Tento článek je světle šedý a text je hnědý.
Toto je zápatí.
W3.CSS panely, poznámky a nabídky
Třída w3-panel může zobrazovat všechny druhy poznámek a uvozovek:
Londýn je nejlidnatější město Spojeného království s metropolitní oblastí s více než 9 miliony obyvatel.
Londýn je nejlidnatější město Spojeného království s metropolitní oblastí s více než 9 miliony obyvatel.
Upozornění W3.CSS
Třídu w3-panel lze také použít pro všechny druhy výstrah:
Nebezpečí!
Červená často označuje nebezpečnou nebo negativní situaci.
Varování!
Žlutá často označuje varování, které může vyžadovat pozornost.
Úspěch!
Zelená často označuje něco úspěšného nebo pozitivního.
Informace!
Modrá často označuje neutrální informativní změnu nebo akci.
Příklad
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
Karty W3.CSS
Třídy w3-card jsou vhodné pro obrázky i poznámky:
Auto
Automobil je kolové motorové vozidlo s vlastním pohonem používané k přepravě. Většina definic termínu upřesňuje, že auta jsou navržena tak, aby jezdila primárně po silnicích, aby měla sezení pro jednoho až osm lidí a typicky měla čtyři kola.
(Wikipedie)
Úžasný
Francouzské Alpy
Příklad
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>French Alps</p>
</div>
</div>
W3.CSS tabulky
Třídy w3-table zvládnou všechny druhy tabulek:
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
| Anja | Otvor | 100 |
Příklad
<table class="w3-table w3-striped w3-border">
Seznamy W3.CSS
Třída w3-ul zvládne všechny druhy seznamů:
-
Mike
Web Designer -
Podpora Jill
-
Jane
účetní -
Jack
poradce
Příklad
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tlačítka W3.CSS
Třída w3-button a w3-btn poskytuje tlačítka všech velikostí a typů.
Široká tlačítka:
Kruhová nebo čtvercová tlačítka:
Značky, štítky, odznaky a značky W3.CSS
Třídy w3-tag a w3-badge jsou schopny zobrazovat všechny druhy značek, štítků, odznaků a znaků:
2 8 A B
Nový Varování Nebezpečí Info
POD
VODOU
W3.CSS responzivní
Třídy Responsive Grid poskytují odezvu pro všechny typy zařízení: PC, notebook, tablet a mobil.
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
1/1
1/4
1/4
1/2
1/4
1/2
1/4
50 pixelů
odpočinek
1/4
odpočinek
100 pixelů
45 pixelů
odpočinek
W3.CSS také podporuje 12sloupovou přenosovou síť s prvními, malými, středními a velkými třídami.
Displej W3.CSS
Třídy w3-display vám umožňují zobrazovat prvky HTML na konkrétních pozicích:
Modály W3.CSS
Třída w3-modal poskytuje modální dialog v čistém HTML:
Modální obrázek:
W3.CSS Progress Bars
Přečtěte si více na W3.CSS Progress Bars
Rozbalovací seznamy W3.CSS
Třídy w3-dropdown poskytují rozevírací seznamy:
Akordeony W3.CSS
Read more at W3.CSS Accordions
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion with Images:
French Alps
W3.CSS Tabs
Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.
London
London is the capital of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Tabbed Image Gallery (Click on one of the pictures):
W3.CSS Navigation
The w3-bar class can be used to create a navigation bar:
Navigation bar with input:>
Navigation bar with dropdown:
The w3-sidebar class creates a side navigation:
W3.CSS Pagination
W3.CSS provides simple ways for page pagination.
Slideshows
W3.CSS provide slideshows for cycling through images or other content:
Lightbox
Combine Modals and Slideshows to create a lightbox (modal image gallery):
Nature and sunrise
❮ ❯
W3.CSS Animations
The w3-animate classes provide an easy way to slide and fade in elements:
W3.CSS Images
Styling images in W3CSS is easy:
W3.CSS Effects
Add special effects to any element:
Opacity
Grayscale
Sepia
W3.CSS Input Forms
The w3-input classes are for input forms:
Input Form
Input Form
W3.CSS Filters
Use W3.CSS Filters to search for a specific element inside a list, table, dropdown, etc:
| Name | Country |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbkop | Sweden |
| Island Trading | UK |
| Koniglich Essen | Germany |
| Laughing Bacchus Winecellars | Canada |
| Magazzini Alimentari Riuniti | Italy |
| North/South | UK |
| Paris specialites | France |
W3.CSS Fonts
With W3.CSS it is extremely easy to add fonts to a web page:
W3.CSS Tooltips
The w3-tooltip class can display all kinds of tooltips:
Hover over this text! Tooltip content
Hover over this text! Tooltip content
Color Themes
Color themes can easily be added to any web application:
Theme Indigo
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Theme Teal
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Color themes are a perfect match for mobile applications.