Bootstrap Eğitimi

Twitter Bootstrap, son zamanların en popüler ön uç çerçevesidir. Daha hızlı ve daha kolay web geliştirme için şık, sezgisel ve güçlü mobil ilk ön uç çerçevedir. HTML, CSS ve Javascript kullanır. Bu eğitim, size kolaylıkla web projeleri oluşturabileceğiniz Bootstrap Framework temellerini öğretecektir. Eğitim, Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components ve Bootstrap Plugins gibi bölümlere ayrılmıştır. Bu bölümlerin her biri, basit ve faydalı örneklerle birlikte ilgili konuları içerir.

Bootstrap'i Neden Öğrenmelisiniz?

Mobile first approach - Bootstrap 3, çerçeve ayrı dosyalar yerine tüm kitaplık boyunca Mobil ilk stillerden oluşur.
Browser Support - Tüm popüler tarayıcılar tarafından desteklenmektedir.

Easy to get started- Sadece HTML ve CSS bilgisi ile herkes Bootstrap ile başlayabilir. Ayrıca Bootstrap resmi sitesinde iyi bir dokümantasyon var.
Responsive design- Bootstrap'in duyarlı CSS'si Masaüstü Bilgisayarlara, Tabletlere ve Cep Telefonlarına uyarlanır. Duyarlı tasarım hakkında daha fazla bilgi Bootstrap Duyarlı Tasarım bölümündedir .

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 bir açık kaynaktır.

Bootstrap kullanarak Merhaba Dünya.

Size Bootstrap hakkında biraz heyecan vermek için size küçük bir geleneksel Bootstrap Hello World programı vereceğim, Demo linkini 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ı

Scaffolding- Bootstrap, Izgara Sistemi, bağlantı stilleri ve arka plan ile temel bir yapı sağlar. Bu, bölümde ayrıntılı olarak ele alınmıştır.Bootstrap Basic Structure
CSS- Bootstrap, genel CSS ayarları, genişletilebilir sınıflarla stilize edilmiş ve geliştirilmiş temel HTML öğeleri ve gelişmiş bir ızgara sistemi özelliği ile birlikte gelir. Bu, bölümde ayrıntılı olarak ele alınmıştır.Bootstrap with CSS.
Components- Bootstrap, ikonografi, açılır menüler, 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, bölümde ayrıntılı olarak ele alınmıştır.Layout Components.
JavaScript Plugins- Bootstrap bir düzineden fazla özel jQuery eklentisi içerir. Hepsini veya tek tek kolayca ekleyebilirsiniz. Bu, bölümde ayrıntılı olarak ele alınmıştırBootstrap Plugins.
Customize - 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 ve web sitesi geliştirme isteği olan herkes için hazırlanmıştır. Bu öğreticiyi tamamladıktan sonra, kendinizi Twitter Bootstrap kullanarak web projeleri geliştirmede orta düzeyde bir uzmanlık düzeyinde bulacaksınız.

Önkoşullar

Bu eğiticiye geçmeden önce, HTML ve CSS'nin temellerini zaten bildiğinizi varsayıyoruz. Bu kavramların tam olarak farkında değilseniz, HTML Eğitimi ve CSS Eğitimi hakkındaki kısa eğitimimizi incelemenizi öneririz.