Bootstrap 4 - Ortam Kurulumu

Sen onu ekleyerek web sitenizde Bootstrap 4 kullanmaya başlayabilirsiniz CDN (Content Delivery Network) veya indirirken getbootstrap.com .

CDN kullanma

Bootstrap 4, Content Delivery Network'ten eklenerek web sitesinde kullanılabilir .

Projenizde aşağıdaki derlenmiş Bootstrap'in CSS ve JS CDN'sini kullanın.

<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet" 
   href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
   integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin = "anonymous">

<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
   crossorigin = "anonymous">
</script>

<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
   integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
   crossorigin = "anonymous">
</script>

<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
   integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
   crossorigin = "anonymous">
</script>

JavaScript'in derlenmiş sürümünü kullanıyorsanız, küçültülmüş Bootstrap JavaScript'ten önce jQuery ve Popper.js'nin CDN sürümlerini ekleyin (Bootstrap 4, kipler, araç ipuçları, açılır pencereler gibi JavaScript bileşenlerini kullanmak için jQuery ve Popper.js kullanır) .

Aşağıda jQuery gerektiren bazı bileşenler verilmiştir -

Kapatılabilir uyarılar için kullanılır
Düğmeleri ve onay kutularını / radyo düğmelerini kullanarak durumları değiştirin ve içeriği değiştirmek için daraltın
Slaytlar, kontroller ve göstergeler için atlıkarınca
Açılır menüler (mükemmel konumlandırma için Popper.js kullanır )
Modalleri açın ve kapatın
Navbar'ı daraltmak için
Araç ipuçları ve açılır bilgiler (mükemmel konumlandırma için Popper.js kullanır )

Bootstrap 4'ü indirme

Bootstrap 4'ü şu adresten indirebilirsiniz: https://getbootstrap.com/docs/4.1/getting-started/download/. Bu bağlantıya tıkladığınızda, aşağıda gösterildiği gibi bir ekran göreceksiniz -

Burada iki düğme görebilirsiniz -

Download- Buna tıklayarak, Bootstrap CSS ve JavaScript'in önceden derlenmiş ve küçültülmüş sürümlerini indirebilirsiniz. Hiçbir belge veya orijinal kaynak kodu dosyası dahil edilmemiştir.
Download Source - Buna tıklayarak en son Bootstrap SCSS, JavaScript kaynak kodu ve belge dosyalarını alabilirsiniz.

Daha iyi anlamak ve kullanım kolaylığı için, eğitim boyunca Bootstrap'in önceden derlenmiş sürümünü kullanacağız. Dosyalar derlendiğinden ve küçültüldüğünden, her seferinde ayrı işlevler için ayrı dosyalar dahil etmek zorunda kalmazsınız.

Dosya Yapısı

Önceden derlenmiş Bootstrap 4

Derlenmiş Bootstrap 4 sürümü indirildikten sonra, ZIP dosyasını çıkartın ve aşağıdaki dosya / dizin yapısını göreceksiniz -

Gördüğünüz gibi, derlenmiş CSS ve JS (bootstrap. *), Ayrıca derlenmiş ve küçültülmüş CSS ve JS (bootstrap.min. *) Vardır.

Bootstrap 4 Kaynak Kodu

Bootstrap 4 kaynak kodunu indirdiyseniz, dosya yapısı aşağıdaki gibi olacaktır -

Js / ve scss / altındaki dosyalar Bootstrap CSS ve JavaScript için kaynak kodudur.
Dist / klasör üzerinde derlenmiş indirme bölümünde listelenen her şeyi kapsar.
Docs / örnekler / , özyükleme belgeler ve özyükleme kullanım örnekleri için kaynak kodu içerir.

Bootstrap 4 ile İlk Web Sayfasını Oluşturma

Aşağıdaki örnek, Bootstrap 4'ün basit web sayfasını belirtir -

Misal

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css"
         integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <h2>Hello, world!!! Welcome to Tutorialspoint...</h2>
      
      <!-- 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.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Aşağıdaki sonucu verecektir -

Çıktı