Özgür Özer

Junior full stack developer

Bootstrap: Başlangıç

Bootstrap; responsive ve mobile-first projeler geliştirebileceğimiz en popüler framework’lerden biridir. Özellikle Google’ın 21 nisan güncellemesi ile arama algoritmasında değişikliğe gidip, mobil arayüzü olmayan siteleri 2. plana atacağını söylemesiyle birlikte her zamankinden daha fazla ihtiyaç duyulmaya başlandı Bootstrap’e.

Boostrap konusu bir kaç bölümden oluşan seri yazı şeklinde olacak. Tüm yazıları bootstrap tag‘i altında bulabileceksiniz.

Bootstrap ve buna benzer tüm plugin veya framework’leri belgemize dahil etmenin 2 yolu vardır. İlki CDN kullanmak, ikincisi de kütüphane dosyalarını kendi sunucumuzda host etmek. Benim kişisel önerim tüm plugin veya framework’ler için CDN‘leri kullanmak. Herkes CDN kullanırsa web sayfaları daha hızlı açılır.

Bootstrap’in download sayfasına gidip Download Bootstrap butonuna basarak gerekli dosyaların olduğu zip dosyasını indirebilir, CDN kullanmak istersek de download butonunun hemen altındaki Bootstrap CDN bölümünden CDN adreslerini alabiliriz.

Bootstrap kullanmaya başlamak için minimal kod yapımız aşağıdaki gibi olmalıdır.

<!DOCTYPE html>
<html lang="tr">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<!-- Yukarıdaki 3 meta tag'i eklemek zorundayız, diğer head içeriği bu tag'lerden sonra gelicek -->

	<title>Bootstrap Şablonu</title>

	<!-- Bootstrap CSS Dosyası-->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

	<!-- HTML5 Shiv ve Respond.js dosyaları, IE8 için HTML5 elemanları ve media query desteği sağlar -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body>
	<h1>Merhaba dünya!</h1>

	<!-- Bootstrap'in JavaScript eklentilerini çalıştırabilmemiz için jQuery'yi belgemize dahil etmemiz gerekiyor -->
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

	<!-- Bootstrap JS Dosyası(JavaScript eklentilerini kullanmayacaksak jQuery ve Bootstrap.js dosyasını dahil etmek zorunda değiliz) -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

İlk bölümü gereksiz detaylarla kafa karıştırmamak için kısa tutuyorum. Takip eden yazılarda Bootstrap’in tüm yeteneklerini derinlemesine inceleyeceğiz.