Bootstrap’in grid (ızgara) sistemi, içeriği düzenlemek ve hizalamak için kapsayıcı(containers), satır(row) ve sütun(container) kullanır. Flexbox ile oluşturulmuştur ve tamamen duyarlıdır(responsive). Aşağıda, ızgara(grid) sisteminin nasıl bir araya geldiğine dair bir örnek ve ayrıntılı bir açıklama bulunmaktadır.

Aşağıda örnek olarak bir kapsayıcı(container) içerisinde, bir satır(row) içerisinde, 3 adet sütun(column) bulunmakta. Flex yapısına sahip olan bu 3 div otomatik olarak yan yana dizilecektir. Small boyuta(col-sm tanımladığımız için) geçtikten sonra ise burada bulunan 3 div 100% boyuta geçerek alt alta gelecek ve direkt olarak duyarlı(responsive) işlevselliğine sahip olacaktır. (Boyutlar ile ilgili bilgiler aşağıda ızgara seçenekleri olarak verilmiştir.)

Codepen Bootstrap5 Grid System(Izgara Sistemi) örneği için tıkla:

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Grid options – Izgara seçenekleri

Bootstrap’in grid(ızgara) sistemi, altı varsayılan breakpoints(kesme noktasının) tümüne ve özelleştirdiğiniz herhangi bir breakpoints(kesme noktasına) uyarlanabilir. Altı varsayılan ızgara katmanı aşağıdaki gibidir:

• Extra small (xs)
• Small (sm)
• Medium (md)
• Large (lg)
• Extra large (xl)
• Extra extra large (xxl)

Yukarıda belirtildiği gibi, bu kesme noktalarının her birinin kendi kapsayıcısı(container), benzersiz sınıf öneki ve değiştiricileri vardır. Izgara(grid), bu kesme noktalarında aşağıdaki şekilde değişir:

Auto-layout columns – Otomatik düzen sütunları

Kolay sütun boyutlandırması için kesme noktasına(breakpoint) özgü sütun sınıflarını kullanın “.col-sm-6“.

Equal-width – Eşit genişlik

Burada her cihaz ve görünüm penceresi için geçerli olan iki grid(ızgara) düzeni bulunmaktadır, xs boyuttan xxl boyutuna kadar her kırılımda aynı ölçülere sahip divler bulunmaktadır. İhtiyacınız olan her kesme noktası için istediğiniz sayıda birimsiz(col-sm-, col-md-, col-lg- vb.) sınıf ekleyin ve her sütun aynı genişlikte olacaktır.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Setting one column width – Bir sütun genişliğini ayarlama

Flexbox ızgara(grid) sütunları(columns) için otomatik mizanpaj(sayfa düzeni) aynı zamanda bir sütunun genişliğini(column width) ayarlayabileceğiniz ve kardeş sütunların çevresinde otomatik olarak yeniden boyutlandırılabileceği anlamına gelir. Önceden tanımlanmış grid(ızgara) sınıflarını(aşağıda gösterildiği gibi), grid(ızgara) karışımlarını veya satır içi genişliklerini kullanabilirsiniz. Diğer sütunların, merkez sütunun genişliği ne olursa olsun yeniden boyutlandırılacağını unutmayın.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Variable width content – İçeriğe Göre Genişlik

Sütunları içeriklerinin doğal genişliğine göre boyutlandırmak için col-{breakpoint}-auto sınıfları kullanabiliriz. Aşağıdaki örneğe bakacak olursak col-{breakpoint}-auto şeklinde tanımladığımız alanlar içeriğin genişliğine göre yer kapsamaktadır.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Responsive classes – Duyarlı sınıflar

Bootstrap’in grid(ızgarası), karmaşık duyarlı düzenler oluşturmak için önceden tanımlanmış altı sınıf içerir.  Sütunlarınızın boyutunu, uygun gördüğünüz şekilde ekstra küçük, küçük, orta, büyük veya çok büyük cihazlarda özelleştirin.

All breakpoints – Tüm kesme noktaları

Tüm kesme noktalarında aynı olmasını istiyorsanız col class tanımlamasını yapabilirsiniz. Aynı zamanda bu kırılım noktalarında boyutlandırma yapmak istiyorsanız numaralandırma kullanabilirsiniz. Örn: col-8

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Stacked to horizontal – Yatay olarak yığılmış

