Bootstrap ile Web Tasarım

Aslında bu yazıda detaylı olarak CSS hakkında bir şeyler yazmayı düşünüyordum fakat öncelikle en az çabayla en verimli şekilde çalışabileceğiniz Bootstrap sistemini öğrenmek daha akıllıca olabilir. Bootstrap önceden tanımlanmış CSS stillerini içeren bir front-end web yazılım geliştirme yardımcısıdır. JQuery ile birlikte kullanılır.

Bootstrap kullanarak tek sayfalık bir web sayfası 5 dakika gibi kısa bir sürede tasarlanabilir. Fakat öncelikle bu sistemin bileşenlerini ve nasıl kullanıldıklarını öğrenmeniz gerekir. Online veya masaüstü uygulamaları olarak Bootstap yardımıyla web sayfaları tasarlayabileceğiniz uygulamalar mevcuttur. Yine de hazır WYSIWYG (görsel tasarım uygulamaları) kullanmak yerine kodları kendiniz yazarak çalışmanız proje üzerinde hakimiyetinizi arttırır ve kısıtlamalar olmadan istediğiniz değişiklikleri kolayca yapabilirsiniz.

Bu sistemi sayfanızda kullanmak için öncelikle 3 dosyayı sayfanın <head> etiketi içine eklemeniz gerekir. Responsive (mobil uyumlu) görünümü desteklemek için de viewport ayarlarını etkinleştirmelisiniz. Bu dosyaları kendi sunucunuzdan alabileceğiniz gibi yayımcıların sunduğu CDN (Content Delivery Network - İçerik dağıtım ağı) hizmetinden de faydalanabilirsiniz.

Kendi dosyalarınız yerine bu şekilde kullanmanız sayfalarınızın daha hızlı açılmasını sağlayabilir. Çünkü aynı dosyaları CDN üzerinden kullanan her site için dosyalar tekrardan indirilmez ve bir kez indirildikten sonra geçici bellek üzerinden çağırılır.

Boş bir Bootstrap sayfası bu şekilde olmalıdır. Daha sonra bileşenler <body> tagı içine eklenerek tasarım oluşturulur.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewportcontent="width=device-width, initial-scale=1" />
<link rel="stylesheethref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<script type="text/javascriptsrc="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><title>Sayfa Başlığı</title>
</head>
<body>

</body>
</html>

Dosyalar bu örnekte CDN bağlantıları olarak dahil edildi. İsterseniz bu dosyaları indirip proje klasörünüze taşıyabilirsiniz. Ayrıca isteğe bağlı özelleştirilmiş tema kullanacaksanız bu stil dosyasını da ekleyebilirsiniz.

Sayfanızın masaüstü tarayıcılarda ortalanmasını istiyorsanız eklediğiniz bileşenleri container sınıfına ait bir katman içine yazmalısınız.

<div class="container"> ... </div>

Diğer bileşenler için Bootstrap dokümantasyonunu inceleyebilir, kullanmak istediğiniz bileşenleri belirtildiği şekilde ekleyebilirsiniz. Tekrar yazmak yerine kendi oluşturduğunuz sayfada eklemek istediğiniz yere kopyalayıp üzerinde düzeltmeler de yapabilirsiniz.

Bu adresten bileşenleri inceleyin: http://getbootstrap.com/components

Bu blogdaki popüler yayınlar

Almanca - Nomen-Verb-Verbindungen

Web Tasarımı Kodlamak (Front-End)

C ile Dosya Şifreleyici Yapımı