Gerçek boşluk ölçeği, anlamsal renkleri, duyarlı ızgarası ve bileşen API’leriyle Bootstrap 5.3.8’i kullanın. Çalışan bir rezervasyon formunu, hata özetini, tablo filtresini, modalı ve renk modu düğmesini deneyin; ardından belgelenen kodu yeniden kullanın.
Yerel olarak sunulan, yerel Bootstrap 5.3.8 CSS ve JavaScript. Rezervasyon verileri ve uygulama davranışı özgün örneklerdir. · Uygulama başvurusu
02
Bootstrap Tasarım Sistemi tasarım referansı
Bootstrap 5.3.8’in derlenmiş varsayılan CSS değerleri ve 5.3 belgeleri. Değerler varsayılandır; zorunlu marka kuralları değildir. Rem-piksel karşılaştırmaları, kök boyutunun 16px olduğunu varsayar; duyarlı yazı tipi boyutları büyük ekran eşiğinin altında değişebilir. Çevreleyen OpenDesign sayfası kendi tipografisini korur.
Bootstrap Tasarım Sistemi’nde Bootstrap’in CSS ve JavaScript sorumluluklarını seçin
Tek stil sayfası, isteğe bağlı bileşen davranışı
Bootstrap’in derlenmiş stil sayfası ızgarayı, tipografiyi, yardımcı sınıfları ve bileşen görünümünü sağlar. JavaScript paketi Modal, Collapse ve Dropdown gibi etkileşimli eklentileri ekler. Biçimlendirilmiş bir düğme için JavaScript gerekmez; data-bs-toggle kullanan bir modal tetikleyicisi için gerekir. Çalışan önizleme, denetimlerin gerçek sözleşmeleri göstermesi için eşleşen 5.3.8 stil sayfasını ve paketi yerel olarak yükler.
Rezervasyon tablosunu filtreleme, hata özeti ve yerel satır ekleme uygulama kodudur. Bu ayrımı görünür tutmak, kurmaca kayıtları bir hizmetle değiştirmeyi ve rezervasyon davranışını doğrudan Bootstrap’ye atfetmemeyi sağlar.
CSS: düzen, tipografi, düğmeler, alanlar, tablolar ve durum stilleri.
Bootstrap JavaScript: modalın açılması, arka plan perdesi, Escape ve odak davranışı.
Uygulama JavaScript: doğrulama mesajları, kayıtları filtreleme ve yerel veri güncellemeleri.
Hızlı başlangıç için veya standart yardımcı sınıf kümesini kullanabilen bir ürün için derlenmiş CSS’yi kullanın. Derleme sırasında tema haritalarını, yardımcı sınıf üretimini veya ızgarayı değiştirecekseniz Sass kaynağını kullanın. Çalışma zamanı CSS özel özellikleri, bileşen düzeyinde özelleştirme için kullanışlıdır; ancak kök renk değişkenini değiştirmek önceden derlenmiş tüm varyantları yeniden oluşturmaz.
Bootstrap Tasarım Sistemi’nde anlamsal renkleri ve renk modlarını uygulayın
Durum yüzeyini ön plan rengiyle eşleştirin
Rezervasyon rozetlerinde bg-primary-subtle, text-primary-emphasis ile birlikte kullanılır. Bunlar eşleşen anlamsal rollerdir; bu nedenle data-bs-theme değiştiğinde hem ön plan hem de arka plan uyum sağlar. Düz mavi bir arka planla gelişigüzel seçilmiş gri metin kullanmak bu ilişkiyi ortadan kaldırır. Reserved, In use ve Draft etiketleri metin olarak da gösterilir; anlamı yalnızca renge bırakılmaz.
Tek bir özel eylem için yerel --bs-btn-* özelliklerini geçersiz kılın. Bekleme durumunun yanı sıra hover ve active değerlerini de ayarlayın. Aşağıdaki örnek uygulamaya özgü bir varyanttır, Bootstrap varsayılanı değildir. Bu sınıfı hedef düğmeyle sınırlayın; böylece sayfanın ilgisiz bir bölümündeki tüm birincil eylemleri farkında olmadan değiştirmez.
Bootstrap Tasarım Sistemi’nin gerçek tipografi ölçeğini kullanın
Belge anlambilimini görsel boyuttan ayırın
Önizlemenin ana başlığı, h3 sınıfına sahip bir h1 öğesidir: sayfanın ana başlığı olma özelliğini korurken bir araç için uygun, daha küçük görsel ölçeği kullanır. Bölüm başlıkları, h5 biçimlendirmesi uygulanmış h2 öğeleridir. Bootstrap hem öğe varsayılanlarını hem de eşdeğer başlık sınıflarını sunar; bu da belge düzeylerini atlamadan bu ayrımı yapmayı sağlar.
Varsayılan gövde metni 1rem boyutunda ve 1.5 satır yüksekliğindedir. h1’den h4’e kadar başlıklar, referans tablosundaki değerlere ulaşmadan önce duyarlı biçimde ölçeklenir. Bu nedenle tek bir genişlikte alınan ekran görüntüsü, yazı tipi ölçeğinin tamamını tanımlamaz. Tek bir görünüm alanında ölçülen piksel boyutunu kopyalamak yerine derlenmiş stilleri veya belgelenmiş Sass davranışını kullanın.
text-body-secondary, gövde rengini ve modunu izler. Ekipman başlığının altındaki sorumlu kişinin adı gibi destekleyici kayıt bilgileri için uygundur. small sınıfı, metin boyutunu bulunduğu bağlama göre küçültür; bunu her alan etiketinde kullanmak formun taranmasını zorlaştırır. Etiketleri normal form boyutunda tutun; kompakt metni ipuçları ve üstveriler için kullanın.
Bootstrap Tasarım Sistemi’nde boşluk yardımcı sınıfları ve ızgarayla düzen oluşturun
Gelişigüzel boşluklar yerine ölçeği kullanın
p-3, 1rem iç boşluk; p-4, 1.5rem; p-5 ise 3rem anlamına gelir. Etiketler, gerçek piksel sayıları değil, ölçek anahtarlarıdır. Önizleme p-3 p-md-4 kullanarak dış iç boşluğu 768px’de artırır; mb-3 ise alan gruplarını 1rem aralıkla ayırır. Bu, bu örneğe özgü somut bir kuraldır; yeni bir resmî boşluk ölçeği değildir.
Bootstrap Tasarım Sistemi’nde açık ilişkilerle alanlar oluşturun
Etiketleri, ipuçlarını ve geri bildirimleri ilişkilendirin
form-label gerçek bir etiketi biçimlendirir; for değeri input id değeriyle eşleşmelidir. form-control metin türündeki girişleri, form-select ise bir select öğesini biçimlendirir. Önizlemede ipucu ve hata kimlikleri için aria-describedby, gerçek kısıtlama içinse required kullanılır. Sınıf adları bu anlamsal ilişkileri kendiliğinden oluşturmaz.
Gerçek bir geçersiz durumu kullanın ve erişilebilir bir özete yer verin
Gönderim sırasında örnek, her alanı denetler; is-invalid ve aria-invalid değerlerini ayarlar, hatalı alanlara metin bağlantıları oluşturur ve odağı özete taşır. Bir alanı düzeltmek, diğer yanıtları silmeden o alanın durumunu günceller. Bu uygulama katmanı gereklidir: Bootstrap doğrulama belgeleri, yalnızca özel görsel geri bildirimin yardımcı teknolojiye tümüyle aktarılmadığı konusunda uyarır.
Alanı geçersiz olarak işaretlemeden önce gerçek kısıtlama sonucunu inceleyin.
Hata metnini alanla ilişkilendirin ve geçersiz durumu belirtin.
Gönderimden sonra odağı kullanışlı bir özete veya ilk geçersiz alana taşıyın.
Bootstrap Tasarım Sistemi: Kayıtları Anlamı Kaybetmeden Görüntüleme ve Filtreleme
Karşılaştırılabilir veriler için tablo bileşenini kullanın
Tabloda sütun başlıkları, satır başlıkları ve bir açıklama bulunur. table-hover, üzerine gelindiğinde bir görünüm uygular ancak satırları düğmeye dönüştürmez. Filtreleme, eşleşen satırların görünürlük durumunu değiştirir ve aria-live sonuç sayısını günceller. Görüntülenen durum, bir badge içindeki metin olarak kalır; böylece renk modu değiştiğinde de anlam korunur.
Geniş bir tablo sığmadığında table-responsive yatay kaydırma sağlar. Taşan alandan çıkması gereken bir açılır menüyü, bu davranışı denetlemeden bu kapsayıcının içine yerleştirmeyin. Örnekte filtre tablonun üzerinde tutulur. Mobilde yalnızca veri alanı yatay kaydırılabilir; sayfanın kendisi görünüm alanı içinde kalmalıdır.
Bootstrap Tasarım Sistemi: Seçimi API Modal ile Gözden Geçirin
Yalnızca form geçerliyse açın
Etkileşimli örnek, Bootstrap Modal örneğini oluşturur veya yeniden kullanır ve yalnızca doğrulama başarılı olduğunda show metodunu çağırır. Böylece dikkat gerektiren hataların üstü inceleme katmanıyla örtülmez. Modal metni güncel değerlerle doldurulur; Ayrıntıları düzenle seçeneği modalı kapatırken formu korur.
JavaScript
const element = document.getElementById("review-modal");
const modal = bootstrap.Modal.getOrCreateInstance(element);
// Run after validation and after populating the review text.
modal.show();
element.addEventListener("hidden.bs.modal", () => {
document.querySelector("#reservation button[type=submit]").focus();
});
Modalı bir bileşen yaşam döngüsünün parçası olarak ele alın
Bootstrap, backdrop ve geçiş davranışını yönetir. Görüntüleme durumunu elle değiştirmek yerine modalın metotlarını ve olaylarını kullanın; aksi hâlde odak veya backdrop tutarsız kalabilir. Bu gösterimde onaylama, yerel bir tablo satırı ekler ve modalı kapatır; rezervasyon hizmeti çağırmaz. Başarı mesajı, gerçekleşen yerel işlemi açıkça belirtir.
Bootstrap Tasarım Sistemi: Bu Bootstrap Örneğini Entegre Edin ve Genişletin
Birbiriyle eşleşen tek bir CSS ve JavaScript sürümünü yükleyin
Gömülü örnek, yerel olarak depolanan Bootstrap 5.3.8 CSS ve bundle dosyalarını yükler. Veri öznitelikleri ve Modal API aynı sürüme aittir. Vite uygulamasında, kurulum bölümünde gösterildiği gibi derlenmiş CSS dosyasını ve gereken eklentiyi içe aktarın. Bundle'ı yükleyip aynı eklentinin ikinci bir kopyasını başka bir sarmalayıcı üzerinden başlatmaktan kaçının.
Stil sayfası, modal çalışma zamanı, doğrulama, filtreler ve yerel onay içeren eksiksiz bir Bootstrap 5.3.8 sayfası. Bu dosyayı index.html adıyla kaydedin ve aşağıdaki komutu kullanarak klasörü sunun. Sürümü sabitlenmiş CDN bağımlılıkları ağ bağlantısı gerektirir.
html
<!doctype html><html lang="en" data-bs-theme="light"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bootstrap equipment reservations — OpenDesign example</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"><style>body{margin:0}main{max-width:1120px;margin:auto}.demo-stat{font-variant-numeric:tabular-nums}.table td,.table th{vertical-align:middle}.table caption{font-size:.875rem}.demo-status:empty{display:none}@media(max-width:575px){.table th,.table td{font-size:.8125rem;padding:.65rem .4rem}.demo-mobile-hide{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}</style></head><body>
<header class="border-bottom bg-body-tertiary px-3 px-md-4 py-3 d-flex align-items-center justify-content-between gap-3"><div><strong>Studio inventory</strong><span class="badge text-bg-primary ms-2">Bootstrap 5.3.8</span></div><button id="theme" type="button" class="btn btn-outline-secondary btn-sm" aria-pressed="false">Dark mode</button></header>
<main class="p-3 p-md-4"><div class="d-flex align-items-start justify-content-between gap-3 mb-4"><div><p class="text-body-secondary small mb-1">EQUIPMENT / RESERVATIONS</p><h1 class="h3 mb-2">Keep the next shoot ready.</h1><p class="text-body-secondary mb-0">Check equipment, create a local reservation and review its details.</p></div><span class="badge rounded-pill text-primary-emphasis bg-primary-subtle border border-primary-subtle demo-mobile-hide">Interactive example</span></div>
<div class="row g-3 mb-4"><div class="col-4"><div class="border rounded p-3"><div class="text-body-secondary small">Equipment</div><strong class="fs-3 demo-stat">12</strong></div></div><div class="col-4"><div class="border rounded p-3"><div class="text-body-secondary small">Reservations</div><strong id="count" class="fs-3 demo-stat">3</strong></div></div><div class="col-4"><div class="border rounded p-3"><div class="text-body-secondary small">Available</div><strong class="fs-3 demo-stat">8</strong></div></div></div>
<div class="row g-4"><section class="col-lg-7" aria-labelledby="list-title"><div class="d-flex align-items-center justify-content-between gap-3 mb-3"><h2 id="list-title" class="h5 m-0">Reservation list</h2><div><label for="filter" class="visually-hidden">Filter reservations by status</label><select class="form-select form-select-sm" id="filter"><option value="all">All statuses</option><option value="Reserved">Reserved</option><option value="In use">In use</option><option value="Draft">Draft</option></select></div></div><div class="table-responsive border rounded"><table class="table table-hover mb-0"><caption class="px-3">Fictional records. New entries stay in this browser tab.</caption><thead class="table-light"><tr><th scope="col">Equipment</th><th scope="col">Date</th><th scope="col">Status</th></tr></thead><tbody id="rows"><tr data-status="Reserved"><th scope="row" class="fw-medium">Camera kit A<div class="small fw-normal text-body-secondary">Mia Chen</div></th><td>10 Oct</td><td><span class="badge text-primary-emphasis bg-primary-subtle">Reserved</span></td></tr><tr data-status="In use"><th scope="row" class="fw-medium">Lighting studio<div class="small fw-normal text-body-secondary">Alex Kim</div></th><td>10 Oct</td><td><span class="badge text-success-emphasis bg-success-subtle">In use</span></td></tr><tr data-status="Draft"><th scope="row" class="fw-medium">Audio recorder<div class="small fw-normal text-body-secondary">Jules Davis</div></th><td>11 Oct</td><td><span class="badge text-secondary-emphasis bg-secondary-subtle">Draft</span></td></tr></tbody></table></div><p id="empty" class="alert alert-info mt-3" hidden>No reservations match this status.</p><p id="results" class="small text-body-secondary mt-2" aria-live="polite">3 reservations shown</p><div class="alert alert-primary mt-4 mb-0"><strong>Try the system</strong><p class="small mb-0 mt-1">Switch color mode, filter the table, submit an empty form, then review a complete reservation in a Bootstrap modal.</p></div></section>
<section class="col-lg-5" aria-labelledby="form-title"><div class="card"><div class="card-body p-3 p-md-4"><h2 id="form-title" class="h5 mb-3">New reservation</h2><form id="reservation" novalidate><div id="error-summary" class="alert alert-danger" tabindex="-1" role="alert" hidden><strong>Check the reservation details.</strong><ul class="mb-0 mt-2" id="error-links"></ul></div><div class="mb-3"><label class="form-label" for="equipment">Equipment</label><select class="form-select" id="equipment" aria-describedby="equipment-error" required><option value="">Choose equipment</option><option>Camera kit A</option><option>Lighting studio</option><option>Audio recorder</option></select><div id="equipment-error" class="invalid-feedback">Choose equipment for this reservation.</div></div><div class="mb-3"><label class="form-label" for="owner">Reserved by</label><input class="form-control" id="owner" autocomplete="name" aria-describedby="owner-hint owner-error" required><div class="form-text" id="owner-hint">Use a fictional name for this example.</div><div class="invalid-feedback" id="owner-error">Enter the name of the person reserving equipment.</div></div><div class="mb-3"><label class="form-label" for="date">Reservation date</label><input class="form-control" id="date" type="date" aria-describedby="date-error" required><div class="invalid-feedback" id="date-error">Choose a reservation date.</div></div><button type="submit" class="btn btn-primary w-100">Review reservation</button></form><p class="small text-body-secondary mt-3 mb-0">This example validates input locally. It does not reserve real equipment.</p></div></div></section></div><div id="notice" class="alert alert-success mt-4 demo-status" role="status" hidden></div></main>
<div class="modal fade" id="review-modal" tabindex="-1" aria-labelledby="review-title" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h2 class="modal-title fs-5" id="review-title">Review reservation</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close review"></button></div><div class="modal-body"><dl class="row mb-0"><dt class="col-4">Equipment</dt><dd class="col-8" id="review-equipment"></dd><dt class="col-4">Reserved by</dt><dd class="col-8" id="review-owner"></dd><dt class="col-4">Date</dt><dd class="col-8" id="review-date"></dd></dl><p class="small text-body-secondary mt-3 mb-0">Confirming adds a row to this local example only.</p></div><div class="modal-footer"><button class="btn btn-outline-secondary" data-bs-dismiss="modal" type="button">Edit details</button><button class="btn btn-primary" id="confirm" type="button">Add to example</button></div></div></div></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><script>
const $=id=>document.getElementById(id);const fields=['equipment','owner','date'];const review=bootstrap.Modal.getOrCreateInstance($('review-modal'));
$('theme').onclick=()=>{const dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';$('theme').setAttribute('aria-pressed',String(dark));$('theme').textContent=dark?'Light mode':'Dark mode'};
function filter(){let count=0;for(const row of $('rows').rows){row.hidden=$('filter').value!=='all'&&row.dataset.status!==$('filter').value;if(!row.hidden)count++}$('empty').hidden=count>0;$('results').textContent=count+' reservations shown'}$('filter').onchange=filter;
function validateField(id){const el=$(id),invalid=!el.checkValidity();el.classList.toggle('is-invalid',invalid);el.setAttribute('aria-invalid',String(invalid));return !invalid}
$('reservation').onsubmit=e=>{e.preventDefault();const invalid=fields.filter(id=>!validateField(id));$('error-links').replaceChildren();$('error-summary').hidden=invalid.length===0;if(invalid.length){for(const id of invalid){const li=document.createElement('li'),a=document.createElement('a');a.href='#'+id;a.className='alert-link';a.textContent=$(id+'-error').textContent;a.onclick=e=>{e.preventDefault();$(id).focus()};li.append(a);$('error-links').append(li)}$('error-summary').focus();return}for(const id of fields)$('review-'+id).textContent=$(id).value;review.show()};
for(const id of fields)$(id).addEventListener('input',()=>{if($(id).getAttribute('aria-invalid')==='true')validateField(id)});
$('review-modal').addEventListener('hidden.bs.modal',()=>$('reservation').querySelector('button').focus());
$('confirm').onclick=()=>{const row=document.createElement('tr');row.dataset.status='Reserved';const name=document.createElement('th');name.scope='row';name.className='fw-medium';name.textContent=$('equipment').value;const owner=document.createElement('div');owner.className='small fw-normal text-body-secondary';owner.textContent=$('owner').value;name.append(owner);const date=document.createElement('td');date.textContent=$('date').value;const state=document.createElement('td'),badge=document.createElement('span');badge.className='badge text-primary-emphasis bg-primary-subtle';badge.textContent='Reserved';state.append(badge);row.append(name,date,state);$('rows').prepend(row);$('count').textContent=$('rows').rows.length;$('filter').value='all';filter();review.hide();$('notice').hidden=false;$('notice').textContent='Reservation added to this local example. No data was sent.';$('reservation').reset();for(const id of fields){$(id).classList.remove('is-invalid');$(id).removeAttribute('aria-invalid')}};
</script></body></html>
Form verileri herhangi bir hizmete gönderilmez. Onaylanan rezervasyonlar yalnızca bu sayfa oturumu boyunca tutulur.
Yerel önizlemede aynı sürümü sabitlenmiş CSS ve JavaScript dosyaları bulunur; bu kopya, herkese açık CDN URL'lerini kullanır.
Alan etiketi, ipucu ve açık hata durumu
Kendi içinde tamamlanan bu alan bileşimi, Bootstrap stillerini ve gerçek bir doğrulama sonucunu kullanır. Sayfa örneği, üç alanı için odaklanılabilir bağlantılar içeren bir hata özeti ekler. Tek başına kırmızı kenarlık, düzeltme gereğini bildirmez.
.is-invalid, .was-validated olmadan açıkça ayarlanabilir.
aria-describedby, ipucu ve hata metnini birbirine bağlar; aria-invalid mevcut durumu belirtir.
Belgeler, yalnızca özel görsel doğrulamanın yardımcı teknolojiye yeterli bilgi aktarmadığı konusunda uyarır.
Açık bir etikete sahip yerel bir inceleme modalı
Modal, Bootstrap'ın gerçek eklentisini, backdrop'unu, Escape tuşu işlemesini ve odak yönetimini kullanır. Başlığı modal-header içine, inceleme içeriğini modal-body içine, devam etme işlemlerini ise modal-footer içine yerleştirin.
Eşleşen Bootstrap JavaScript bundle'ını bir kez yükleyin.
data API, statik bir örneği açar; çalışan rezervasyon formu, geçerli girişten sonra Modal.getOrCreateInstance metodunu kullanır.
Açılış geçişi tamamlanana kadar beklemesi gereken davranışlar için shown.bs.modal kullanın.
Duyarlı liste ve form düzeni
Envanter listesi, lg kesme noktasında yedi; form ise beş sütun kaplar. lg altında iki bölüm de alt alta yerleşir. g-4, bileşime 1.5rem'lik bir oluk kazandırır. Sütunlar genişliği, anlamsal bölümler ve başlıklar ise içeriği tanımlar.
İçerik gerçekten daha erken bir kesme noktasında sığıyorsa aynı grid col-md-* kullanabilir.
CSS değişkenleri içeren medya sorguları yerine yukarıdaki kesme noktası tablosunu kullanın; var() bir medya sorgusu eşiği sağlayamaz.
04
Bootstrap Tasarım Sistemi AI Agent Kurulumu
Uygulamaya Başlangıç Noktası
Bu eksiksiz HTML örneği için derleme adımı gerekmez. Dosyada gösterilen, sürümü sabitlenmiş CDN URL'lerinden Bootstrap 5.3.8 içe aktarılır. Aşağıdaki kısa örnekler, çalışan bu sayfadaki kalıpları ayrı ayrı gösterir.
sh
# Save the complete index.html from Component Examples in a new folder.
# Serve that folder with Python 3:
python3 -m http.server 8000
# Open http://localhost:8000/ in a browser.
Projeniz İçin Bir İstem
Ajan İstemi
Bu kılavuzu ve Bootstrap 5.3.8'i kullanarak bir ekipman rezervasyon arayüzü oluşturun. col-lg-7 ve col-lg-5 içeren bir satır g-4; p-3 p-md-4 boşlukları; temaya duyarlı body ve subtle/emphasis renk rolleri; anlamsal bir tablo ve etiketli form denetimleri kullanın. Yerel Bootstrap Modal'ı açmadan önce açık hata mesajları ve bir hata özetiyle doğrulama yapın. Düzenleme sırasında girişleri koruyun; gerçek bir API sağlanmadıkça kayıtları yalnızca yerel demo durumuna ekleyin. data-bs-theme light/dark ve klavyeyle kapatmayı destekleyin. Verilen ölçeği keyfî değerlerle değiştirmeyin.
05
Bootstrap Tasarım Sistemi Kaynakları ve Kapsamı
OpenDesign'ın Bootstrap 5.3.8 uygulama kılavuzu ve çalıştırılabilir yerel bileşen örneği. Başvuru değerleri, bağlantısı verilen Bootstrap belgelerinden ve sürümü sabitlenmiş derlenmiş CSS dosyasından alınmıştır. Rezervasyon kayıtları, düzen bileşimi ve doğrulama özeti özgün uygulama kodudur; gerçek rezervasyon gönderilmez.