Kesme noktalarında resonsive yapıya sahip olup sütunların alt alta gelmesini istiyorsak kesme noktasını tanımlamamız yeterli olacaktır. Örnek olarak col-sm veye col-sm-8 dediğimizde small boyuta geldiği zaman sütunlar alt alta geçecektir.

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Mix and match – Karıştır ve Eşleştir

Sütunlarınızın gerektiğinde her katman için farklı sınıfların bir kombinasyonunu kullanmak isteyebilirsiniz. Nasıl çalıştığına dair daha iyi bir fikir için aşağıdaki örneğe bakın.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Row columns – Satır sütunları

İçeriğinizi ve düzeninizi en iyi şekilde işleyen sütun sayısını hızlı bir şekilde ayarlamak için .row-cols-* duyarlı sınıfları kullanın. Normal .col-* sınıflar tek tek sütunlar için geçerliyken (örneğin .col-md-4), satır sütun sınıfları üst öğe üzerinde .row kısayol olarak ayarlanır..row-cols-auto ile sütunlara doğal genişliklerini verebilirsiniz.

Hızlı bir şekilde temel ızgara düzenleri oluşturmak veya kart düzenlerinizi kontrol etmek için bu satır sütun sınıflarını kullanın. Detaylı bilgi için aşağıdaki örnekleri inceleyiniz.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>


<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>


<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>


<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>


<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>


<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Ayrıca birlikte verilen Sass karışımını da kullanabilirsiniz row-cols()

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Nesting – İç içe kullanım

İçeriğinizi varsayılan ızgarayla iç içe yerleştirmek için mevcut bir sütunun içine yeni .row ve bir dizi .col-sm-* sütun ekleyin .col-sm-*. İç içe geçmiş satırların toplamı 12 veya daha az olan bir dizi sütun içermelidir (mevcut 12 sütunun tümünü kullanmanız gerekmez). Kısaca oluşturduğum sütunlar içerisinde tekrar satır ve sütun oluşturarak iç içe bir kullanım yapabiliriz. Detaylı bilgi için örneği inceleyiniz.

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Codepen: Bootstrap5 Grid System(Izgara Sistemi) örneği:

See the Pen Grid Equal-width by Cihan Koç (@chnkc41) on CodePen.

Grid sistemi hakkında daha fazla bilgiye sahip olmak için www.getbootstrap.com sitesini ziyaret ediniz.

Aşağıdaki yorumlarda sorularınızı sorabilir ve diğer soru soranlara cevap verebilirsiniz.

Bootstrap Containers (kapsayıcılar) nasıl çalışır?

Container’lar, Bootstrap’teki en temel düzen öğesidir ve varsayılan grid sistemimizi kullanırken gereklidir . Kapsayıcılar, içlerinde içeriği tutmak, doldurmak ve (bazen) ortalamak için kullanılır.

Bootstrap üç farklı kapsayıcıyla birlikte gelir:

• .container, max-width her duyarlı kesme noktasında bir
• .container-fluid, width: 100% tüm kesme noktalarında
• .container-{breakpoint}, width: 100% belirtilen kesme noktasına kadar

Aşağıdaki tablo, her bir kabın max-width orijinal .container ile karşılaştırmasını ve .container-fluid her bir kesme noktası boyunca nasıl olduğunu göstermektedir.

Codepen Bootstrap Containers(kapsayıcılar) örneği için tıkla:

Bootstrap 5 Grid örnekleri için tıklayın

Default container – Varsayılan kapsayıcı

Varsayılan .container sınıfımız duyarlı, sabit genişlikte bir kaptır, yani max-width her kesme noktasındaki değişiklikleri ifade eder.

<div class="container">
  <!-- Content here -->
</div>

Responsive Containers – Duyarlı konteynerler

Duyarlı kapsayıcılar, belirtilen kesme noktasına ulaşılana kadar %100 genişlikte bir sınıf belirlemenize olanak tanır, ardından max-width daha yüksek kesme noktalarının her biri için URL’leri uygularız . Örneğin, .container-sm kadar geniş %100 başlamaktır sm kesme noktası onunla büyütmek nerede, ulaşıldığında md, lg, xl, ve xxl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Fluid containers – Sıvı, Akışkan Kaplar

