Bootstrap Nedir ?

Bootstrap, Twitter tarafından geliştirilen bir CSS Framework’üdür. Bootstrap ile bilgisayar, telefon ve tablet gibi farklı boyutlardaki cihazlara göre boyutlarını ayarlayabilen bir web tasarım aracıdır. Bir internet sitesi tasarlarken kullandığınız tüm etiketlere (h1..-h5, a, div, sapan,…) göre tasarımsal ve işlevsel olarak farklı özellikleri olan bir tasarım aracıdır. Ayrıca için de Responsive tasarımlar da işinize çok yarıyacak Grid(Izgara) Sistemi’de bulunmaktadır.

Bootstrap Ne İşe Yarar ?

Bootstrap, farklı boyutlara sahip cihazlara uyumlu bir web site tasarımını çok kısa sürede ve daha az uğraşıyla kolay bir şekilde yapmanızı sağlar. Bunun yanında geniş renk paleti, açılıp kapanabilir menü, Scrollspy, sayfalama, navigasyon bar gibi bir çok özelliği bize hiç bir şekilde ekstra uğraş vermeden kolayca kullanmamızı sağlayan hazır kodlara sahiptir. Kısacası bir web sitesi tasarım sürecini kısaltan bir araç olarak düşünebiliriz.

Bootstrap Nasıl Kurulur ?

Bootstrap’ı kurmak aslında çok basittir.

[html]
<!doctype html>
<html lang=”en”>
<head>
<!– Required meta tags –>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<!– Bootstrap CSS –>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity=”sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=”anonymous”>

<title>Hello, world!</title>
</head>
<body>

<h1>Hello, world!</h1>

<!– Optional JavaScript –>
<!– jQuery first, then Popper.js, then Bootstrap JS –>
<img src=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″ data-wp-preserve=”%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.slim.min.js%22%20integrity%3D%22sha384-q8i%2FX%2B965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH%2B8abtTE1Pi6jizo%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E” data-mce-resize=”false” data-mce-placeholder=”1″ class=”mce-object” width=”20″ height=”20″ alt=”<script>” title=”<script>” />
<img src=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″ data-wp-preserve=”%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fpopper.js%2F1.14.3%2Fumd%2Fpopper.min.js%22%20integrity%3D%22sha384-ZMP7rVo3mIykV%2B2%2B9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK%2Fl8WvCWPIPm49%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E” data-mce-resize=”false” data-mce-placeholder=”1″ class=”mce-object” width=”20″ height=”20″ alt=”<script>” title=”<script>” />
<img src=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″ data-wp-preserve=”%3Cscript%20src%3D%22https%3A%2F%2Fstackpath.bootstrapcdn.com%2Fbootstrap%2F4.1.3%2Fjs%2Fbootstrap.min.js%22%20integrity%3D%22sha384-ChfqqxuZUCnJSK3%2BMXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW%2FJmZQ5stwEULTy%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E” data-mce-resize=”false” data-mce-placeholder=”1″ class=”mce-object” width=”20″ height=”20″ alt=”<script>” title=”<script>” />
</body>
</html>
[/html]

Kodlarını “index.html” dosyanıza kaydedip çalıştırırsanız Bootstrap’ın dökümantasyonunu incelerseniz dökümantasyonunda yazan her şeyi kopyala yapıştır ile yaparak kullanabilirsiniz. Bootstrap’ın yetmediği yerlerde ise kendi “css” dosyasında yazdığınız kodları “!important” ile kullanarak çalıştırabilirsiniz. Bootstrap Dökümantasyonuna gitmek için tıklayabilirsiniz.

Bir yazının sonuna doğru gelirken sizlere şunu söylemek isterim ki normalde günlerce uğraşacağım tasarımları saatler içerisinde halledebileceğinizi görünce gayet rahatlıyacaksınız.