Bootstrap 5 Uygulamalı Araçlar

Utilities / Helper Sınıfları

Bootstrap 5, CSS kodu kullanmadan element stillerini hızlı bir şekilde ayarlamak için birçok utility/helper sınığı içerir.

Kenar çubuğu

Kenar çubuğu sınıfını kullanarak elemente kenar çubuğu ekleyin veya kaldırın:

Örnek

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Kendi kendine deneyin

Kenarlık genişliği

Kullanım .border-1 ile .border-5 Kenarlık genişliğini değiştirmek için:

Örnek

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

Kendi kendine deneyin

Kenarlık rengi

Herhangi bir kontekst kenarlık rengi sınıfını kullanarak kenara renk ekleyin:

Örnek

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

Kendi kendine deneyin

Köşe kenarlık

Kullanım rounded Element'e yuvarlak köşeler eklemek için:

Örnek

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

Kendi kendine deneyin

Yüzeysel ve yüzeysel temizleme

Kullanım .float-end Sağa yüzeysel sınıfları kullanarak veya .float-start Sola yüzeysel ve .clearfix Yüzeysel temizleme sınıfları:

Örnek

<div class="clearfix">
  <span class="float-start">Sola yüzeysel</span>
  <span class="float-end">Sağa yüzeysel</span>
</div>

Kendi kendine deneyin

Duyarlı yüzeysel