.container-fluid Görüntü alanının tüm genişliğini kapsayan, tam genişlikte bir kap için kullanılır.

<div class="container-fluid">
  ...
</div>

Containers Examples: Kapsayıcı Örnekleri

<!doctype html>
<html lang="en"> 
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- Web Site Title -->
    <title>Containers</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <!-- Internal CSS-->
    <style>
        .themed-container {
            padding: .75rem;
            margin-bottom: 1.5rem;
            background-color: rgba(0, 123, 255, .15);
            border: 1px solid rgba(0, 123, 255, .2);
        }
    </style>
</head>

<body> 

    <main>
        <div class="container">
            <hr class="my-4"> 
            <h2 class="mt-4">Containers</h2>
            <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.
                v5 adds a new <code>xxl</code> breakpoint.</p>
        </div>

        <div class="container themed-container">.container</div>
        <div class="container-sm themed-container">.container-sm</div>
        <div class="container-md themed-container">.container-md</div>
        <div class="container-lg themed-container">.container-lg</div>
        <div class="container-xl themed-container">.container-xl</div>
        <div class="container-xxl themed-container">.container-xxl</div>
        <div class="container-fluid themed-container">.container-fluid</div>
    </main>
 
    <!-- Optional JavaScript; choose one of the two! --> 
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous"></script> 
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
</body> 
</html>

Codepen Bootstrap Containers Example:

See the Pen Bootstrap5 Containers by Cihan Koç (@chnkc41) on CodePen.

Sass

Yukarıda gösterildiği gibi, Bootstrap istediğiniz düzenleri oluşturmanıza yardımcı olmak için önceden tanımlanmış bir dizi konteyner sınıfı oluşturur. Bu önceden tanımlanmış konteyner sınıflarını, _variables.scss onlara güç veren Sass haritasını (içinde bulunan ) değiştirerek özelleştirebilirsiniz:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Sass’ı kişiselleştirmenin yanı sıra, Sass karışımımızla kendi kaplarınızı da oluşturabilirsiniz.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

Sass haritalarımızı ve değişkenlerimizi nasıl değiştireceğiniz hakkında daha fazla bilgi ve örnekler için, lütfen Grid dokümantasyonunun Sass bölümüne bakın .

Bootstrap 5 Dersleri: Kesme Noktaları (Breakpoints) – Ders 2

Available breakpoints – Kullanılabilir kesme noktaları

Her bir kesme noktası, genişliği 12’nin katları olan kapsayıcıları rahatça tutacak şekilde . Kesme noktaları, aynı zamanda yaygın cihaz boyutları ve görüntü alanı boyutlarının bir alt kümesini temsil eder; her kullanım durumunu veya cihazı özel olarak hedeflemezler. Bunun yerine, seriler neredeyse her cihaz için güçlü ve tutarlı bir temel sağlar.

Bu kesme noktaları Sass aracılığıyla özelleştirilebilir – bunları _variables.scss stil sayfamızdaki Sass haritasında bulabilirsiniz.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Media queries – Medya sorguları

Bootstrap önce mobil olacak şekilde geliştirildiğinden, düzenlerimiz ve arayüzlerimiz için mantıklı kesme noktaları oluşturmak için bir avuç medya sorgusu kullanıyoruz. Bu kesme noktaları çoğunlukla minimum görüntü alanı genişliklerine dayanır ve görüntü alanı değiştikçe öğeleri ölçeklendirmemize izin verir.

Min-width – (Minimum genişlik)

Bootstrap, düzenimiz, ızgara sistemimiz ve bileşenlerimiz için kaynak Sass dosyalarımızda öncelikle aşağıdaki ortam sorgu aralıklarını (veya kesme noktalarını) kullanır.

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Bu Sass karışımları, Sass değişkenlerimizde açıklanan değerleri kullanarak derlenmiş CSS’mizde tercüme edilir. Örneğin:

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Max-width – Maksimum genişlik

