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 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 Ö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 Geçmişi

Bootstrap, Mark Otto ve Jacob Thornton tarafından Twitter'da geliştirildi ve Ağustos 2011'de GitHub'da açık kaynaklı bir ürün olarak yayınlandı.

Haziran 2014'te Bootstrap, GitHub'daki 1 Numaralı projeydi!

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 3'te mobil öncelikli stiller temel çerçevenin bir parçasıdır
  • Tarayıcı uyumluluğu: Bootstrap, tüm modern tarayıcılarla uyumludur (Chrome, Firefox, Internet Explorer, Edge, Safari ve Opera)

Önyükleme Sürümleri

Bu eğitim , 2013'te piyasaya sürülen Bootstrap 3'ü takip ediyor. Ancak, daha yeni sürümleri de ele alıyoruz; Bootstrap 4 (2018'de yayınlandı) ve Bootstrap 5 (2021'de yayınlandı) .

Bootstrap 5 , Bootstrap'in en yeni sürümüdür ; yeni bileşenler, daha hızlı stil sayfaları, daha fazla yanıt verme vb. ile. 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 Nereden Alınır?

Kendi web sitenizde Bootstrap kullanmaya başlamanın iki yolu vardır.

Yapabilirsiniz:

  • Bootstrap'i getbootstrap.com'dan indirin
  • Bir CDN'den Bootstrap'ı dahil et

Bootstrap'i İndirme

Bootstrap'i kendiniz indirmek ve barındırmak istiyorsanız, getbootstrap.com adresine gidin ve oradaki talimatları izleyin.

Önyükleme CDN'si

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

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

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Bootstrap CDN kullanmanın bir avantajı:
Birçok kullanıcı, başka bir siteyi ziyaret ederken MaxCDN'den Bootstrap 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
Bootstrap, JavaScript eklentileri için jQuery kullanır (kipler, araç ipuçları, vb.). Ancak, Bootstrap'in yalnızca CSS bölümünü kullanırsanız, jQuery'ye ihtiyacınız olmaz.

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

1. HTML5 belge türünü ekleyin

Bootstrap, HTML5 doküman tipini 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 3 mobil önceliklidir

Bootstrap 3, 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 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 Sayfası

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

Örnek

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.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 sayfasının kodunu gösterir (tam genişlikte bir kap ile):

Örnek

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.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 ❯