Responsive tasarımlar yapmak için sitenizde Bootstrap 4 kullanmak istiyorsanız projenize bazı css ve js dosyalarını eklemeniz gerekiyor. Projenize Bootstrap 4 kodlarını dahil etmenin iki yolu bulunmaktadır.
1.Yöntem:
Bu yöntemde gerekli dosyaların indirilerek projeye dahil edilmesi (Local olarak Ekleme) gerekiyor.
Bunun için aşağıdaki linklerden gerekli dosyaların indirilmesi gerekmektedir.
Toplu halde indirmek isterseniz burada mevcuttur.
Download butonuna tıkladığınız zaman bootstrap-4.4.1-dist.zip dosyası inecektir. Bu sıkıştırılmış dosyanın içinden bize lazım olan bootstrap.min.css ve bootstrap.min.js dosyalarını alıyoruz.
Daha sonra Jquery sayfasına https://jquery.com/download/ girerek jquery-3.4.1.min.js dosyasını indiriyoruz.
Son olarak https://github.com/popperjs/popper.js#installation adresinden popper.min.js dosyasını indiriyoruz.
Web sitemize bu dosyaları alttaki gibi dahil ediyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!doctype html> <html lang="tr"> <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="css/bootstrap.min.css" type="text/css"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> |
2. Yöntem :
Bu yöntemde dosyalarımızı CDN olarak alıyoruz. Bu yöntem benim tercih ettiğim yöntemdir. Dezavantajı ise internetsiz bir ortamda Bootstrap kullanarak bir web sitesi tasarlamak istediğinizde çalışmayacaktır. Böyle bir durumda 1. Yöntemde anlatıldığı gibi gerekli dosyaları local olarak sitenize eklemeniz gerekecektir.
Şimdi CDN olarak nasıl ekleyebiliriz buna bakalım. Bu işlem oldukça basittir.
*** Sadece aşağıdaki kodları kopyalayıp sayfanıza yapıştırmanız yeterlidir :). ***
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!doctype html> <html lang="tr"> <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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html> |
Bu kodlar Bootstrap sitesinde de mevcuttur.
Dilerseniz aşağıdaki linktende ulaşabilirsiniz.
Yorum Yap