Bazen diğer yöne giden medya sorgularını kullanırız (verilen ekran boyutu veya daha küçük) :

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Bu karışımlar beyan edilen kesme noktalarını alır, .02px onlardan çıkarır ve bunları max-width değerlerimiz olarak kullanır . Örneğin:

// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width

Single breakpoint – Tek kesme noktası

Minimum ve maksimum kesme noktası genişliklerini kullanarak tek bir ekran boyutu segmentini hedeflemek için medya sorguları ve karışımları da vardır.

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

Örneğin @include media-breakpoint-only(md) { … }, sonuç şu şekilde olacaktır:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

Between breakpoints – Kesme noktaları arasında

Benzer şekilde, medya sorguları birden çok kesme noktası genişliğine yayılabilir:

@include media-breakpoint-between(md, xl) { ... }

Hangi sonuç:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Bootstrap 5 Dersleri: Kapsayıcılar(Containers) – Ders 3

Kaynak, 1

“Bootstrap ile hızlı, duyarlı siteler oluşturun” mottosu ile hayatımıza giren Bootstrap frontend camiası için kayda değer bir öneme sahip. Günümüzde bir çok projede Bootstrap kullanılıyor ve kullanım oranı her geçen gün yayılmaya devam ediyor.

Bootstrap Sass(CSS) ile yazılmış, duyarlı ızgara sistemi, kapsamlı önceden oluşturulmuş bileşenler ve güçlü JavaScript eklentileri içeren dünyanın en popüler frontend açık kaynaklı bir framework. Bootstrap ile duyarlı mobil öncelikli siteleri hızla tasarlayıp özelleştirebilirsiniz.

Bootstrap 5 beta-1 sürümünü kullanmalı mıyım?

Geçtiğimiz günlerde “Bootstrap v5.0.0-beta1” sürümü yayınlandı. Beta sürümleri kararlı sürüm değildir ve yeni beta sürümleri gelmesi muhtemeldir. Beta sürümlerinde bulunan açıklar kapatılıp son değişiklikler yapıldıktan sonra kararlı sürüm yayınlanır. Bu sebeple projelerinizde “Bootstrap v5.0.0-beta1” sürümünü kullanmanızı tavsiye etmiyorum.

Bootstrap 5 Release Date Çıkış Tarihi, Önemli Güncellemeler

Bootstrap v5-beta-1 Kurulum

Bootstrap’in kaynak Sass ve JavaScript dosyalarını npm, Composer veya Meteor aracılığıyla yükleyebilirsiniz.

npm install bootstrap@next

gem install bootstrap -v 5.0.0.beta1

Bootstrap CDN

Yalnızca Bootstrap’in derlenmiş CSS veya JS dosyasını eklemeniz gerektiğinde, jsDelivr’i kullanabilirsiniz.

Bootstrap Css

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

Bootstrap Js Bundle

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

Bootstrap Js Separate

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

Eski Bootstrap versiyonlarını nasıl indirebilirim?

Bootstrap V1’den Bootstrap v5’e kadar hemen hemen her Bootstrap sürümü için barındırılan belgeler için buraya tıklayın.

Bootstrap Başlangıç dosyası oluşturma

Başlangıç ​​şablonu
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Udemy Html5 + Css3 Frontend Eğitimi

Udemy Bootstrap 4x Eğitimi:

Bootstrap 5 Dersleri: Kesme Noktaları (Breakpoints) – Ders 2

En popüler Bootstrap kaynağı en son sürüm Bootstrap 5 ile geliyor. Bu yazıda, Bootstrap 5’in çıkış (Release Date) tarihi ve en son sürümdeki önemli güncellemeler hakkında bilgi paylaşacağız.

Bootstrap Nedir?

Bootstrap, HTML, CSS ve JS ile geliştirilmiş dünyanın en popüler ve yaygın olarak kullanılan açık kaynaklı bir kütüphanedir.(Framework).  Şimdiye kadar bootstrap ekibi 4 bootstrap versiyonunu tanıttı ve yakın zamanda bootstrap 5 versiyonunu tanıtacak . Bootstrap V5’in piyasaya sürülmesiyle birlikte, en son sürümde bet10bet birçok büyük değişiklik sunulacak.

