Bootstrap - Ortam Kurulumu

Bootstrap'i kurmak ve kullanmaya başlamak çok kolaydır. Bu bölümde Bootstrap'in nasıl indirileceği ve kurulacağı açıklanacaktır. Bootstrap dosya yapısını da tartışacağız ve kullanımını bir örnekle göstereceğiz.

Bootstrap'i indirin

Bootstrap'in en son sürümünü şu adresten indirebilirsiniz: https://getbootstrap.com/. Bu linke tıkladığınızda aşağıdaki gibi bir ekran göreceksiniz -

Burada iki düğme görebilirsiniz -

Download Bootstrap- Bunu tıklayarak, Bootstrap CSS, JavaScript ve yazı tiplerinin önceden derlenmiş ve küçültülmüş sürümlerini indirebilirsiniz. Hiçbir belge veya orijinal kaynak kodu dosyası dahil edilmemiştir.
Download Source - Bunu tıklayarak, en son Bootstrap LESS ve JavaScript kaynak kodunu doğrudan GitHub'dan alabilirsiniz.

Bootstrap'in derlenmemiş kaynak koduyla çalışıyorsanız, kullanılabilir CSS dosyaları oluşturmak için LESS dosyalarını derlemeniz gerekir. CSS içine AZ dosyalarının derlenmesi için Bootstrap resmen yalnızca destekler Tatile dayalı Twitter'ın CSS hinter olduğunu less.js .

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. Bu öğreticiyi yazarken en son sürüm (Bootstrap 3) indirildi.

Dosya yapısı

Önceden derlenmiş Bootstrap

Derlenmiş Bootstrap 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. İsteğe bağlı Bootstrap teması olduğu için Glyphicons'un yazı tipleri dahildir.

Bootstrap Kaynak Kodu

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

Less / , js / ve fonts / altındaki dosyalar Bootstrap CSS, JS ve simge fontlarının (sırasıyla) kaynak kodudur.
Dist / klasör üzerinde derlenmiş indirme bölümünde listelenen her şeyi içerir.
docs-assets / , örnekler / ve tüm * .html dosyaları Bootstrap belgeleridir.

HTML Şablonu

Bootstrap kullanan basit bir HTML şablonu şuna benzer:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Burada görebilirsiniz jquery.js, bootstrap.min.js ve bootstrap.min.cssBootstrapped Şablonuna normal bir HTM dosyası oluşturmak için eklenen dosyalar. Bootstrap kitaplığını dahil etmeden önce jQuery kitaplığını dahil ettiğinizden emin olun.

Yukarıdaki kod parçasındaki öğelerin her biri hakkında daha fazla ayrıntı, Bootstrap CSS'ye Genel Bakış bölümünde tartışılacaktır .

Misal

Şimdi yukarıdaki şablonu kullanarak bir örnek deneyelim. Web sitemizde aşağıdaki örnek kod kutusunun sağ üst köşesinde bulunan Canlı Demo seçeneğini kullanarak aşağıdaki örneği deneyin -

<h1>Hello, world!</h1>

Sonraki tüm bölümlerde siteden sahte metin kullandık https://www.lipsum.com/.