HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Önyükleme 4 Başlarken

❮ Öncesi Sonraki ❯

Bootstrap nedir?

  • Bootstrap, daha hızlı ve daha kolay web geliştirme için ücretsiz bir ön uç çerçevedir
  • Bootstrap, tipografi, formlar, düğmeler, tablolar, gezinme, modals, görüntü karuselleri ve diğer pek çok şey için HTML ve CSS tabanlı tasarım şablonlarının yanı sıra isteğe bağlı JavaScript eklentilerini içerir.
  • Bootstrap ayrıca size kolayca duyarlı tasarımlar oluşturma yeteneği de verir.

Duyarlı Web Tasarımı Nedir?

Duyarlı web tasarımı, küçük telefonlardan büyük masaüstü bilgisayarlara kadar tüm cihazlarda iyi görünecek şekilde kendilerini otomatik olarak ayarlayan web siteleri oluşturmakla ilgilidir.

Önyükleme 4 Örneği

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>

Önyükleme Sürümleri

Bu eğitim , Bootstrap 3'e yükseltme olarak 2018'de piyasaya sürülen Bootstrap 4'ü yeni bileşenler, daha hızlı stil sayfasıc, daha fazla yanıt verme vb. ile takip eder.

Bootstrap 5 (2021'de yayınlandı), Bootstrap'in en yeni sürümüdür ; Tüm büyük tarayıcıların ve platformların en son, kararlı sürümlerini destekler. Ancak, Internet Explorer 11 ve aşağısı desteklenmez.

Bootstrap 5 ile Bootstrap 3 & 4 arasındaki temel fark, Bootstrap 5'in jQuery yerine JavaScript'e geçmesidir .

Not: Bootstrap 3 ve Bootstrap 4, kritik hata düzeltmeleri ve belge değişiklikleri için ekip tarafından hala desteklenmektedir ve bunları kullanmaya devam etmek tamamen güvenlidir. Ancak bunlara yeni özellikler EKLENMEYECEKTİR.

Bootstrap Neden Kullanılır?

Bootstrap'in Avantajları:

  • Kullanımı kolay: Yalnızca temel HTML ve CSS bilgisine sahip herkes Bootstrap kullanmaya başlayabilir
  • Duyarlı özellikler: Bootstrap'in duyarlı CSS'si telefonlara, tabletlere ve masaüstlerine uyum sağlar
  • Mobil öncelikli yaklaşım: Bootstrap'ta mobil öncelikli stiller temel çerçevenin bir parçasıdır
  • Tarayıcı uyumluluğu: Bootstrap 4, tüm modern tarayıcılarla uyumludur (Chrome, Firefox, Internet Explorer 10+, Edge, Safari ve Opera)

Bootstrap 4 Nereden Alınır?

Bootstrap 4'ü kendi web sitenizde kullanmaya başlamanın iki yolu vardır.

Yapabilirsiniz:

  • Bir CDN'den Bootstrap 4'ü dahil edin
  • Bootstrap 4'ü getbootstrap.com'dan indirin

Önyükleme 4 CDN'si

Bootstrap 4'ü kendiniz indirmek ve barındırmak istemiyorsanız, bunu bir CDN'den (İçerik Dağıtım Ağı) ekleyebilirsiniz.

jsDelivr , Bootstrap'in CSS ve JavaScript'i için CDN desteği sağlar. Ayrıca jQuery'yi de eklemelisiniz:

jsDelivr:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap 4 CDN'sini kullanmanın bir avantajı:
Birçok kullanıcı, başka bir siteyi ziyaret ederken jsDelivr'den Bootstrap 4'ü zaten indirmiştir. Sonuç olarak, sitenizi ziyaret ettiklerinde önbellekten yüklenecek ve bu da daha hızlı yükleme süresine yol açacaktır. Ayrıca, çoğu CDN, bir kullanıcı ondan bir dosya istediğinde, dosyanın kendisine en yakın sunucudan sunulmasını sağlar ve bu da daha hızlı yükleme süresine yol açar.

jQuery ve Popper?
Bootstrap 4, JavaScript bileşenleri (modals, tooltips, popovers vb.) için jQuery ve Popper.js kullanır. Ancak, Bootstrap'in yalnızca CSS bölümünü kullanırsanız, bunlara ihtiyacınız olmaz.

  • Kapatılabilir uyarılar
  • Durumları değiştirmek için düğmeler ve onay kutuları/radyo düğmeleri
  • Slaytlar, kontroller ve göstergeler için atlıkarınca
  • İçeriği değiştirmek için daralt
  • Dropdowns (also requires Popper.js for perfect positioning)
  • Modals (open and close)
  • Navbar (for collapsible menus)
  • Tooltips and popovers (also requires Popper.js for perfect positioning)
  • Scrollspy for scroll behavior and navigation updates

Bootstrap 4'ü İndirme

Bootstrap 4'ü kendiniz indirmek ve barındırmak istiyorsanız, https://getbootstrap.com/ adresine gidin ve oradaki talimatları izleyin.

Bootstrap 4 ile İlk Web Sayfasını Oluşturun

1. HTML5 belge türünü ekleyin

Bootstrap 4, HTML5 belge türünü gerektiren HTML öğelerini ve CSS özelliklerini kullanır.

Her zaman HTML5 belge türünü, lang özniteliği ve doğru karakter kümesiyle birlikte sayfanın başına ekleyin:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 4 mobil önceliklidir

Bootstrap 4, mobil cihazlara duyarlı olacak şekilde tasarlanmıştır. Mobil öncelikli stiller, temel çerçevenin bir parçasıdır.

Düzgün oluşturma ve dokunmatik yakınlaştırmayı sağlamak için öğenin <meta>içine aşağıdaki etiketi ekleyin:<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

Parça width=device-width, cihazın ekran genişliğini takip etmek için sayfanın genişliğini ayarlar (cihaza göre değişir).

Parça initial-scale=1, sayfa tarayıcı tarafından ilk yüklendiğinde ilk yakınlaştırma seviyesini ayarlar.

3. Konteynerler

Bootstrap 4 ayrıca site içeriğini sarmak için bir kapsayıcı öğe gerektirir.

Aralarından seçim yapabileceğiniz iki kapsayıcı sınıfı vardır:

  1. Sınıf .container, duyarlı bir sabit genişlikte kapsayıcı sağlar
  2. Sınıf , görünümün tüm genişliğini kapsayan tam genişlikte bir kap.container-fluid sağlar
.konteyner
.konteyner-sıvı

İki Temel Önyükleme 4 Sayfası

Aşağıdaki örnek, temel bir Bootstrap 4 sayfasının kodunu gösterir (duyarlı sabit genişlikte bir kapsayıcı ile):

Kapsayıcı Örneği

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

Aşağıdaki örnek, temel bir Bootstrap 4 sayfasının kodunu gösterir (tam genişlikte bir kap ile):

Kap Sıvı Örneği

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

❮ Öncesi Sonraki ❯