Případová studie W3.CSS
Vytvoření responzivního webu od nuly
V této kapitole vytvoříme W3.CSS responzivní web od nuly.
Nejprve začněte s jednoduchou HTML stránkou s počátečním výřezem a odkazem na W3.CSS.
Příklad
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Vložte prvky do kontejnerů
Chcete-li přidat běžné okraje a odsazení, vložte prvky HTML do kontejnerů (<div class="w3-container">)
Oddělte záhlaví od zbytku obsahu pomocí dvou samostatných prvků <div>:
Příklad
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Třídy barev
Třídy barev definují barvu prvků.
Tento příklad přidá barvu k prvnímu prvku <div>:
Příklad
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Velikostní třídy
Třídy velikosti definují velikost textu pro prvky.
Tento příklad přidá velikost do obou prvků záhlaví:
Příklad
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Používejte sémantické prvky
Pokud chcete dodržovat sémantická doporučení HTML5. prosím dělej!
Pro W3.CSS nezáleží na tom, zda použijete <div> nebo <header>.
Příklad
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
Vícesloupcové responzivní rozvržení
S W3.CSS je snadné vytvořit vícesloupcové responzivní rozložení.
Sloupce se automaticky přeskupí při zobrazení na různých velikostech obrazovky.
Některá pravidla mřížky:
- Začněte třídou řádků <div class="w3-row-padding">
- Použijte předdefinované třídy jako "w3-third" k rychlému vytvoření sloupců mřížky
- Umístěte textový obsah do sloupců mřížky
Tento příklad ukazuje, jak vytvořit tři sloupce stejné šířky:
Příklad
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Tento příklad ukazuje, jak vytvořit čtyři sloupce stejné šířky:
Příklad
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Sloupce S Různými šířkami
Tento příklad vytvoří rozvržení se třemi sloupci, kde je sloupec uprostřed širší než první a poslední sloupec:
Příklad
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Navigační lišty
Navigační lišta je navigační záhlaví, které je umístěno v horní části stránky.
Příklad
<nav class="w3-bar w3-black w3-large">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a
href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</nav>
Navigace na stránce
S boční navigací máte několik možností:
- Navigační panel vždy zobrazujte nalevo od obsahu stránky.
- Použijte skládací, "plně automatickou" responzivní boční navigaci.
- Otevřete navigační panel nad levou částí obsahu stránky.
- Otevřete navigační panel přes veškerý obsah stránky.
- Při otevírání navigačního panelu posuňte obsah stránky doprava.
- Zobrazte navigační panel na pravé straně místo na levé straně
Tento příklad otevře navigační panel nad levou částí obsahu stránky:
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none"
id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a
class="w3-bar-item w3-button" href="#">Link 2</a>
<a
class="w3-bar-item w3-button"
href="#">Link 3</a>
</nav>
JavaScript používaný k otevření a skrytí nabídky:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}