Bootstrap Nedir? Nasıl Kullanılır?
Bootstrap Nedir?
Published in
2 min readJan 23, 2017
Açık kaynak kodlu, ücretsiz bir frameworktür. Bu kütüphane ile tüm cihazlara uygun şekilde tasarımlar yapılabilir. Yani herşeyin hazır olduğu bu yapıyı sadece çağırmanız gerekmektedir. Bootstrap tüm tarayıcılar tarafından sorunsuz bir şekilde çalışmaktadır.
Bootstrap Nasıl Kullanılır?
Öncelikli olarak sayfamızın HTML5 olması gerekmektedir. Bootstrap kütüphanesi kullanabilmemiz için projemize eklememiz gerekmektedir. Projemize kütüphaneyi indirip ekleyebileceğimiz gibi CDN linklerini kullanarak ekleyebiliriz. CDN linklerini aşağıdaki gibidir:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Örnek kullanım:<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Örneği</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body><div class="container">
<h1>Bootstrap Sayfası</h1>
<p>Örnek bir yazı.</p>
</div></body>
</html>Bootstrap BileşenleriBir web sitesi için ne gerekiyorsa, bünyesinde barındırdığından dolayı tüm siteyi bu bileşenlerle tasarlayabilirsiniz. Bu bileşenlerin kullanımlarına buradan ulaşabilirsiniz.
Bu bileşenlerin çalışır haline şuradan erişebilir test edebilirsiniz.Genel olarak bootstrap bu şekilde. Belirtiğim bağlantıları incelerseniz konuyu daha iyi kavramış olacaksınız. Bootstrap konusunu baştan sona incelemek çok uzun süreceğinden bu şekilde daha uygun olacağını düşünüyorum.Eğer bootstrap'ın görselliği sizin tarzınızı yansıtmıyorsa css dosyalarına müdahele ederek kendinize uygun bir tasarım gerçekleştirebilirsiniz. Ben bu işlerden fazla anlamam dersenizde buradaki hazır css dosyalarını kullanabilirsiniz.Kendinizi fazla yormayın. Yaratıcı günler diliyorum :)
