Bootstrap Sayfaya Nasıl Eklenir ?
Bootstrapi sayfaya eklemeniz için mevcut iki yöntem vardır.
İlk yöntem sayfaya yerel olarak dahil etmektir. Bunun için
giriyoruz ve downloada tıklıyoruz. Compiled CSS and JS yani derlenmiş css ve js başlığının altındaki downloada tıklıyoruz ve inme işlemi başlamış oluyor.
Javascript kütüphanesini kullanabilmemiz için Jquery kütüphanesine ihtiyacımız var. Bunun içinde
giriyoruz. Ve sıkıştırılmış olan (compressed) dosyayı indiriyoruz. Dosya adı : Download the compressed, production jQuery 3.3.1
Son olarak Bootsrapin bazı özelliklerini kullanabilmemiz için Poper’e ihtiyacımız var.
giriyoruz. İnstall diyoruz ve bizi githuba yönlendiriyor. Sayfayı aşağıya doğru kaydırarak Installation başlığının altındaki ilk tablodaki unpkg, minified alanında bulunan linke tıklayıp dosyayı indiriyoruz.
Dosyalarımızı indirdikten sonra Bootstrapi rardan çıkarıyoruz. Css klasöründeki bootstrap.min.css ve Js klasöründeki bootstrap.min.js dosyasını alıp projemizin olduğu klasörün içine atıyoruz. Ayrıca sonradan indirdiğimiz jquery ve poperide proje klasörümüzün içine atıyoruz. Son olarak bu dosyaları projemize bağlama işlemimiz kaldı.
<!DOCTYPE html>
<html lang="tr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap.min.css"/> // 1
<title>D</title>
</head>
<body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script> //2
<script type="text/javascript" src="poper.min.js"></script> //3
<script type="text/javascript" src="bootstrap.min.js"></script> //4
</body>
</html>
Dosyalar aynı klasörde olduğu için direkt olarak dosya adını yazarak dosyalarımızı bağlamış olduk. (1,2,3,4) Burda dikkat edilmesi gereken önemli nokta script dosyalarının verdiğim sıra ile yazılması gerekir. Bunun nedeni bootstrap kütüphane gibi çalıştığı için javascript dosyaları önce çalışır ve js dosyaları için jquery gereklidir.
İkinci Yol
Bunun için
giriyoruz. Get started butonuna tıklıyoruz.
Starter template başlığının altında bulunan kodları kopyalayıp html dosyamıza yapıştırıyoruz. Böylece link üzerinden dosyayı projemize eklemiş oluyoruz.
Bu kodları yapıştırdığınız zaman bootstrap eklenmiş olacaktır.
<!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.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 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.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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
Dipnot: Dosyaları indirip ekleme yöntemi en çok tavsiye edilen yöntemdir.
