W3.CSS Vaka Çalışması
Sıfırdan Duyarlı Bir Web Sitesi Oluşturma
Bu bölümde sıfırdan W3.CSS uyumlu bir web sitesi oluşturacağız.
İlk olarak, ilk görünüm penceresi ve W3.CSS bağlantısı içeren basit bir HTML sayfasıyla başlayın.
Örnek
<!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>
Öğeleri Kaplara Yerleştirin
Ortak kenar boşlukları ve dolgu eklemek için HTML öğelerini kapsayıcıların içine koyun (<div class="w3-container">)
İki ayrı <div> öğesi kullanarak başlığı içeriğin geri kalanından ayırın:
Örnek
<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>
Renk Sınıfları
Renk sınıfları, öğelerin rengini tanımlar.
Bu örnek, ilk <div> öğesine bir renk ekler:
Örnek
<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>
Beden Sınıfları
Boyut sınıfları, öğeler için metin boyutunu tanımlar.
Bu örnek, her iki başlık öğesine de bir boyut ekler:
Örnek
<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>
Semantik Öğeleri Kullan
HTML5 semantik önerilerini takip etmeyi seviyorsanız. lütfen yap!
<div> veya <header> kullanmanız W3.CSS için fark etmez.
Örnek
<!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>
Çok Sütunlu Duyarlı Düzen
W3.CSS ile çok sütunlu duyarlı bir düzen oluşturmak kolaydır.
Sütunlar, farklı ekran boyutlarında görüntülendiğinde kendilerini otomatik olarak yeniden düzenler.
Bazı ızgara kuralları:
- Bir satır sınıfıyla başlayın <div class="w3-row-padding">
- Hızlı bir şekilde ızgara sütunları oluşturmak için "w3-üçüncü" gibi önceden tanımlanmış sınıfları kullanın
- Metin içeriğinizi ızgara sütunlarının içine yerleştirin
Bu örnek, eşit genişlikte üç sütunun nasıl oluşturulacağını gösterir:
Örnek
<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>
Bu örnek, eşit genişlikte dört sütunun nasıl oluşturulacağını gösterir:
Örnek
<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>
Farklı Genişliğe Sahip Sütunlar
Bu örnek, ortadaki sütunun ilk ve son sütundan daha geniş olduğu üç sütunlu bir düzen oluşturur:
Örnek
<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>
Gezinme Çubukları
Gezinme çubuğu, sayfanın en üstüne yerleştirilmiş bir gezinme başlığıdır.
Örnek
<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>
Sayfa Gezinme
Yan gezinme ile birkaç seçeneğiniz vardır:
- Gezinti bölmesini her zaman sayfa içeriğinin solunda görüntüleyin.
- Katlanabilir, "tam otomatik" duyarlı bir yan gezinme kullanın.
- Sayfa içeriğinin sol kısmındaki gezinme bölmesini açın.
- Tüm sayfa içeriği üzerinde gezinme bölmesini açın.
- Gezinme bölmesini açarken sayfa içeriğini sağa kaydırın.
- Gezinti bölmesini sol taraf yerine sağ tarafta görüntüleyin
Bu örnek, sayfa içeriğinin sol kısmında gezinme bölmesini açar:
<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>
Menüyü açmak ve gizlemek için kullanılan JavaScript:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}