Bootstrap Kopya Kağıdı
Aranabilir, yazdırılabilir Bootstrap 5.3 başvurusu — ızgara, boşluk, tipografi, renkler, flex yardımcıları, düğmeler, formlar ve bileşenler. Ücretsiz.
Izgara ve düzen
12<div class="container">
Sabit genişlikli duyarlı konteyner
<div class="container-fluid">
Her kırılma noktasında tam genişlik konteyner
<div class="container-md">
md kırılma noktasına kadar %100 genişlik
<div class="row">
Izgara satırı, sütun tutar
<div class="col">
Eşit genişlikli otomatik sütun
<div class="col-6">
12 sütunun 6'sını kaplar
<div class="col-md-4">
md kırılma noktasından itibaren 4 sütun
<div class="col-auto">
İçeriğine göre boyutlanan sütun
<div class="offset-md-2">
Sütunu 2 sütun sağa it
<div class="row g-3">
Sütunlar arası oluk boşluğu
<div class="row row-cols-3">
Satır başına 3 eşit sütun zorla
<div class="order-2">
Bir flex/grid sütununu yeniden sırala
Boşluk yardımcıları
12m-3
Tüm kenarlarda margin (ölçek 0-5)
mt-2
Üst margin
mx-auto
Ortalamak için otomatik yatay margin
p-4
Tüm kenarlarda padding
py-2
Dikey padding (üst ve alt)
ms-3
Başlangıç margin'i (LTR'de sol, RTL duyarlı)
me-3
Bitiş margin'i (LTR'de sağ, RTL duyarlı)
ps-2
Başlangıç padding'i, RTL duyarlı
pe-2
Bitiş padding'i, RTL duyarlı
gap-3
Flex/grid öğeleri arası boşluk
m-n1
Negatif margin
p-md-5
md'den itibaren duyarlı padding
Tipografi
14<h1>..<h6>
Varsayılan stilli başlık seviyeleri
<p class="display-1">
Büyük display başlık (display-1..6)
<p class="lead">
Öne çıkan giriş paragrafı
fw-bold
Kalın yazı ağırlığı
fw-semibold
Yarı kalın yazı ağırlığı
fst-italic
İtalik yazı stili
text-center
Metni ortala
text-start
Metni başa hizala, RTL duyarlı
text-end
Metni sona hizala, RTL duyarlı
text-truncate
Taşmayı üç noktayla kısalt
text-uppercase
Metni büyük harfe dönüştür
fs-1
Duyarlı yazı boyutu (fs-1..6)
lh-base
Temel satır yüksekliği (lh-1, lh-sm, lh-lg)
font-monospace
Eş aralıklı yazı tipi ailesi
Renkler ve arka plan
10text-primary
Birincil metin rengi
bg-primary
Birincil arka plan rengi
bg-primary-subtle
Hafif birincil arka plan tonu
text-primary-emphasis
Vurgulu birincil metin, tema duyarlı
text-bg-primary
Otomatik kontrast metinli birincil arka plan
link-primary
Renkli bağlantı yardımcısı
bg-opacity-50
%50 arka plan saydamlığı uygula
text-body-secondary
Soluk ikincil gövde metni
text-body-emphasis
Yüksek vurgulu gövde metni
border-primary-subtle
Hafif birincil kenarlık rengi
Flex yardımcıları
10d-flex
Bir flex kapsayıcı oluştur
flex-row
Öğeleri bir satıra diz
flex-column
Öğeleri bir sütuna diz
justify-content-between
Öğeleri ana eksen boyunca yay
align-items-center
Öğeleri çapraz eksende ortala
flex-wrap
Öğelerin kaymasına izin ver
flex-grow-1
Bir öğenin boşluğu doldurmak için büyümesine izin ver
flex-fill
Eşit esnek genişlikleri zorla
align-self-end
Tek bir öğeyi sona hizala
flex-md-row
md'den itibaren duyarlı flex yönü
Görüntü ve konum
12d-none
Öğeyi gizle
d-md-block
md kırılma noktasından itibaren blok olarak göster
position-relative
Göreceli konumlandırma
position-absolute
Mutlak konumlandırma
position-fixed
Sabit konumlandırma
position-sticky
Yapışkan konumlandırma
top-0 start-0
Sol üste sabitle, RTL duyarlı
translate-middle
transform translate ile ortala
fixed-top
Öğeyi görünüm alanının üstüne sabitle
sticky-top
Kaydırmada üste yapış
z-3
z-index ayarla (z-0..3)
invisible
Gizle ama düzen alanını koru
Boyutlandırma ve kenarlıklar
12w-100
Ebeveynin %100 genişliği
w-50
Ebeveynin %50 genişliği
h-100
Ebeveynin %100 yüksekliği
mw-100
Maksimum genişlik %100
vh-100
Görünüm alanının %100 yüksekliği
border
Tüm kenarlara varsayılan kenarlık ekle
border-0
Tüm kenarlıkları kaldır
border-primary
Kenarlığı renklendir
rounded
Varsayılan border-radius
rounded-pill
Tamamen yuvarlatılmış hap şekli
rounded-circle
Dairesel border-radius
shadow-sm
Küçük kutu gölgesi (shadow, shadow-lg)
Düğmeler
9<button class="btn btn-primary">
Dolu birincil düğme
<button class="btn btn-outline-primary">
Anahat düğme varyantı
<button class="btn btn-lg">
Büyük düğme (ayrıca btn-sm)
<button class="btn btn-link">
Bağlantı gibi stillenmiş düğme
<button class="btn-close">
Genel kapat (×) düğmesi
<button class="btn disabled">
Devre dışı düğme durumu
<button class="btn active">
Etkin düğme durumu
<div class="d-grid"><button class="btn">
d-grid ile tam genişlik blok düğme
<div class="btn-group">
Düğmeleri birlikte grupla
Formlar
11<input class="form-control">
Stillenmiş metin girişi
<label class="form-label">
Form alanı etiketi
<select class="form-select">
Stillenmiş seçim açılır menüsü
<div class="form-check">
Onay/radyo sarmalayıcı
<input class="form-check-input">
Stillenmiş onay veya radyo girişi
<div class="form-check form-switch">
Anahtar (toggle) bileşeni
<input class="form-control-lg">
Büyük giriş (ayrıca form-control-sm)
<div class="input-group">
Girişleri eklentilerle grupla
is-invalid
Geçersiz doğrulama durumu (is-valid)
<div class="form-floating">
Yüzen etiketli giriş
col-form-label
Yatay formlar için hizalanmış etiket
Bileşenler
14<div class="card">
Esnek içerik kartı
<nav class="navbar navbar-expand-lg">
Duyarlı gezinme çubuğu
data-bs-toggle="modal" data-bs-target="#m"
Bir modal iletişimi tetikle
data-bs-toggle="dropdown"
Bir açılır menüyü aç/kapat
data-bs-toggle="collapse"
Daraltılabilir bir öğeyi aç/kapat
<div class="accordion">
Yığılmış daraltılabilir paneller
<div class="alert alert-dismissible">
Kapatılabilir uyarı mesajı
<span class="badge text-bg-primary">
Küçük sayı veya etiket rozeti
<ul class="list-group">
Stillenmiş öğe listesi
<ul class="nav nav-tabs">
Sekmeli gezinme
<div class="toast">
Hafif toast bildirimi
<div class="offcanvas">
Kayan (off-canvas) kenar paneli
<div class="spinner-border">
Yüklenme dönen göstergesi
<nav><ul class="pagination">
Sayfalı gezinme bağlantıları
Yardımcılar ve çeşitli
11data-bs-theme="dark"
Bir kapsamda koyu renk modunu etkinleştir
<div class="ratio ratio-16x9">
Duyarlı en-boy oranı kutusu
visually-hidden
Görsel olarak gizle, ekran okuyucular için koru
visually-hidden-focusable
Odaklanana kadar gizli (atlama bağlantıları)
stretched-link
Bir ebeveyni tamamen tıklanabilir yap
clearfix
Float'lı alt öğeleri temizle
<div class="vstack gap-2">
Öğelerin dikey yığını
<div class="hstack gap-2">
Öğelerin yatay yığını
<a class="icon-link">
Satır içi simgeyle hizalanmış bağlantı
<div class="progress">
İlerleme çubuğu konteyneri
<nav class="breadcrumb">
İçerik haritası gezinme izi
“:q” ile eşleşen bir girdi yok.
Yardıma mı ihtiyacınız var?
Bu araçta bir sorun mu buldunuz? Ekibimize bildirin.