Bootstrap 4 Kurulum - CSS ve JS Dosyaları

Bootstrap 4 yapısı ile sayfa oluşturmak istiyorsak , sayfamıza Bootstrap 4 için CSS ve JS dosyalarını çekmemiz gerekir. Tabi bootstrap JS dosyasının düzgün çalışabilmesi için JQUERY bağlantısınıda yapmalıyız. Bootstrap dükümantasyon sayfasından , bu dosyaları indirmeden link ile ekleyebiliyoruz.

CSS DOSYALARI

Bootstrap ile gelen classları kullanabilmek için önceki sürümünde olduğu gibi bootstrap.min.css dosyasının sayfaya bağlanması gerekir. Bootstrap sürümlerindeki farklılıklardan dolayı eklediğiniz css versiyonuna dikkat etmeniz gerekir.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

JS DOSYALARI

Bootstrap ile gelen javascript özelliklerin düzgün çalışabilmei için öncelikle JQUERY bağlantısı yapılmalıdır. Aşağıda bootstrap.bundle.min.js dosyası hem bootsrap.min.js hemde popper.min.js dosyasını beraber içermektedir. Js dosyalarının linkerini yazarken önce jquery , sonra bootstrap.bundle js dosyasını yazmalısınız.

popper.min.js dosyası tooltip ve popover gibi özellikler için kullanılmaktadır.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

Eğer Popper ve bootsrap js dosyalarını ayrı ayrı almak isterseniz bağlantıları aşağıdaki gibi yapabilirsiniz. Js dosyalarının linkerini yazarken önce jquery , sonra popper ve en son bootstrap js dosyasını yazmalısınız.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

BU DOSYALARI NEREYE EKLEYECEĞİZ?

Css dosyalarını "head" etiketleri arasına , JS dosyalarınızı ise sayfa yüklenmesini geciktirmemesi için "body" etiketinin en altına ekleyebiliriz. Bu durumda tasarıma hazır standart bir HTML5 - BOOTSRAP 4 sayfamız aşağıdaki gibi olacaktır.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title> BOOTSRAP 4 </title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">    
  </head>
  <body>

    <!-- 1. YOL : JQUERY ve BOOTSTRAP.BUNDLE (popper içinde) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

    <!-- 2. YOL : JQUERY ve BOOTSTRAP ve POPPER ayrı.. -->
    <!--
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Son Güncelleme : 28 Mart 2024 00:00, Perşembe

YORUMLAR () YORUM YAZ

Yorum yapılmamış!

BENZER İÇERİK