Bootstrap 4

Web Sitesi Tasarımı

Web siteleri yaygınlaştıkça web sitesi geliştirme araç ve yöntemleri de gelişmiştir. Responsive (Duyarlı) web sitesi tasarımı da bu yöntemlerden biridir. Responsive web sayfası geliştirme yöntemi, farklı cihazlarla (Bilgisayar, tablet, cep telefonu, vb.) web sitesi ziyaret edildiğinde de rahatlıkla görüntülenebilmesi için geliştirilmiştir.

Responsive web tasarımı yöntemi ile sitelerini daha kolay geliştirebilmek için çeşitli kolaylık araçları da geliştirilmiştir. Web sitesi geliştirme için kolaylık araçlarından bir kısmı da CSS Framework'lerdir. CSS Frameworkler, CSS Yazılım Çatısı veya CSS Yazılım İskeleti olarak da isimlendirilebilirler.

CSS Framework'ler veya CSS Yazılım Çatıları, standart (çok kullanılan) fonksiyonların hazır olarak sunulduğu, ancak bu fonksiyonlardan arzu edilen kısımlarının istenildiği şekilde değiştirilebildiği kod yapılarıdır.

Framework'lerin amacı, geliştiricilerin, sıfırdan tekrar kod yazmak zorunda kalmamaları ve önceden yazılmış ve denenmiş kodu yeniden kullanmaları için ortak bir yapı sağlamaktır.

Web sitesi geliştirmede kullanlan CSS Frameworklerinden bazıları; Bootstrap, Semantic UI, Material UI, UIKit, Fundation, Animate.css, vb.

Bootstrap

Bootstrap Nedir?

Bootstrap, daha hızlı ve daha kolay yanıt veren web geliştirme için en popüler ve güçlü ön uç (HTML, CSS ve JavaScript) framework'üdür (CSS Yazılım Çatısı). Bootstrap 4, Bootstrap'in en yeni sürümüdür; yeni bileşenler, daha hızlı CSS sayfası ve daha fazla duyarlılık (responsive) sağlar.

Bootstrap 4, yaygın olarak kullanılan tarayıcıların ve platformların en yeni ve kararlı sürümlerini destekler. Ancak, Internet Explorer 9 ve alt sürümleri desteklenmiyor. IE8-9 desteğine ihtiyaç varsa, Bootstrap 3'ün kullanılması tavsiye edilir. Bootstrap 3, şu anda Bootstrap'ın en sağlam sürümüdür. Şimdilik kritik hatalar ve dokümantasyon değişiklikleri için destek almaktadır. Ancak, yeni özellikler Bootstrap 3'e eklenmeyecektir.

Neden Bootstrap Kullanmalı?

Bootstrap'in Avantajları:

Kullanımı kolay: Temel HTML ve CSS bilgisine sahip olan herkes Bootstrap kullanmaya başlayabilir
Duyarlılık (Responsive) özellikleri: Bootstrap ile siteler telefonlara, tabletlere ve masaüstlerine rahatlıkla uyum sağlarlar
Mobil öncelikli yaklaşım: Bootstrap'ta stiller öncelikli olarak mobil cihaz için tasarlanmıştır
Tarayıcı Uyumluluğu: Bootstrap 4, tüm modern tarayıcılarla uyumludur (Chrome, Firefox, Internet Explorer 10+, Edge, Safari ve Opera)

Bootstrap Nasıl Kullanılır?

Bootstrap 4'ü kendi web sitenizde kullanmaya başlamanın iki yolu vardır.

Bootstrap 4 sayfalara CDN ile dahil edilebilir
Bootstrap 4 getbootstrap.com'dan indirilebilir

Bootstrap 4 CDN

Bootstrap 4'ü indirmek ve kendi sitenizde barındırmak istemiyorsanız, bir CDN'den (Content Delivery Network/İçerik Dağıtım Ağı) ekleyebilirsiniz.

MaxCDN, Bootstrap'in CSS ve JavaScript'i için CDN desteği sağlar. Ayrıca jQuery eklemelisiniz:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Bootstrap 4 Başlangıç Şablonu

Sayfalarınızın en son tasarım ve geliştirme standartlarına göre hazırlandığından emin olun. Bu, bir HTML5 kullanmak ve uygun yanıt veren davranışlar için bir görüntüleme çerçevesi, etiketi eklemek anlamına gelir. Hepsini bir araya getirin ve sayfalarınızın kodları şöyle görünmelidir:

<!DOCTYPE html>
<html lang="tr">
<head>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Bootstrap 4 Başlangıç Şablonu</title>

  
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <h1>Merhaba, Dünya!</h1>

  
  
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap 4 Dersleri

1. Giriş