Ekrana göre genişliğe göre sol veya sağa yüzeysel olan elementleri, duyarlı yüzeysel sınıflar kullanarak yüzeysel etki sağlayın (.float-*-left|rightAsterisk (*) şu anlama gelir:

  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

Örnek

<div class="float-sm-end">Küçük ekranlar veya daha geniş ekranlarda sağa yüzeysel</div><br>
<div class="float-md-end">Orta ekranlar veya daha geniş ekranlarda sağa yüzeysel</div><br>
<div class="float-lg-end">Özellikle büyük ekranlar veya daha geniş ekranlarda sağa yüzeysel</div><br>
<div class="float-xl-end">Özellikle büyük ekranlar veya daha geniş ekranlarda sağa yüzeysel</div><br>
<div class="float-xxl-end">Özellikle büyük ekranlar veya daha geniş ekranlarda sağa yüzeysel</div><br>
<div class="float-none">Yüzeysel değil</div>

Kendi kendine deneyin

Orta konumlandırma

Kullanım .mx-auto Orta konumlandırılan elementler (margin-left ve margin-right: auto eklenmiş):

Örnek

<div class="mx-auto bg-warning" style="width:150px">Ortaya yerleştirilmiş</div>

Kendi kendine deneyin

Genişlik

w-* sınıflarını kullanarak（.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）Elementin genişliğini ayarlamak için：

Örnek

<div class="w-25 bg-warning">Genişlik %25</div>
<div class="w-50 bg-warning">Genişlik %50</div>
<div class="w-75 bg-warning">Genişlik %75</div>
<div class="w-100 bg-warning">Genişlik %100</div>
<div class="w-auto bg-warning">Otomatik genişlik</div>
<div class="mw-100 bg-warning">Maksimum genişlik %100</div>

Kendi kendine deneyin

Yükseklik

h-* sınıflarını kullanarak（.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）Elementin yüksekliğini ayarlamak için：

Örnek

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Yükseklik %25</div>
  <div class="h-50 bg-warning">Yükseklik %50</div>
  <div class="h-75 bg-warning">Yükseklik %75</div>
  <div class="h-100 bg-warning">Yükseklik %100</div>
  <div class="h-auto bg-warning">Otomatik yükseklik</div>
  <div class="mh-100 bg-warning" style="height:500px">Maksimum yükseklik %100</div>
</div>

Kendi kendine deneyin

Aralıklar

Bootstrap 5 geniş bir yelpazeye sahip olan ve tüm kesirler için geçerli olan yan ve dolgu uygulama sınıflarına sahiptir. Bu sınıflar tüm kesirler için geçerlidir：

  • xs (<= 576px)
  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

Bu sınıfların kullanım formatı şu şekildedir：{özellik}{kenarlar}-{boyut} için kullanılır xs，ve {özellik}{kenarlar}-{breakpoint}-{boyut} için kullanılır sm、md、lg、xl ve xxl。

özellik Aşağıdakilerden biri

  • m - Ayarlayın marjin
  • p - Ayarlayın dolgu

kenarlar Aşağıdakilerden biri

  • t - Ayarlayın marjin-üst veya dolgu-üst
  • b - Ayarlayın marjin-alt veya dolgu-alt
  • s - Ayarlayın marjin-sol veya dolgu-sol
  • e - Ayarlayın marjin-sağ veya dolgu-sağ
  • x - Aynı anda ayarlayın dolgu-sol ve dolgu-sağ veya marjin-sol ve marjin-sağ
  • y - Aynı anda ayarlayın dolgu-üst ve dolgu-alt veya marjin-üst ve marjin-alt
  • boş - Elemanın dört kenarına marjin veya dolgu

boyut Aşağıdakilerden biri

  • 0 - Ekleyin marjin veya dolgu Ayarlanmış 0
  • 1 - Ekleyin marjin veya dolgu Ayarlanmış .25rem
  • 2 - Ekleyin marjin veya dolgu Ayarlanmış .5rem
  • 3 - Ekleyin marjin veya dolgu Ayarlanmış 1rem
  • 4 - Ekleyin marjin veya dolgu Ayarlanmış 1.5rem
  • 5 - Ekleyin marjin veya dolgu Ayarlanmış 3rem
  • auto - Ekleyin marjin Auto olarak ayarlanmış

Örnek

<div class="pt-4 bg-warning">Sadece yukarı iç boşluğum var (1.5rem).</div>
<div class="p-5 bg-success">Tüm kenarlarında (3rem) iç boşluklarım var.</div>
<div class="m-5 pb-5 bg-info">Tüm kenarlarında (3rem) ve aşağı iç boşluklarında (3rem) dış boşluklarım var.</div>

Kendi kendine deneyin

Daha fazla aralık örneği

.m-# / m-*-# Tüm kenarların dış boşlukları Deneyin
.mt-# / mt-*-# Yukarı dış boşluk Deneyin
.mb-# / mb-*-# Aşağı dış boşluk Deneyin
.ms-# / ms-*-# Sol dış boşluk Deneyin
.me-# / me-*-# Sağ dış boşluk Deneyin
.mx-# / mx-*-# Sol ve sağ iç boşluk Deneyin
.my-# / my-*-# Yukarı ve aşağı dış boşluk Deneyin
.p-# / p-*-# Tüm kenarların iç boşlukları (dolgu) Deneyin
.pt-# / pt-*-# Yukarı iç boşluk Deneyin
.pb-# / pb-*-# Aşağı iç boşluk Deneyin
.ps-# / ps-*-# Sol iç boşluk Deneyin
.pe-# / pe-*-# Sağ iç boşluk Deneyin
.py-# / py-*-# Yukarı ve aşağı iç boşluk Deneyin
.px-# / px-*-# Sol ve sağ iç boşluk Deneyin

Sitemizde CSS Birim Referans Kılavuzu rem ve farklı boyut birimleri hakkında daha fazla bilgi için burada okuyun.

gölge

kullanın shadow- Sınıf, öğeye gölge ekler:

Örnek

<div class="shadow-none p-4 mb-4 bg-light">Yok gölge</div>
<div class="gölge-küçük p-4 mb-4 arkaplan-beyaz">Küçük gölge</div>
<div class="gölge p-4 mb-4 arkaplan-beyaz">Standart gölge</div>
<div class="gölge-yüksek p-4 mb-4 arkaplan-beyaz">Büyük gölge</div>

Kendi kendine deneyin

Dikey hizalama

kullanın hizala- Sınıfların elemanın hizalamasını değiştirmesini sağlar (sadece inline, inline-block, inline-table ve tablo hücreleri için geçerlidir)：

Örnek

<span class="hizala-taban">baseline</span>
<span class="hizala-yukarı">top</span>
<span class="hizala-ortada">middle</span>
<span class="hizala-alt">bottom</span>
<span class="hizala-text-yukarı">text-top</span>
<span class="hizala-text-alt">text-bottom</span>

Kendi kendine deneyin

En boy oranı

Ana elemanın genişliğine göre yanıt veren video veya slayt oluşturun.

ekleyin .oran Sınıflar, seçtiğiniz en boy oranı ile .oran-ratio-* Ana elemana ekleyin ve içine gömü (video veya iframe) ekleyin：

Örnek

<!-- Oran 1:1 -->
<div class="oran-ratio oran-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Oran 4:3 -->
<div class="oran-ratio oran-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Oran 16:9 -->
<div class="oran-ratio oran-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Oran 21:9 -->
<div class="oran-ratio oran-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

Kendi kendine deneyin

Görünürlük

Kullanım .görünür veya .görünmez Sınıfların elemanın görünürlüğünü kontrol etmesini sağlar：

Açıklama：Bu sınıflar CSS display değerini değiştirmeyeceklerdir. Sadece eklerler visibility:visible veya visibility:hidden.

Örnek

<div class="visible">Görünürüm.</div>
<div class="invisible">Görünmezim.</div>

Kendi kendine deneyin

Kapanış ikonu

Kullanım .btn-close Sınıflar, kapanış simgesinin tarzını ayarlar. Genellikle uyarı kutuları ve modallar için kullanılır.

Örnek

<button type="button" class="btn-close"></button>

Kendi kendine deneyin

Ekran okuyucuları

Kullanım .visually-hidden Sınıflar, ekran okuyucuları dışında tüm cihazlarda öğeleri gizler:

Örnek

<span class="visually-hidden">Tüm ekranlarda görüntülenmeyecek, sadece ekran okuyucuları için gizlenecek.</span>

Kendi kendine deneyin

Renk

“Renk” bölümünde açıklanan gibi, aşağıda tüm metin ve arka plan renk sınıflarının listesi verilmiştir:

Metin rengi için sınıflar şunlardır:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body（varsayılan body rengi/çoğunlukla siyah）
  • .text-light

Örnek

Kendi kendine deneyin

Metin sınıfları bağlantılar için de kullanılabilir:

Örnek

Kendi kendine deneyin

Ayrıca .text-black-50 veya .text-white-50 sınıflarını kullanarak siyah veya beyaz metin için 50% şeffaflık ekleyebilirsiniz:

Örnek

Kendi kendine deneyin

Arka plan rengi

Arka plan rengi için sınıflar şunlardır:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Lütfen dikkat edin, arka plan rengi metin rengini ayarlamaz, bu yüzden belirli durumlarda onları .text-* Sınıflar birlikte kullanılır.

Örnek

Kendi kendine deneyin