Bootstrap Kurulumu ve Kullanımı

Bootstrap kurmak ve kullanmak çok basittir. CDN linkleri aracılığı ile projenize dahil edebilirsiniz. Diğer bir yöntem olarak dosyaları indirip dosya yollarını sitenizin ilgili alanlarına ekleyebilirsiniz.

Projenize indirip kurduğunuz Bootstrap başka bir siteye bağlanmayacağı için daha hızlı çalışacaktır.

<!--Bu css kodunu head etiketlerinizin arasına ekleyin. -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!--Bu js kodlarını </body> etiketinden önce projenize ekleyin. -->
<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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>


<!--basitçe şablonunuz bu şekilde çalışmaya hazır olacak-->
<!doctype html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>Sayfa Başlığı</title>
  </head>
  <body>
    <h1>İlk anlamlı yazı artık hazırsınız.</h1>


    <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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>
İndirdiğiniz dosyada bootstrap.min.css ve bootstrap.css dosyaları olabilir. İşlem olarak aynı olmalarına rağmen sitenin hızı açısından sıkıştırılmış bootstrap kütüphanesini tercih edin.
Aynı class'a sahip etiketlerden en son yazılan etiketin geçerli olacağını unutmayın. Bootstrap stilleri arasında değiştirmek istediğiniz bir class varsa kendi stil yapılandırmanızı Bootstrap yapılandırmasından sonra ekleyin. Kendi yapılandırmanız farklı bir dosya olması daha düzenli olmanıza yardımcı olur.
E.Albayrak

0 Yorum

Soru & Yorum


Web Tasarım

Renkli Kare

Web Tasarım Ajansı