Bileşenler
İkonografi, açılır menüler, giriş grupları, navigasyon, uyarılar ve çok daha fazlasını sağlamak için oluşturulmuş bir düzineden fazla yeniden kullanılabilir bileşen.
İkonografi, açılır menüler, giriş grupları, navigasyon, uyarılar ve çok daha fazlasını sağlamak için oluşturulmuş bir düzineden fazla yeniden kullanılabilir bileşen.
Glyphicon Halflings setinden yazı tipi formatında 250'den fazla glif içerir. Glyphicons Halflings normalde ücretsiz olarak mevcut değildir, ancak yaratıcıları onları Bootstrap için ücretsiz olarak kullanıma sunmuştur. Teşekkür olarak, mümkün olduğunda yalnızca Glyphicons'a bir bağlantı eklemenizi rica ediyoruz .
Performans nedenleriyle, tüm simgeler bir temel sınıf ve ayrı bir simge sınıfı gerektirir. Kullanmak için aşağıdaki kodu hemen hemen her yere yerleştirin. Uygun dolgu için simge ve metin arasında boşluk bıraktığınızdan emin olun.
Simge sınıfları, diğer bileşenlerle doğrudan birleştirilemez. Aynı element üzerinde diğer sınıflarla birlikte kullanılmamalıdırlar. Bunun yerine, yuvalanmış bir öğe ekleyin <span>
ve simge sınıflarını <span>
.
Simge sınıfları yalnızca metin içeriği ve alt öğesi olmayan öğelerde kullanılmalıdır.
../fonts/
Bootstrap, simge yazı tipi dosyalarının derlenmiş CSS dosyalarına göre dizinde bulunacağını varsayar . Bu yazı tipi dosyalarını taşımak veya yeniden adlandırmak, CSS'yi üç yoldan biriyle güncellemek anlamına gelir:
@icon-font-path
ve/veya değişkenleri değiştirin .@icon-font-name
url()
Derlenmiş CSS'deki yolları değiştirin .Özel geliştirme kurulumunuza en uygun seçeneği kullanın.
Yardımcı teknolojilerin modern sürümleri, CSS tarafından oluşturulan içeriğin yanı sıra belirli Unicode karakterlerini de duyurur. Ekran okuyucularda istenmeyen ve kafa karıştırıcı çıktılardan kaçınmak için (özellikle simgeler yalnızca dekorasyon için kullanıldığında), bunları aria-hidden="true"
öznitelikle gizleriz.
Anlamı iletmek için bir simge kullanıyorsanız (yalnızca dekoratif bir öğe olarak değil), bu anlamın yardımcı teknolojilere de aktarıldığından emin olun - örneğin, görsel olarak .sr-only
sınıfa gizlenmiş ek içerik ekleyin.
Başka bir metin <button>
içermeyen kontroller oluşturuyorsanız (yalnızca bir simge içerenler gibi), yardımcı teknolojilerin kullanıcılarına mantıklı gelmesi için kontrolün amacını belirlemek için her zaman alternatif içerik sağlamalısınız. aria-label
Bu durumda, kontrolün kendisine bir öznitelik ekleyebilirsiniz .
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Bunları düğmelerde, bir araç çubuğu için düğme gruplarında, gezinmede veya başa eklenen form girişlerinde kullanın.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Bir uyarıda , bunun bir hata mesajı olduğunu iletmek için kullanılan ve .sr-only
bu ipucunu yardımcı teknolojilerin kullanıcılarına iletmek için ek metin içeren bir simge.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
Bağlantı listelerini görüntülemek için değiştirilebilir, bağlamsal menü. Açılır JavaScript eklentisi ile etkileşimli hale getirildi .
Açılır menünün tetikleyicisini ve açılır menüyü içine .dropdown
veya bildiren başka bir öğeye sarın position: relative;
. Ardından menünün HTML'sini ekleyin.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Açılır menüler, üst öğeye ekleyerek (aşağı yerine) yukarı doğru genişleyecek şekilde değiştirilebilir .dropup
.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Varsayılan olarak, bir açılır menü otomatik olarak üst öğesinin üst kısmından ve sol tarafında %100 olarak konumlandırılır. .dropdown-menu-right
a'ya ekle .dropdown-menu
açılır menüyü sağa hizalayın.
Açılır menüler, belgenin normal akışı içinde CSS aracılığıyla otomatik olarak konumlandırılır. Bu, açılır listelerin belirli özelliklere sahip ebeveynler tarafından kırpılabileceği overflow
veya görünüm alanının dışında görünebileceği anlamına gelir. Bu sorunları ortaya çıktıkça kendi başınıza ele alın.
.pull-right
hizalamav3.1.0'dan .pull-right
itibaren açılır menüleri kullanımdan kaldırdık. Bir menüyü sağa hizalamak için öğesini kullanın .dropdown-menu-right
. Gezinme çubuğundaki sağa hizalanmış gezinme bileşenleri, menüyü otomatik olarak hizalamak için bu sınıfın bir karma sürümünü kullanır. Geçersiz kılmak için, kullanın .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Herhangi bir açılır menüde eylemlerin bölümlerini etiketlemek için bir başlık ekleyin.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Bir açılır menüde bağlantı dizilerini ayırmak için bir ayırıcı ekleyin.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
.disabled
Bağlantıyı devre dışı bırakmak için <li>
açılır listeye ekleyin .
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
Düğme grubuyla bir dizi düğmeyi tek bir satırda gruplayın. Düğme eklentimizle isteğe bağlı JavaScript radyo ve onay kutusu stili davranışı ekleyin .
içindeki öğelerde araç ipuçlarını veya açılır pencereleri kullanırken, istenmeyen yan etkilerden (araç ipucu veya açılır pencere tetiklendiğinde öğenin genişlemesi ve/veya yuvarlatılmış köşelerinin kaybolması gibi) kaçınma .btn-group
seçeneğini belirtmeniz gerekir .container: 'body'
role
ve bir etiket sağlayınEkran okuyucular gibi yardımcı teknolojilerin bir dizi düğmenin gruplandığını iletebilmesi için uygun bir role
özniteliğin sağlanması gerekir. Düğme grupları için bu role="group"
, araç çubuklarında bir role="toolbar"
.
Bir istisna, yalnızca tek bir denetim (örneğin, öğeler içeren iki yana yaslanmış düğme grupları<button>
) veya bir açılır liste içeren gruplardır.
Ek olarak, gruplara ve araç çubuklarına açık bir etiket verilmelidir, çünkü çoğu yardımcı teknoloji, doğru role
özniteliğin varlığına rağmen bunları duyurmaz. Burada verilen örneklerde kullanıyoruz aria-label
ama gibi alternatifler aria-labelledby
de kullanılabilir.
Bir dizi düğmeyi .btn
in ile sarın .btn-group
.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Daha karmaşık bileşenler için kümeleri <div class="btn-group">
bir araya getirin.<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
Bir gruptaki her düğmeye düğme boyutlandırma sınıfları uygulamak yerine, birden çok grubu iç içe yerleştirirken de dahil olmak üzere yalnızca .btn-group-*
her birine ekleyin..btn-group
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
Bir dizi düğmeyle karışık açılır menüler istediğinizde, a'yı .btn-group
diğerinin içine yerleştirin ..btn-group
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
Bir dizi düğmenin yatay yerine dikey olarak yığılmış görünmesini sağlayın. Bölme düğmesi açılır menüleri burada desteklenmez.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Bir grup düğmeyi, üst öğesinin tüm genişliğini kapsayacak şekilde eşit boyutlarda gerdirin. Ayrıca düğme grubu içindeki düğme açılır listeleriyle de çalışır.
Düğmeleri yaslamak için kullanılan belirli HTML ve CSS nedeniyle (yani display: table-cell
), aralarındaki kenarlıklar iki katına çıkar. Normal düğme gruplarında, margin-left: -1px
kenarlıkları kaldırmak yerine yığmak için kullanılır. Ancak, margin
ile çalışmıyor display: table-cell
. Sonuç olarak, Bootstrap özelleştirmelerinize bağlı olarak, kenarlıkları kaldırmak veya yeniden renklendirmek isteyebilirsiniz.
<a>
Internet Explorer 8, açık veya <button>
öğeler olsun, iki yana yaslanmış bir düğme grubundaki düğmelerde kenarlıklar oluşturmaz . Bunu aşmak için, her düğmeyi başka bir düğmeye sarın .btn-group
.
Daha fazla bilgi için #12476'ya bakın.
<a>
Elemanlarla _Bir dizi .btn
s sarmanız yeterlidir .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Öğeler, geçerli sayfadaki başka bir belgeye veya bölüme gitmek yerine sayfa içi işlevselliği tetikleyen düğmeler olarak kullanılıyorsa , <a>
bunlara ayrıca uygun bir role="button"
.
<button>
Elemanlarla _<button>
Öğelerle hizalanmış düğme gruplarını kullanmak için her düğmeyi bir düğme grubuna sarmanız gerekir . Çoğu tarayıcı, öğelerin gerekçelendirilmesi için CSS'imizi düzgün şekilde uygulamaz <button>
, ancak düğme açılır listelerini desteklediğimiz için bu sorunu çözebiliriz.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
Bir açılır menüyü a içine yerleştirerek .btn-group
ve uygun menü işaretlemesini sağlayarak tetiklemek için herhangi bir düğmeyi kullanın.
Düğme açılır listeleri, açılır liste eklentisinin Bootstrap sürümünüze dahil edilmesini gerektirir.
Bazı temel biçimlendirme değişiklikleriyle bir düğmeyi açılır bir geçişe dönüştürün.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Benzer şekilde, yalnızca ayrı bir düğmeyle, aynı biçimlendirme değişiklikleriyle bölünmüş düğme açılır listeleri oluşturun.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Düğme açılır menüleri, her boyuttaki düğmelerle çalışır.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
.dropup
Üst öğeye ekleyerek öğelerin üzerindeki açılır menüleri tetikleyin .
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Metin tabanlı herhangi bir metnin önüne, arkasına veya her iki tarafına metin veya düğmeler ekleyerek form denetimlerini genişletin <input>
. Öğeleri tek bir öğenin başına veya sonuna eklemek için veya .input-group
ile kullanın ..input-group-addon
.input-group-btn
.form-control
<input>
s<select>
WebKit tarayıcılarında tam olarak biçimlendirilemeyecekleri için burada öğeleri kullanmaktan kaçının .
Bazı durumlarda özniteliklerine saygı gösterilmeyeceği için <textarea>
öğeleri burada kullanmaktan kaçının .rows
Bir içindeki öğelerde araç ipuçlarını veya açılır pencereleri kullanırken, istenmeyen yan etkilerden (araç ipucu veya açılır pencere tetiklendiğinde öğenin genişlemesi ve/veya yuvarlatılmış köşelerinin kaybolması gibi) kaçınma .input-group
seçeneğini belirtmeniz gerekir .container: 'body'
Form gruplarını veya ızgara sütun sınıflarını doğrudan giriş gruplarıyla karıştırmayın. Bunun yerine, giriş grubunu form grubunun veya ızgarayla ilgili öğenin içine yerleştirin.
Her giriş için bir etiket eklemezseniz, ekran okuyucular formlarınızda sorun yaşar. Bu girdi grupları için, herhangi bir ek etiket veya işlevin yardımcı teknolojilere iletildiğinden emin olun.
Kullanılacak tam teknik (görünür <label>
öğeler, sınıf <label>
kullanılarak gizlenen öğeler veya , , veya özniteliğin kullanımı) ve hangi ek bilgilerin iletilmesi gerekeceği, uyguladığınız arabirim widget'ının tam türüne bağlı olarak değişecektir . Bu bölümdeki örnekler, önerilen birkaç vakaya özel yaklaşım sağlar..sr-only
aria-label
aria-labelledby
aria-describedby
title
placeholder
Bir girişin her iki tarafına bir eklenti veya düğme yerleştirin. Bir girişin her iki tarafına da bir tane yerleştirebilirsiniz.
Tek bir tarafta birden fazla eklentiyi ( .input-group-addon
veya ) desteklemiyoruz..input-group-btn
Tek bir giriş grubunda birden çok form denetimini desteklemiyoruz.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
Göreceli form boyutlandırma sınıflarını .input-group
kendisine ekleyin ve içindeki içerik otomatik olarak yeniden boyutlandırılacaktır; her öğede form kontrol boyutu sınıflarını tekrarlamaya gerek yoktur.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
Metin yerine bir giriş grubunun eklentisine herhangi bir onay kutusu veya radyo seçeneği yerleştirin.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Giriş gruplarındaki düğmeler biraz farklıdır ve fazladan bir iç içe yerleştirme düzeyi gerektirir. Bunun yerine , düğmeleri sarmak .input-group-addon
için kullanmanız gerekir . .input-group-btn
Bu, geçersiz kılınamayan varsayılan tarayıcı stilleri nedeniyle gereklidir.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
Her tarafta yalnızca bir eklentiniz olabilirken, tek bir .input-group-btn
.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
Bootstrap'ta bulunan gezinmeler, temel .nav
sınıftan başlayarak paylaşılan işaretlemelerin yanı sıra paylaşılan durumlara sahiptir. Her stil arasında geçiş yapmak için değiştirici sınıfları değiştirin.
Sınıfın temel .nav-tabs
sınıf gerektirdiğini unutmayın ..nav
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Aynı HTML'yi alın, ancak .nav-pills
bunun yerine kullanın:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Haplar ayrıca dikey olarak istiflenebilir. Sadece ekleyin .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
ile 768 pikselden daha geniş ekranlarda sekmeleri veya hapları ebeveynleriyle eşit genişlikte kolayca yapın .nav-justified
. Daha küçük ekranlarda, gezinme bağlantıları yığılmıştır.
Yaslanmış gezinme çubuğu gezinme bağlantıları şu anda desteklenmemektedir.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Herhangi bir gezinme bileşeni (sekmeler veya haplar) .disabled
için gri bağlantılar ekleyin ve fareyle üzerine gelme efekti yok .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Biraz fazladan HTML ve açılır JavaScript eklentisi içeren açılır menüler ekleyin .
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Gezinti çubukları, uygulamanız veya siteniz için gezinme üstbilgileri görevi gören duyarlı meta bileşenlerdir. Mobil görünümlerde daraltılmaya (ve değiştirilebilir) başlarlar ve kullanılabilir görünüm alanı genişliği arttıkça yatay hale gelirler.
Yaslanmış gezinme çubuğu gezinme bağlantıları şu anda desteklenmemektedir.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Metni bir <img>
. Kendi dolgusu ve yüksekliği olduğundan .navbar-brand
, resminize bağlı olarak bazı CSS'leri geçersiz kılmanız gerekebilir.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
.navbar-form
Dar görünümlerde uygun dikey hizalama ve daraltılmış davranış için form içeriğini içine yerleştirin. Gezinme çubuğu içeriğinde nerede olduğuna karar vermek için hizalama seçeneklerini kullanın.
Bir başlık .navbar-form
olarak, kodunun çoğunu .form-inline
mixin ile paylaşır. Giriş grupları gibi bazı form denetimleri, bir gezinme çubuğunda düzgün bir şekilde görüntülenmesi için sabit genişlikler gerektirebilir.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
.navbar-btn
Sınıfı , gezinme çubuğunda dikey olarak ortalamak için <button>
içinde bulunmayan öğelere ekleyin .<form>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Metin dizelerini, uygun satır aralığı ve renk için .navbar-text
genellikle bir etiket üzerinde olan bir öğeye sarın.<p>
<p class="navbar-text">Signed in as Mark Otto</p>
Normal gezinme çubuğu gezinme bileşeninde olmayan standart bağlantıları kullanan kişiler .navbar-link
için, varsayılan ve ters gezinme çubuğu seçenekleri için uygun renkleri eklemek için sınıfı kullanın.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
.navbar-left
veya .navbar-right
yardımcı program sınıflarını kullanarak gezinme bağlantılarını, formları, düğmeleri veya metni hizalayın . Her iki sınıf da belirtilen yönde bir CSS şamandırası ekleyecektir. Örneğin, gezinme bağlantılarını hizalamak için, bunları <ul>
uygulanan ilgili yardımcı program sınıfıyla ayrı bir yere koyun.
.pull-left
Bu sınıflar ve öğesinin karma sürümleridir .pull-right
, ancak gezinme çubuğu bileşenlerinin cihaz boyutlarında daha kolay işlenmesi için ortam sorgularına yöneliktir.
.navbar-fixed-top
Bir .container
veya .container-fluid
ortala ve gezinme çubuğu içeriğini ekleyin ve ekleyin.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
.navbar-fixed-bottom
Bir .container
veya .container-fluid
ortala ve gezinme çubuğu içeriğini ekleyin ve ekleyin.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Bir or to center ve pad gezinme çubuğu içeriği ekleyerek .navbar-static-top
ve ekleyerek sayfayla birlikte kayan tam genişlikte bir gezinme çubuğu oluşturun ..container
.container-fluid
Sınıflardan farklı olarak, .navbar-fixed-*
üzerinde herhangi bir dolguyu değiştirmeniz gerekmez body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
ekleyerek gezinme çubuğunun görünümünü değiştirin .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Gezinme hiyerarşisi içinde geçerli sayfanın konumunu belirtin.
:before
Ayırıcılar, ve aracılığıyla CSS'ye otomatik olarak eklenir content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Çok sayfalı sayfalandırma bileşeni veya daha basit çağrı cihazı alternatifi ile siteniz veya uygulamanız için sayfalandırma bağlantıları sağlayın .
Uygulamalar ve arama sonuçları için harika, Rdio'dan ilham alan basit sayfalandırma. Büyük bloğu gözden kaçırmak zordur, kolayca ölçeklenebilir ve geniş tıklama alanları sağlar.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<nav>
Sayfalandırma bileşeni, onu ekran okuyucuları ve diğer yardımcı teknolojiler için bir gezinme bölümü olarak tanımlamak için bir öğeye sarılmalıdır . Ek olarak, bir sayfada bu tür birden fazla gezinme bölümü olması muhtemel olduğundan (başlıktaki birincil gezinme veya kenar çubuğu gezinme gibi), amacını yansıtan bir açıklayıcı aria-label
sağlanması tavsiye edilir. <nav>
Örneğin, sayfalandırma bileşeni bir dizi arama sonucu arasında gezinmek için kullanılıyorsa, uygun bir etiket olabilir aria-label="Search results pages"
.
Bağlantılar farklı durumlar için özelleştirilebilir. .disabled
Tıklanamayan bağlantılar için ve .active
geçerli sayfayı belirtmek için kullanın .
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
<span>
Hedeflenen stilleri korurken tıklama işlevini kaldırmak için etkin veya devre dışı bırakılmış bağlantıları yerine geçirmenizi veya önceki/sonraki oklar olması durumunda bağlantıyı çıkarmanızı öneririz .
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Daha büyük veya daha küçük sayfalandırma mı istiyorsunuz? Ekle .pagination-lg
veya .pagination-sm
ek boyutlar için.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
Hafif işaretleme ve stiller ile basit sayfalandırma uygulamaları için hızlı önceki ve sonraki bağlantılar. Bloglar veya dergiler gibi basit siteler için harikadır.
Varsayılan olarak, çağrı cihazı bağlantıları ortalar.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Alternatif olarak, her bir bağlantıyı yanlara hizalayabilirsiniz:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Çağrı cihazı bağlantıları ayrıca .disabled
sayfalamadaki genel yardımcı program sınıfını da kullanır.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
Bir etiketin görünümünü değiştirmek için aşağıda belirtilen değiştirici sınıflardan herhangi birini ekleyin.
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
Dar bir kap içinde her biri kendi inline-block
öğesini (bir simge gibi) içeren düzinelerce satır içi etiketiniz olduğunda oluşturma sorunları ortaya çıkabilir. Bunu aşmanın yolu ayardır display: inline-block;
. Bağlam ve bir örnek için bkz. #13219 .
<span class="badge">
Bağlantıları, Bootstrap gezinmelerini ve daha fazlasını ekleyerek yeni veya okunmamış öğeleri kolayca vurgulayın .
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Yeni veya okunmamış öğe olmadığında, :empty
içinde herhangi bir içerik bulunmadığı sürece rozetler (CSS seçici aracılığıyla) basitçe çökecektir.
:empty
Rozetler, seçici desteği olmadığı için Internet Explorer 8'de kendiliğinden çökmez .
Hap navigasyonlarında aktif durumdaki rozetleri yerleştirmek için yerleşik stiller dahildir.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
İsteğe bağlı olarak sitenizdeki önemli içeriği sergilemek için tüm görünümü genişletebilen hafif, esnek bir bileşen.
Bu basit bir kahraman birimi, öne çıkan içerik veya bilgilere ekstra dikkat çekmek için basit bir jumbotron tarzı bileşendir.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
Jumbotronu tam genişlikte ve yuvarlatılmış köşeler olmadan yapmak için, onu tüm s'lerin dışına yerleştirin .container
ve bunun yerine bir iç ekleyin .container
.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
h1
Bir sayfadaki içeriğin bölümlerini uygun şekilde boşaltmak ve bölümlere ayırmak için basit bir kabuk . h1
'nin varsayılan small
öğesini ve diğer bileşenlerin çoğunu (ek stillerle) kullanabilir .
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Görüntü, video, metin ve daha fazlasının ızgaralarını kolayca görüntülemek için Bootstrap'in ızgara sistemini küçük resim bileşeniyle genişletin.
Farklı yüksekliklerde ve/veya genişliklerde küçük resimlerin Pinterest benzeri bir sunumunu arıyorsanız, Masonry , Isotope veya Salvattore gibi bir üçüncü taraf eklentisi kullanmanız gerekir .
Varsayılan olarak, Bootstrap'in küçük resimleri, minimum gerekli işaretleme ile bağlantılı görüntüleri sergilemek için tasarlanmıştır.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Biraz fazladan işaretleme ile başlıklar, paragraflar veya düğmeler gibi her türlü HTML içeriğini küçük resimlere eklemek mümkündür.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
Bir avuç kullanılabilir ve esnek uyarı mesajıyla tipik kullanıcı eylemleri için bağlamsal geri bildirim mesajları sağlayın.
Herhangi bir metni ve isteğe bağlı bir kapatma düğmesini temel uyarı mesajları için .alert
dört bağlamsal sınıftan birine (örn. ) sarın..alert-success
Uyarıların varsayılan sınıfları yoktur, yalnızca temel ve değiştirici sınıfları vardır. Varsayılan bir gri uyarı çok anlamlı değildir, bu nedenle bağlamsal sınıf aracılığıyla bir tür belirtmeniz gerekir. Başarı, bilgi, uyarı veya tehlike arasından seçim yapın.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
.alert-dismissible
İsteğe bağlı ve kapat düğmesi ekleyerek herhangi bir uyarı oluşturun .
Tam olarak işleyen, kapatılabilir uyarılar içinTam olarak işleyen, kapatılabilir uyarılar için uyarılar JavaScript eklentisini .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<button>
elemanı ile birlikte kullandığınızdan emin olun .data-dismiss="alert"
data özniteliği
.alert-link
Herhangi bir uyarı içinde hızlı bir şekilde eşleşen renkli bağlantılar sağlamak için yardımcı program sınıfını kullanın .
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
Basit ama esnek ilerleme çubuklarıyla bir iş akışının veya eylemin ilerlemesi hakkında güncel geri bildirim sağlayın.
İlerleme çubukları, bazı efektlerini elde etmek için CSS3 geçişlerini ve animasyonlarını kullanır. Bu özellikler, Internet Explorer 9 ve altı ya da Firefox'un daha eski sürümlerinde desteklenmez. Opera 12, animasyonları desteklemez.
Web sitenizde buna izin vermeyen bir İçerik Güvenliği Politikası (CSP) varsa, aşağıdaki örneklerimizde gösterildiği gibi ilerleme çubuğu genişliklerini ayarlamak style-src 'unsafe-inline'
için satır içi öznitelikleri kullanamazsınız . style
Sıkı CSP'lerle uyumlu genişlikleri ayarlamaya yönelik alternatif yöntemler, küçük bir özel JavaScript (ayarlar element.style.width
) veya özel CSS sınıfları kullanmayı içerir.
Varsayılan ilerleme çubuğu.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
Görünür bir yüzde göstermek için ilerleme çubuğunun içinden <span>
with sınıfını kaldırın ..sr-only
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
Düşük yüzdelerde bile etiket metninin okunaklı kalmasını sağlamak min-width
için ilerleme çubuğuna bir eklemeyi düşünün.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
İlerleme çubukları, tutarlı stiller için aynı düğme ve uyarı sınıflarından bazılarını kullanır.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Çizgili bir efekt oluşturmak için bir degrade kullanır. IE9 ve altında mevcut değildir.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Sağdan sola şeritleri canlandırmak için .active
ekleyin . .progress-bar-striped
IE9 ve altında mevcut değildir.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
.progress
İstiflemek için birden fazla çubuğu aynı yere yerleştirin.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
Metin içeriğinin yanı sıra sola veya sağa hizalanmış bir görüntü içeren çeşitli bileşen türleri (blog yorumları, Tweetler vb.) oluşturmak için soyut nesne stilleri.
Varsayılan medya, içerik bloğunun solunda veya sağında bir medya nesnesi (görüntüler, video, ses) görüntüler.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
.pull-left
ve sınıfları .pull-right
da mevcuttur ve daha önce medya bileşeninin bir parçası olarak kullanılmıştır, ancak v3.3.0'dan itibaren bu kullanım için kullanımdan kaldırılmıştır. Bunlar yaklaşık olarak .media-left
ve ile eşdeğerdir .media-right
, bunun dışında .media-right
html'dekinden sonra yerleştirilmelidir .media-body
.
Görüntüler veya diğer ortamlar üste, ortaya veya aşağıya hizalanabilir. Varsayılan, üste hizalanmıştır.
Cras, amet nibh libero, gravida nulla'da oturuyor. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ve magnis doğumdan uzak montes, nascetur ridiculus mus.
Cras, amet nibh libero, gravida nulla'da oturuyor. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ve magnis doğumdan uzak montes, nascetur ridiculus mus.
Cras, amet nibh libero, gravida nulla'da oturuyor. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ve magnis doğumdan uzak montes, nascetur ridiculus mus.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
Biraz fazladan işaretleme ile, liste içindeki medyayı kullanabilirsiniz (yorum dizileri veya makale listeleri için kullanışlıdır).
Cras, amet nibh libero, gravida nulla'da oturuyor. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputatta vestibulum, tempus viverra turpis.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
Liste grupları, yalnızca basit öğe listelerini değil, aynı zamanda özel içerikli karmaşık listeleri de görüntülemek için esnek ve güçlü bir bileşendir.
En temel liste grubu, liste öğelerini ve uygun sınıfları içeren sırasız bir listedir. Takip eden seçeneklerle veya gerektiğinde kendi CSS'nizle bunun üzerine inşa edin.
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Rozetler bileşenini herhangi bir liste grubu öğesine eklediğinizde, otomatik olarak sağda konumlandırılacaktır.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Liste öğeleri yerine bağlantı etiketleri kullanarak liste grubu öğelerini birbirine bağlayın (bu, aynı zamanda , <div>
yerine bir üst öğe anlamına gelir <ul>
). Her öğenin etrafında bireysel ebeveynlere gerek yok.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Liste grubu öğeleri, liste öğeleri yerine düğmeler olabilir (bu, aynı zamanda bir <div>
yerine bir üst öğe anlamına gelir <ul>
). Her öğenin etrafında bireysel ebeveynlere gerek yok. Burada standart .btn
sınıfları kullanmayın.
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
Devre dışı görünmesi için griye .disabled
ekleyin ..list-group-item
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Varsayılan veya bağlantılı liste öğelerine stil vermek için bağlamsal sınıfları kullanın. Ayrıca .active
devlet içerir.
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
Aşağıdaki gibi bağlantılı liste grupları için bile hemen hemen her HTML'yi ekleyin.
Donec id, eget metus'ta elit olmayan porta gravida. Maecenas sed diam eget risus varius blandit.
Donec id, eget metus'ta elit olmayan porta gravida. Maecenas sed diam eget risus varius blandit.
Donec id, eget metus'ta elit olmayan porta gravida. Maecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
Her zaman gerekli olmasa da bazen DOM'unuzu bir kutuya koymanız gerekir. Bu durumlar için panel bileşenini deneyin.
Varsayılan olarak, tüm yapılması .panel
gereken, bazı içeriği içermek için bazı temel kenarlık ve dolgu uygulamaktır.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
ile panelinize kolayca bir başlık kabı ekleyin .panel-heading
. Ayrıca, önceden biçimlendirilmiş bir başlık eklemek için herhangi bir - sınıfı da ekleyebilirsiniz <h1>
. Ancak, yazı tipi boyutları - tarafından geçersiz kılınır .<h6>
.panel-title
<h1>
<h6>
.panel-heading
Doğru bağlantı renklendirmesi için, bağlantıları içindeki başlıklara yerleştirdiğinizden emin olun .panel-title
.
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
Düğmeleri veya ikincil metni .panel-footer
. Ön planda olmaları amaçlanmadığından, bağlamsal varyasyonlar kullanılırken panel altbilgilerinin renkleri ve kenarlıkları devralmadığını unutmayın .
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Diğer bileşenler gibi, bağlamsal durum sınıflarından herhangi birini ekleyerek bir paneli belirli bir bağlam için kolayca daha anlamlı hale getirin.
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
.table
Kusursuz bir tasarım için bir panelin içine kenarlıksız olanları ekleyin . Varsa .panel-body
, ayırma için tablonun üst kısmına fazladan bir kenarlık ekliyoruz.
Burada bazı varsayılan panel içeriği. Nulla vitae seçkin libero, bir pharetra augue. Aenean lacinia bibendum nulla sed conectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam kimliği dolor kimliği nibh ultricies vehicula ut id elit.
# | İlk adı | Soy isim | Kullanıcı adı |
---|---|---|---|
1 | İşaret | Otto | @mdo |
2 | Yakup | Thornton | @yağ |
3 | Larry | kuş |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Panel gövdesi yoksa, bileşen panel başlığından tabloya kesintisiz hareket eder.
# | İlk adı | Soy isim | Kullanıcı adı |
---|---|---|---|
1 | İşaret | Otto | @mdo |
2 | Yakup | Thornton | @yağ |
3 | Larry | kuş |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Tam genişlikte liste gruplarını herhangi bir panele kolayca dahil edin.
Burada bazı varsayılan panel içeriği. Nulla vitae seçkin libero, bir pharetra augue. Aenean lacinia bibendum nulla sed conectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam kimliği dolor kimliği nibh ultricies vehicula ut id elit.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Tarayıcıların, herhangi bir cihazda uygun şekilde ölçeklenecek bir içsel oran oluşturarak, içeren bloklarının genişliğine dayalı olarak video veya slayt gösterisi boyutlarını belirlemesine izin verin.
Kurallar doğrudan <iframe>
, <embed>
, <video>
ve <object>
öğelerine uygulanır; .embed-responsive-item
diğer niteliklerin stilini eşleştirmek istediğinizde isteğe bağlı olarak açık bir alt sınıf kullanın .
Profesyonel İpucu! frameborder="0"
Bunu sizin <iframe>
için geçersiz kıldığımız için s'nize eklemeniz gerekmez .
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Bir öğeye ek efekt vermek için kuyuyu basit bir efekt olarak kullanın.
<div class="well">...</div>
İki isteğe bağlı değiştirici sınıfla kontrol dolgusu ve yuvarlatılmış köşeler.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>