Bootstrap Eğitimi

Twitter Bootstrap, son zamanların en popüler ön uç çerçevesi. Daha hızlı ve daha kolay web geliştirme için şık, sezgisel ve güçlü mobil ilk ön çerçeve. HTML, CSS ve Javascript kullanır. Bu eğitimde, kolayca web projeleri oluşturabileceğiniz Bootstrap Framework'ün temelleri öğretilecektir. Eğitici, Bootstrap Temel Yapısı, Bootstrap CSS, Bootstrap Mizanpajı Bileşenleri ve Bootstrap Eklentileri gibi bölümlere ayrılmıştır. Bu bölümlerin her biri basit ve kullanışlı örneklerle ilgili konular içerir.

Neden Bootstrap Öğrenmeli?

  • Mobil ilk yaklaşım - Bootstrap 3, çerçeve, ayrı dosyalar yerine tüm kütüphane boyunca Mobil ilk stillerden oluşur.

  • Tarayıcı Desteği - Tüm popüler tarayıcılar tarafından desteklenir.

Popüler Tarayıcı
  • Başlamak kolay - Sadece HTML ve CSS bilgisi ile Bootstrap ile herkes başlayabilir. Ayrıca Bootstrap resmi sitesi iyi bir belgeye sahiptir.

  • Duyarlı tasarım - Bootstrap'ın duyarlı CSS'si Masaüstü, Tablet ve Cep Telefonlarına göre ayarlanır. Duyarlı tasarım hakkında daha fazla bilgi Bootstrap Duyarlı Tasarım bölümünde .

Sorumlu tasarım
  • Geliştiriciler için bir arayüz oluşturmak için temiz ve tek tip bir çözüm sağlar.

  • Özelleştirmesi kolay güzel ve işlevsel yerleşik bileşenler içerir.

  • Ayrıca web tabanlı özelleştirme sağlar.

  • Ve en iyisi de açık kaynak.

Merhaba Dünya Bootstrap kullanarak.

Size Bootstrap hakkında biraz heyecan vermek için, size küçük bir geleneksel Bootstrap Hello World programı vereceğim, Demo bağlantısını kullanarak deneyebilirsiniz.

<!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>

Bootstrap Uygulamaları

  • İskele - Bootstrap, Izgara Sistemi, bağlantı stilleri ve arka plan ile temel bir yapı sağlar. Bu, Bootstrap Temel Yapısı bölümünde ayrıntılı olarak ele alınmıştır.

  • CSS - Bootstrap, global CSS ayarları, genişletilebilir sınıflarla stilize edilmiş ve geliştirilmiş temel HTML öğeleri ve gelişmiş bir ızgara sistemi ile birlikte gelir. Bu, CSS ile Bootstrap bölümünde ayrıntılı olarak ele alınmaktadır .

  • Bileşenler - Bootstrap, ikonografi, açılır listeler, gezinme, uyarılar, açılır pencereler ve çok daha fazlasını sağlamak için oluşturulmuş bir düzineden fazla yeniden kullanılabilir bileşen içerir. Bu, Düzen Bileşenleri bölümünde ayrıntılı olarak ele alınmıştır.

  • JavaScript Eklentileri - Bootstrap bir düzineden fazla özel jQuery eklentisi içerir. Hepsini veya tek tek kolayca ekleyebilirsiniz. Bu, Bootstrap Eklentileri bölümünde ayrıntılı olarak ele alınmıştır.

  • Özelleştir - Kendi sürümünüzü almak için Bootstrap bileşenlerini, LESS değişkenlerini ve jQuery eklentilerini özelleştirebilirsiniz.

seyirci

Bu eğitim, temel HTML ve CSS bilgisine sahip olan ve web siteleri geliştirme dürtüsü olan herkes için hazırlanmıştır. Bu öğreticiyi tamamladıktan sonra, Twitter Bootstrap kullanarak web projeleri geliştirmede kendinizi ılımlı bir uzmanlık düzeyinde bulacaksınız.

Ön şartlar

Bu eğiticiye devam etmeden önce, HTML ve CSS ile ilgili temel bilgilerin zaten farkında olduğunuzu varsayıyoruz. Bu kavramların farkında değilseniz, HTML Eğitimi ve CSS Eğitimi ile ilgili kısa eğitimlerimizi incelemenizi öneririz.