Bootstrap Temel Bilgiler (Başlangıç)

Bootstrap, popüler bir HTML, CSS ve JavaScript kütüphanesi ve çerçevesidir. Twitter tarafından oluşturulmuş ve açık kaynak olarak yayınlanmıştır. Web sayfalarını hızlı bir şekilde oluşturmak için kullanılır ve kullanıcı arayüzü bileşenleri ve stilleri içerir.

İşte Bootstrap’un temel bilgileri:

Bootstrap Grid Sistemi

Bootstrap, mobil cihazlar ve masaüstü cihazlar dahil olmak üzere tüm cihazlarda tutarlı bir görünüm sağlamak için 12 sütunlu bir grid sistemi kullanır. Grid sistemi, sayfayı sütunlara böler ve bu sütunlara içerik yerleştirmenize olanak tanır.

Örneğin, aşağıdaki kod bloğu, bir row (satır) oluşturur ve içinde iki sütun (col-6) oluşturur:

<div class="row">
  <div class="col-6">İçerik 1</div>
  <div class="col-6">İçerik 2</div>
</div>

Bootstrap Bileşenleri

Bootstrap, web sayfalarında sık kullanılan bileşenler için önceden tasarlanmış stil ve kodları içerir. Bazı yaygın bileşenler şunlardır:

  • Navbar: Menüler oluşturmak için kullanılır.
  • Modal: Kullanıcı etkileşimlerini göstermek için kullanılır.
  • Carousel: Görüntü veya içerik slaytları oluşturmak için kullanılır.
  • Button: Butonlar oluşturmak için kullanılır.
  • Form: Formlar oluşturmak için kullanılır.

Bileşenleri kullanmak, daha hızlı bir şekilde web sayfaları oluşturmanıza yardımcı olabilir.

Bootstrap Stilleri

Bootstrap, yaygın HTML elementleri için önceden tasarlanmış stiller içerir. Bazı özellikler şunlardır:

  • Grid sistemine özgü sınıflar: .row, .col-*
  • Yazı tipi stilleri: .h1, .h2, .h3, .h4, .h5, .h6
  • Buton stilleri: .btn, .btn-primary, .btn-danger
  • Form stilleri: .form-control, .form-group

Bootstrap Responsive Tasarım

Bootstrap, mobil cihazlar ve masaüstü cihazlar dahil olmak üzere tüm cihazlarda tutarlı bir görünüm sağlamak için tasarlanmıştır. Bu, web sayfanızın farklı boyutlardaki ekranlarda iyi görünmesini sağlar. Bootstrap’un responsive tasarımı, grid sistemi ve bileşenleri kullanarak kolayca uygulanabilir.

Bu temel bilgiler, Bootstrap kullanmaya başlamak için iyi bir başlangıç ​​noktası olabilir. Daha fazla özellik ve bileşen öğrenmek için, Bootstrap resmi belgelerine başvurabilirsiniz

Bunu Paylaş
Pin Share

Bir yanıt yazın

Bizi Sosyal Medyadan Takip edebilirsiniz.