Bootstrap web sitelerini geliştirmek için kullanılan açık kaynak kodlu ve ücretsiz bir front-end framework’tür. Bu yazılım iskeleti responsive siteler için kullanılan en popüler frameworklerden biridir. Bootstrap ile çok kolay bir şekilde mobil uyumlu web siteleri elde edilir.
Twitter ekibi tarafından geliştirilen Bootstrap, HTML5 ve CSS3’ü de destekler. İyi bir grid sistemi sağlar, kapsamlı bir bileşen listesi bulunur.
Bootstrap Nasıl Kullanılır?
Bootstrap tüm tarayıcılarda desteklenir. Web sitemizin HTML5 etiketi ile başlaması gerekir. Bir sayfanın HTML5 olduğunun anlaşılması için ilk satırda aşağıdaki kod olması gerekmektedir.
<!DOCTYPE html>
Sonra Bootstrap CSS’ini sayfamıza dahil etmemiz gerekir. Eğer inline dahil edeceksek:
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css”>
Yok efendim ben inline dahil edeceğim derseniz:
<link rel=”stylesheet” href=”/bootstrap.min.css”>
Burada bootstrap.min kullandık. Çünkü en hızlı ve en az yer kaplayan bootstrap .min ile bitendir.
Şimdi geldik Bootstrap’in kolaylıklarına. Eğer bir sitenin tüm cihazlar ve tabletler ile uyumlu olmasını istersek bootstrap ile tek satır kodla bunu halledebiliyoruz.
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
Kodunu <head>BURAYA</head> arasına eklememiz yeterli olacaktır.
Bootstrap ile oluşturulmuş örnek bir sayfayı da aşağıda paylaşıyorum. Buradan esinlenerek daha fazla geliştirme yapabilirsiniz.
<!DOCTYPE html>
<html lang=”tr-TR”>
<head>
<meta charset=”UTF-8″>
<title>Bootstrap Örneği</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!– Bootstrap Css begin –>
<link rel=”stylesheet” href=”/bootstrap.min.css”>
<!– Bootstrap Css end –>
</head>
<body>
</body>
</html>