Bootstrap başlatıldıktan sonra, ekip 2 yıl sonra bootstrap’ın 2. versiyonunu tanıttı. Yine V2’yi başlattıktan bir yıl sonra, bootstrap ekibi V3’ü tanıttı. Bootstrap’i daha verimli hale getirmek için V4’ü tanıtmak 5 yıl sürdü. Şuanki mevcut sürüm 4.4.1

Bootstrap 5 Çıkış Tarihi:

Bootstrap 5 ne zaman çıkacak?

Ekip Bootstrap V5’in çıkacağını açıkladı ve yapılacaklar listesindeki birçok önemli değişiklikten bahsetti . Bootstrap 5’in çıkış tarihi henüz herhangi bir yetkili tarafından açıklanmadı, ancak beklenen sürümün yakın bir zamanda çıkması bekleniyor. Bootstrap V5’i 2020’nin ortalarında kullanmaya başlayabiliriz.

Bootstrap 5’teki Önemli Değişiklikler

Bootstrap V5’te beklenen önemli değişiklikler şunları içerir:

• Jekyll’den Hugo’ya geçiş: Hugo , şüphesiz milisaniyeler içinde statik siteler üreten ve Golang dilini kullanan dünyanın en hızlı Statik Site Üreticisi . Jekyll en eski statik site üreticisidir ve bootstrap 5’e bırakılmıştır. Bootstrap ekibi bu hareketi desteklemek için bağımlılıklarında değişiklikler yapmıştır ve yetkililer tarafından belirtilen tamamlanmalara yakındır.
• Jquery Kaldırıldı: Saf javascript lehine, bootstrap ekibi en büyük istemci tarafı bağımlılıklarını kaldırdı.
• Geliştirme için bootstrap dalını iyileştirme: Web sitesindeki resmi açıklamaya göre, master bootstrap v5’in yeni v3 dev dalı olacak ve v5’i geliştirmek için v4-dev’den yeni bir ana dal kesecekler.
• IE10 desteği Kaldırıldı: Bootstrap 5 artık Internet Explorer 10 ile devam etmeyecek ve en son sürümde IE10 tarayıcı desteğini kaldırdı.
• SVG Icon Library: Bootstrap ekibi, en son sürüm için kendi Ölçeklenebilir Vektör Grafikleri (SVG) kütüphanesini geliştirmeye çalışıyor . Bootstrap twitter hesabından yapılan bilgilendirme:

• QUnit’in kaldırılması
• Javascript’te Büyük Değişiklikler
• CSS’deki Küçük Değişiklikler
• Node.js 8 için bırakma desteği
• Yasemin’de Bina Test Altyapısı
• Esnek kutuyu ve ızgara düzenini harmanlamak için ızgarayı yenileyin
• Duyarlı yapışkan üst
• Geliştirme Bağımlılıklarını Güncelle

Bootstrap 5’de Jquery kaldırıldı.

Bootstrap ekibi, resmi web sitesinde açıklanan bilgiye göre bağımlılığı ortadan kaldırmak için Jquery’yi iptal etti . Ekip, 2017’de Jquery’yi bootstrap sürümlerinden tamamen kaldırmayı amaçlayan bir çekme isteği açmıştı ve şimdi tamamlandı ve tamamen vanilya Javascript ile değiştirildi. Jquery’yi bootstrap 5’ten çıkarmak, web geliştiriciler ile tartışmalara yol açtı. Bununla birlikte, geliştiriciler yine de bootstrap 5’i jquery ile veya jquery olmadan kullanabilecektir.

Bootstrap 5 Sütunlar ve Satırlar

Web geliştiricilerinin en çok merak ettiği 12 sütunlu grid sisteminde bir değişiklik olmayacak. Bootstrap konsepti sunulan 12 sütunlu sistem yok olmayacak ve Bootstrap 5’te de mevcut olacak. Web Geliştirme, Bootstrap 5’te Izgara ve düzen sütunlarını kullanmaya devam edilebilecek.

Önyükleme satırları ve sütunları, farklı ekran boyutlarındaki sorunlara en verimli çözümü sağlar. Bootstrap V5’teki değişimin ana odağı hala duyarlılıktır (responsiveness), ancak son bootstrap sürümlerinde geliştirme çoğunlukla performansı iyileştirmeye ve yükleme süresini azaltmaya odaklanmıştır.

