Bootstrap dünyanın en yaygın olarak kullanılan web üzerinde duyarlı sayfalar yapmaya yarayan birleşendir. Css ve js kullanarak bootstrap istediğiniz yeni nesil tasarımlar oluşturmasına yardımcı olur.Bootstrap kullanarak mobil ve bilgisayarların ekran çözünülüğüne göre uyarlayabiliriz.Tek İhtiyacı jquerydir.Pekala biz bu “jquery nasıl ulaşacağız” diye bir soru gelecek aklımıza ister cdn kullanın isterseniz indirip lokalinizden çekebilirsiniz. Cdn yazımızda geçti fakat cdn bilmeyenler olabilir.Kısaca başka bir yerden sitemize yüklemek diye düşünebiliriz.Bize lazım olan jquery linki;
https://mustafasevim.net.tr/wp-content/litespeed/localres/aHR0cHM6Ly9jb2RlLmpxdWVyeS5jb20vjquery-3.3.1.slim.min.js
jquery sürümlerinden çoğuyla uyumludur bunu kullanmanız şart değil.Mesala tasarımınızın farklı versiyonlar onla da çalışacaktır. Sadece bilmeniz gereken jquery bootstrap.min.js yada bootstrap.js dosyasından önce ve yakın bir şekilde kullanmanız yeterlidir.Jquery indirip kullanırız bize sadece dosya yolu lazım olacak bunu unutmayalım.Jquery nasıl ekleyeceklerinin bilmeyenler olabilir onuda şu şekilde yapacağız.html taglarında head tag bulup içinde herhangi bir satıra eklemeleyiz.Örnek uygulama;
<html> <head> <script src="https://mustafasevim.net.tr/wp-content/litespeed/localres/aHR0cHM6Ly9jb2RlLmpxdWVyeS5jb20vjquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> </head> <body> </body> </html>
Yukarıdaki kod boluğunda olduğu gibi yapacağız.Kendi sitemizden jquery çekeceksek;
Ben mesala site yaptığımı ve sitemiz ana dizinde tema klasöründen ve js klasöründen çekmek istiyorum.Siz kendinize göre aşağıdaki linki düzeltebilirsiniz.
<html> <head> <script src="https://siteadresim.com/tema/js/jquery-3.3.1.slim.min.js"></script> </head> <body> </body> </html>
Gelelim asıl konumuza yani
bootstrap
sitemize eklemeye önceklikle Bootstrap 4.1 versiyonu indirip rardan çıkartıyoruz.Ben siteme yük olmasın dışardan bir yerden yükleyeyim dersek yukarıdaki anlattığım cdn mevzusuyla yapalım.Bize gerekli üç şey var birisi bootstrap.css diğeri ise bootstrap.js ekstra olarak hover ve eventleri için popper.js hepsinin cdn linklerimiz;
https://mustafasevim.net.tr/wp-content/litespeed/localres/aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS8=ajax/libs/popper.js/1.14.0/umd/popper.min.js https://mustafasevim.net.tr/wp-content/litespeed/localres/aHR0cHM6Ly9zdGFja3BhdGguYm9vdHN0cmFwY2RuLmNvbS8=bootstrap/4.1.0/js/bootstrap.min.js https://mustafasevim.net.tr/wp-content/litespeed/localres/aHR0cHM6Ly9zdGFja3BhdGguYm9vdHN0cmFwY2RuLmNvbS8=bootstrap/4.1.0/css/bootstrap.min.css
Peki biz bunu sitemizde nereden çekeceğiz.Tabi ki yine html tagları arasındaki head tagları arasına eklenecektir.Örneğimiz;
<html> <head> <link rel="stylesheet" href="https://mustafasevim.net.tr/wp-content/litespeed/localres/aHR0cHM6Ly9zdGFja3BhdGguYm9vdHN0cmFwY2RuLmNvbS8=bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://mustafasevim.net.tr/wp-content/litespeed/localres/aHR0cHM6Ly9jb2RlLmpxdWVyeS5jb20vjquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://mustafasevim.net.tr/wp-content/litespeed/localres/aHR0cHM6Ly9zdGFja3BhdGguYm9vdHN0cmFwY2RuLmNvbS8=bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> <script src="https://mustafasevim.net.tr/wp-content/litespeed/localres/aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS8=ajax/libs/popper.js/1.14.0/umd/popper.min.js" crossorigin="anonymous" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"> </script> </head> <body> </body> </html>
Kod taglarındaki gördüğümüz gibi eklemeyi yapalım.Kodlardan gördüğünüz jquery kodlar arasında ve en üstte.Ben websitemden kendi hostundan çekeceğim diyorsanız işte örneğimiz;
<html> <head> <link rel="stylesheet" href="https://siteadresim.com/tema/css/bootstrap.min.css"> <script src="https://siteadresim.com/tema/js/jquery-3.3.1.slim.min.js"></script> <script src="https://siteadresim.com/tema/js/bootstrap.min.js"></script> </head> <body> </body> </html>
yani
bootstrap
dosyaları indirdik rardan çıkardık.İçindekileri direk ben tema klasörünün içine ekledim.Bu benim örneğim siz kendinize göre linkleri düzenleyin.Bootstrap içinde hangi dosyalar var ona bakalım;
Bootstrap
|
–css
|
— bootstrap.min.css
|
–js
|
— bootstrap.min.js
Bize lazım bunlar diğerleri zaten klasörün içindeki çekecektir.Neden .min var diyorsunuz minumum ingilizce kısaca küçültülmüş tek bir satır yapılarak yüklenmesini hızladırmaktır.Artık geliştirmeye arayüzler yada ön görünüş tasarımına hazırız.