Bootstrap Nedir?

Bootstrap Twitter’da bir grup tarafından geliştirilen, açık kaynak kodlu ve ücretsiz kullanabileceğiniz bir frameworktür (hazır kod yazılımı). CSS, HTML ve JavaScript ile oluşturulan bu framework HTML5 ve CSS3’üde desteklemektedir.

Bootstrap Ne İşe Yarar?

Bootstrap, tasarımlarınızı responsive yani tüm ekran çözünürlüklerine uyumlu bir şekilde (telefon, bilgisayar, notebook, tablet) düzenlemenize olanak sağlar.

Bootstrap  Özellikleri Nelerdir?

İçerisinde mevcut olan sayısız tablo, grafik, ikon, carousel, navigasyon gibi pek çok hazır tasarım sayesinde sitenizi kolayca tasarlayabilirsiniz. Ayrıca Bootstrap‘in kullandığı Grid (Izgara) sistemi özelliğiyle sitenizi istediğiniz bölümde konumlandırabiliyorsunuz. Bu özellik, ekranı dilediğiniz ölçüde bölüp, ayırdığınız bu kısımlara kolayca müdahele etmenizi sağlamaktadır.

nasa.gov, fifa.com, paypal.com gibi popüler firmalarda Bootstrap kullanmaktadır.

Bootstrap tüm tarayıcılar tarafından desteklenmektedir.

Bootstrap Nasıl Kullanılır?

Bootstrap’i iki farklı yöntemle sitenize dahil edebilirsiniz.

• Bootstrap download bağlantısı üzerinden kaynak kodları indirerek kodları sitenize ekledikten sonra, sayfa içerisinden bu eklediğiniz kodları kullanarak,
• Bootstrap CDN üzerinden eklemek, bu yöntemde Boostrap’in derlenmiş CSS ve JS kodlarının önbelleğe alınmış haliyle aşağıdaki kodları kullanarak sitenize dahil edebilirsiniz.

Ek olarak Bootstrap CDN dosyalarına buradan ulaşabilirsiniz.

CSS

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

JS

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

Eğer sitenizde yukarıdaki gibiderlenmiş JS kullandıysanız, aşağıdaki QJuery ve Popper.js kodlarınıda sitenize dahil etmeniz gerekmektedir.

JQuery

script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”

Popper.js

script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js” integrity=”sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″ crossorigin=”anonymous”

Bootstrap Bileşenleri Nelerdir?

Bootstrap sitenizi tasarlamanız için gerekli tüm bileşenlere sahiptir. Bu bileşenlerin kullanımıyla ilgili detaylı bilgiye buradan ulaşabilirsiniz.