Bootstrap 5 Eğitimi

Bootstrap ekibi, bootstrap sürüm 4’ü sürüm 5 ile güncellemek için merakla çalışıyor ve yakında Bootstrap 5’in çıkış tarihini açıklayabilir. Takım şimdiye kadar önemli değişiklikler yaptı ve son birkaç değişiklik yakında gerçekleşecek. Sürüm henüz tam olarak geliştirilmemiştir ve çıkış tarihi de resmi olarak açıklanmamıştır. Şüphesiz Bootstrap 5’te öğrenmek için çok daha fazlası var. Bootstrap kütüphanesinin en güncel özelliklerinin sürekli güncellenen Bootstrap Udemy Eğitimine ulaşmak için buraya tıklayın.

Ders5 Bootstrap ile ilk projenin oluşturulması ve dosyaların dahil edilmesi

Bu eğitim videosunda Sublimetext Editörünün yapılandırma ayarlarını yaparak kodlarımızı daha hızlı oluşturmayı öğreneceğiz. SunblimeText Editörü Yapılandırma Ayarları için gerekli kod aşağıdki gibidir.

Sublimetext Yapılandırma Ayarları – Keybings

[
{“keys”: [“alt+shift+f”], “command”: “reindent”, “args”: {“single_line”: false}},
{ “keys”: [“ctrl+7”], “command”: “toggle_comment”, “args”: { “block”: false } },
{ “keys”: [“ctrl+shift+7”], “command”: “toggle_comment”, “args”: { “block”: true } }
]

Sublimetext yapılandırma,sublimetext ayarları,sublimetext otomatik tamamlama,sublimetext kod tamamlama,how to complate code with sublimetext

Ders3 Sublime text editörünü indirme ve kurulumu – Download Sublimetext Editor and Setup

Bu dersimizde Bootstrap 4 Eğitiminde kulanacağımız Sublime Text Editörünü indireceğiz. Bu video içerisinde Sublime Text editörü nasıl indirilir ve kurulumu nasıl gerçekleştirilir bunu öğrenmiş olacağız.

Bootstrap Download – Bootstrap Dosyalarını İndirme

Bootstrap dosylarını bilgisayarımıza indirmek için https://getbootstrap.com/ adresine giriş yapıyoruz. Açılan bu sayfada download butonuna tıklıyoruz. Karşımıza yeni bir sayfa çıkacak. Bu sayfada temel dosyalar için ‘Compiled CSS and JS’ başlığı altında bulunan download butonuna tıklayarak indirebiliriz.

Bootstrap’a ait tüm kodları incelemek istiyorsanız. ‘Source files’ başlığı altında bulunan download butonuna tıklamanız gerekmektedir.

BootstrapCDN Nedir?

Bootstrap CDN bootstrap dosyalarını kendi bilgisayarımıza indirmeden ilgili bootstrap bağlantı linklerini kopyalarak projemize dahil etmektir. Dahil ettiğimiz bu bağlantı kodları Bootstrap sunucularında bulunan bootstrap dosyalarına ulaşarak projenize dahil olmuş olur

Bootstrap Nedir ?

Bootstrap twitter tarafından oluşturulmuş css ve js kütüphanelerinin bulunduğu bir frameworktür. Frameworkler daha hızlı, daha kolay, ve daha fonksiyonel yazılım yazmamızı sağlayan araçlardır.

Bootstrap bize hazır sınıf yapıları ve hazır şablonları ile daha hızlı ve kolay bir şekilde tasarım hazırlamamızı sağlıyor. Bootstrap’in en önemli özelliği ise responsive olmasıdır.

Tasarımın Responsive Olması Nedir ?

Tasarımın Responsive olması tüm cihazlara uyumlu olacağı anlamına gelir. Yani tablet, bilgisayar, telefon gibi cihazlarda ekranın boyutuna göre uyumlu bir yapı sağlamasıdır. Bootstrap ile tüm cihazlara uyumlu tasarımları çok kolay bir şekilde çıkartabiliriz.