Erkan KESER

AnaSayfa > bootstrap 5 > Bootstrap 5 Hızlı Başlangıç

Bootstrap 5 Hızlı Başlangıç

bootstrap 5

Bootstrap 5'in temel özellikleri, nasıl kullanılacağı anlatılmaktadır.

Bootstrap 5, modern web geliştirme için popüler bir CSS framework'üdür. Özellikle responsive (duyarlı) tasarımlar oluşturmak için kullanılır.

1. Bootstrap 5'e Giriş

Bootstrap Nedir?

Bootstrap, Twitter tarafından geliştirilen ve şu anda açık kaynak olarak sunulan bir CSS framework'üdür. Bootstrap, önceden tanımlanmış CSS sınıfları ve JavaScript bileşenleri ile hızlı ve kolay bir şekilde responsive web sayfaları oluşturmayı sağlar.

Bootstrap 5'in Yenilikleri:

  • jQuery bağımlılığı kaldırıldı.
  • Yeni utility sınıfları eklendi.
  • Daha hafif ve modüler bir yapı.
  • Improved grid system (ızgara sistemi).
  • SVG ikon desteği.

2. Bootstrap 5 Kurulumu

Bootstrap 5'i projenize dahil etmek için birkaç farklı yöntem vardır:

CDN ile Kurulum:

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

NPM ile Kurulum:

npm install bootstrap@5.3.0

Manuel İndirme:

Bootstrap resmi sitesinden indirip projenize dahil edebilirsiniz.

3. Bootstrap 5 Temel Yapısı

Bootstrap 5, HTML elementlerini stilize etmek için bir dizi önceden tanımlanmış CSS sınıfı sunar. Bu sınıflar, grid sistemini, tipografi, formlar, butonlar, navigasyon ve daha birçok bileşeni kolayca yönetmenizi sağlar.

Örnek HTML Şablonu:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Örnek</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-center">Merhaba, Bootstrap 5!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

4. Grid Sistemi

Bootstrap 5, 12 sütunlu bir grid sistemi kullanır. Bu sistem, sayfanızı responsive bir şekilde düzenlemenizi sağlar.

Örnek Grid Yapısı:

<div class="container">
    <div class="row">
        <div class="col-md-4">Sütun 1</div>
        <div class="col-md-4">Sütun 2</div>
        <div class="col-md-4">Sütun 3</div>
    </div>
</div>

.container: Sabit genişlikte bir container oluşturur.

.row: Satır oluşturur.

.col-md-4: Orta boyutlu ekranlarda 4 sütun genişliğinde bir sütun oluşturur.

5. Temel Bileşenler

Butonlar:

Devam Edecek.