Stil Sayfaları (CSS) 13 - Bootstrap ve Renk Sınıfları
4.4.2. Popüler CSS Frameworkleri
CSS ile tasarım yaparken kişiselleştirilmiş sınıflar, sınıfların birleşiminden oluşan kütüphaneler
veya daha kapsamlı bir yapı olan frameworkler tanımlanabilir. Tüm bu kişiselleştirilmiş yapılar,
web site tasarımlarında tekrar tekrar kullanılabilir. Ayrıca başka programcılar tarafından tanımlanmış
yapılar da kullanılabilir.
Tasarımı kolayca tüm cihazlara uygun hâle getirmek ve görsel açıdan zenginleştirmek için hazırlanmış
birçok popüler CSS frameworkü bulunmaktadır. Bu frameworklerin yapısında çok kullanışlı
sınıflar bulunmaktadır ve bu frameworklerin çoğu, açık kaynak kodludur ve ücretsizdir. Bootstrap,
Foundation, Matearialize, Ui Kit gibi CSS frameworkleri bulunmaktadır.
4.4.3. Bootstrap Framework
Bootstrap, çok tercih edilen CSS frameworklerindendir. Bootstrap ile ilgili içeriklere kendi web
adresinden ücretsiz olarak ulaşılabilir. Bootstrap son sürümü beta (test) aşamasında olduğu için
kitap içeriğinde Bootstrap 4 işlenecektir (Görsel 4.35).
 |
| Görsel 4.35: Bootstrap logo |
Bootstrap Framework özellikleri;
• Kolay ve anlaşılabilir kod yapısı,
• İçeriği ile ilgili kaynak, doküman ve örneklere ulaşma kolaylığı,
• Neredeyse tüm tarayıcılarla uyumlu çalışması,
• Farklı ekran çözünürlüklerine uygun tasarım yapma olanağı,
• Grid, tipografi, slider gibi işlevsel birçok yapı ve sınıfı kullanma imkânı,
• Birçok eleman için Javascript ile görsel efekt desteği,
• Açık kaynaklı olduğu için içindeki kaynak kodlarına müdahale edebilme olanağı,
• Her geçen gün güncellenen ve geliştirilen bir framework olmasıdır.
Bootstap Framework’ü web sitelerinde kullanmak için gerekli bağlantıların yapılması gerekmektedir.
Bağlantı linklerine Bootstrap Framework web adresinden ulaşılabilir.
25. Uygulama
Haricî CSS sayfası ve haricî Javascript sayfası bağlantı yöntemlerini kullanarak Bootstrap
Framework’ü web sayfasında kullanabilmek için gereken işlemleri yönergeler
doğrultusunda gerçekleştiriniz.
1. Adım: Bootstrap Framework web adresine giriniz.
2. Adım: Web sitesinin sağ üst köşesindeki Download butonuna tıklayınız.
3. Adım: Bootstrap versiyonunu v4.6 olarak seçiniz.
4. Adım: Açılan sayfada CSS başlığı altındaki <link> kodunu kopyalayınız ve HTML
sayfanızdaki <head> etiketi içine yapıştırınız. Aynı sayfadaki Bundle başlığı altındaki
<script> kodlarını kopyalayınız ve HTML sayfanızdaki body bölümünün kapatma
etiketinden (</body>) hemen önceki satıra yapıştırınız.
<head>
<!-- Diğer kodlar -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/
bootstrap.min.css">
</head>
<body>
<!-- Diğer kodlar -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist
/js/bootstrap.bundle.min.js"></script>
</body>
5. Adım: HTML sayfanızdaki <body> etiketi içine aşağıdaki kodları yapıştırınız ve
web sitesini çalıştırınız.
<div class="alert alert-success">
<strong>Başardınız!</strong> Artık Bootstrap 4 Framework kullanıyorsunuz.
</div>
Not
Uygulamadaki kod yapısı tüm HTML sayfalarında şablon olarak kullanılabilir. Böylece
tüm sayfalarda Bootstrap Framework özelliklerinden faydalanılabilir.
4.4.3.1. Konteyner Çeşitleri
Ekranın genişliğine duyarlı kapsayıcı bir div oluşturmak için “container” sınıfı kullanılır. İki farklı
kullanım şekli bulunmaktadır.
Bootstrap Framework’ü ile ekran çözünürlükleri beş faklı boyutta tanımlanır. Bu özellik ile tüm
çözünürlüklerdeki cihazlar için tasarım yapılabilir (Tablo 4.16).
|
Genişlik |
Boyut |
|
<576 piksel |
En küçük |
|
>=576 piksel |
Küçük |
|
>=768 piksel |
Orta |
|
>=992 piksel |
Geniş |
|
>=1200 piksel |
En geniş |
Sabit Konteyner: Ekranın tüm genişliğini kaplamayan kenarlardan boşlukları olan konteyner
çeşididir (Görsel 4.36). Farklı iki ekran boyutu arasında konteyner genişliği sabit kalır. Kenar boşlukları
değişir.
<div class="container">
<h3>Konteyner çeşitleri</h3>
<p>Ekranın tüm genişliği kaplanmadı.</p>
</div>
Fluid Konteyner: Farklı çözünürlüklerde ekranın tüm genişliğinin kaplandığı konteyner çeşididir
(Görsel 4.36).
<div class="container-fluid">
<h1>Konteyner çeşitleri</h1>
<p>Ekranın tüm genişliği kaplandı.</p>
</div>
 |
| Görsel 4.36: Container sınıfı |
4.4.3.2. Renk Sınıfı
Bootstrap Framework ile hızlıca yazı ve arka plan renklerini değiştirmek için “text” ve “bg” sınıfları
bulunmaktadır. Bu sınıflar için tanımlanmış birçok renk bulunmaktadır (Tablo 4.17).
Hiç yorum yok