Bootstrap, açık kaynak kodlu ücretsiz bir CSS framework tasarım aracıdır.
CSS framework ise web geliştirme dünyası geliştikçe ortaya çıkmıştır. CSS frameworkleri, geliştiricilerin tasarımlarını hızlıca yapabilecekleri bir prototip sağlar. Bootstrap kütüphanesi ile tüm cihazlara uygun şekilde tasarımlar yapılabilir. Her şeyin hazır olduğu bu yapıyı sadece çağırmak gerekmektedir. Varsayalım ki bir siteniz var sitenizin bilgisayarlar, tabletler ve telefonlar için cihaz büyüklüğüne uygun şekilde tasarlanmasını sağlar. Bootstrap bizlere web uygulamalarını, web sitelerini daha hızlı kodlamamıza imkân sağlar. Tablet ve mobil cihazları ile uyumluluğu sayesinde var olan tasarımınızı rahatça görebilirsiniz. Bootstrap’in en önemli özelliği basit ve kolay olmasıdır. CSS veya HTML kodları yazmak zor ve yorucu bir iştir. Bootstrap içindeki hazır kodlar sayesinde CSS veya HTML ile site yapmak çok kolaydır. Ayrıca bootstrap tüm tarayıcılar tarafından desteklenmektedir.
Bootstrap Nasıl Kullanılır?
Bootstrap’i kullanabilmek için Bootstrap CSS ve JS dosyalarını sayfamıza dahil etmemiz gerekiyor. Bunun birçok yolu vardır. http://getbootstrap.com/ üzerinden bootstrap’ın son sürümünü documentation butonuna tıklayarak uzak sunucu üzerinden çalıştırabilmemiz için bize bazı kodlar veriyor.
Bir CSS dosyası
|
1 |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> |
ve 3 adet Script dosyalarını
|
1 |
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><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"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> |
sayfamıza dahil etmemiz gerekiyor.
Peki bunu nasıl yapacağız aşağıda basit bir şekilde Bootstrap’ın projeye dahil edilmesi gösterilmiştir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <title>Bootstrap Projeye Dahil Edilmesi</title> <meta charset="utf8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> </head> <body> <h1>Bootstrap Denemesi</h1> <hr> <button class="btn btn-success">HepTeknoloji.net</button> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> </body> </html> |
Diğer bir yol ise Bootstrap’i kendi sitesinden direk indirip inen dosyayı kök dizine yapıştırdıktan sonra bu şekilde klasörden çağırarak da projeye dahil edebilirsiniz.
Sevde Nur ZORLU
