Kabartmalar (Glyphicons)

Hazır kabartmalar

Halflings kabartma kümesindeki 250'den fazla kabartmayı içermektedir. Glyphicons Halflings normalde ücretlidir, ama yayımcıları Bootstrap için ücretsiz yapmışlardır. Eğer uygunsa projenizde Glyphicons'a kısayol verirseniz memnun oluruz.

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-envelope
  • glyphicon glyphicon-pencil
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-music
  • glyphicon glyphicon-search
  • glyphicon glyphicon-heart
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-empty
  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-remove
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-trash
  • glyphicon glyphicon-home
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-flag
  • glyphicon glyphicon-headphones
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-picture
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-adjust
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-move
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon-backward
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-fast-forward
  • glyphicon glyphicon-step-forward
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-question-sign
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ok-circle
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-arrow-left
  • glyphicon glyphicon-arrow-right
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-exclamation-sign
  • glyphicon glyphicon-gift
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-eye-open
  • glyphicon glyphicon-eye-close
  • glyphicon glyphicon-warning-sign
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-calendar
  • glyphicon glyphicon-random
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-certificate
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-hand-right
  • glyphicon glyphicon-hand-left
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-circle-arrow-right
  • glyphicon glyphicon-circle-arrow-left
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-circle-arrow-down
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-tasks
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-briefcase
  • glyphicon glyphicon-fullscreen
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-heart-empty
  • glyphicon glyphicon-link
  • glyphicon glyphicon-phone
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-sort-by-alphabet
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by-order
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attributes
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon-unchecked
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-record
  • glyphicon glyphicon-save
  • glyphicon glyphicon-open
  • glyphicon glyphicon-saved
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-saved
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-credit-card
  • glyphicon glyphicon-transfer
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header
  • glyphicon glyphicon-compressed
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-tower
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-subtitles
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-registration-mark
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-tree-deciduous
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon-level-up
  • glyphicon glyphicon-copy
  • glyphicon glyphicon-paste
  • glyphicon glyphicon-alert
  • glyphicon glyphicon-equalizer
  • glyphicon glyphicon-king
  • glyphicon glyphicon-queen
  • glyphicon glyphicon-pawn
  • glyphicon glyphicon-bishop
  • glyphicon glyphicon-knight
  • glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-tent
  • glyphicon glyphicon-blackboard
  • glyphicon glyphicon-bed
  • glyphicon glyphicon-apple
  • glyphicon glyphicon-erase
  • glyphicon glyphicon-hourglass
  • glyphicon glyphicon-lamp
  • glyphicon glyphicon-duplicate
  • glyphicon glyphicon-piggy-bank
  • glyphicon glyphicon-scissors
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-ruble
  • glyphicon glyphicon-rub
  • glyphicon glyphicon-scale
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ice-lolly-tasted
  • glyphicon glyphicon-education
  • glyphicon glyphicon-option-horizontal
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-oil
  • glyphicon glyphicon-grain
  • glyphicon glyphicon-sunglasses
  • glyphicon glyphicon-text-size
  • glyphicon glyphicon-text-color
  • glyphicon glyphicon-text-background
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-horizontal
  • glyphicon glyphicon-object-align-left
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • glyphicon glyphicon-triangle-right
  • glyphicon glyphicon-triangle-left
  • glyphicon glyphicon-triangle-bottom
  • glyphicon glyphicon-triangle-top
  • glyphicon glyphicon-console
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-menu-left
  • glyphicon glyphicon-menu-right
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up

Nasıl kullanılır

Performans nedeniyle tüm simgeler bir ata sınıf ve simgeyi belirleyen bir bireysel sınıf içermektedir. Kullanmak için aşağıdaki kodu herhangi bir yere yerleştirin. Düzgün yerleştirme için simge ile metin arasında boşluk bırakmaya dikkat edin.

Diğer bileşenler ile karıştırmayınız

Simge sınıfları diğer bileşenler ile doğrudan birleştirilemez. Aynı element içinde diğer sınıflar ile beraber kullanılmamalıdır. Onun yerine, yeni bir <span> ekleyin ve simgenin sınıfını <span> içine yazınız.

Sadece boş elementlerde kullanılmak içindir

Simge sınıfları sadece metin içeriği ve çocuk element içermeyen elementlerde kullanılmalıdır.

Simge fontunun yerini değiştirme

Bootstrap, simge font dosyalarının derlenmiş CSS dosyalarına göreceli olarak ../fonts/ klasörü altında olduğunu varsayar. Bu font dosyalarının taşınması veya adının değiştirilmesi CSS'in üç şekilde güncellenmesini gerektirir:

  • Less kaynak dosyalarındaki @icon-font-path ve/veya @icon-font-name değişkenlerini değiştir.
  • Less derleyicisi tarafından sunulan göreceli URL seçeneğini kullan.
  • Derlenmiş CSS'deki url() adreslerini değiştir.

Size özel geliştirme ortamı ayarlamasına en uygun seçeneği kullan.

Erişilebilir simgeler

Yardımcı teknolojilerin modern versiyonları özel Unicode karakterler gibi CSS tarafından oluşturulmuş içeriği de duyuracaktır. Ekran okuyucudaki istenmeyen ve karışan çıktıları (özellikle sadece dekoratif amaç için kullanılan simgeler olduğunda) önlemek için, aria-hidden="true" özelliğini kullanarak onları gizleriz.

Eğer bir simgeyi anlamlandırmak için kullanıyorsan (sadece dekoratif amaçlı kullanmak dışında), bu anlamın yardımcı teknolojiler tarafından anlamlandırılabildiğinden emin olun. Mesela .sr-only sınıfını kullanarak görsel olarak gizli ek içerik ekleyin.

Metin içermeyen kontroller oluşturuyorsan (sadece simge içeren <button> gibi), her zaman kontrolün amacını belirten alternatif içerik sunmalısın. Böylelikle yardımcı teknolojiler kullanan kullanıcılara hitap etmiş olursun. Bu durumda kontrolün kendisine aria-label özelliği ekleyebilirsin.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Örnekler

Bunları düğmelerde, düğme gruplarında, navigasyon (menülerde) veya girdi elementlerinden önce kullanabilirsin.

<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>

alert içinde kullanılan simge bunun bir hata mesajı olduğunu belirtir. Ek olarak .sr-only içeren metin is yardımcı teknoloji kullanıcılarına ipucu belirtir.

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Hata:</span>
  Geçerli bir e-posta adresi giriniz.
</div>

Dropdown

Kısayol listelerini göstermek için kapanır/açılır ve bağlamsal menü. Dropdown JavaScript eklentisi ile interaktif yapabilirsin.

Dropdown'ın tetikleyicisini ve dropdown menüyü .dropdown ile veya position: relative; tanımlanmış başka bir element ile sarmalayın. Sonra menünün HTML'ini ekleyin. Dropdown menüler, atasına .dropup eklenerek, yukarı doğru (aşağı doğrunun tersine) açılacak şekilde değiştirilebilir.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Aksiyon</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Başka bir aksiyon</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Başka şeyler</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Ayrılmış kısayol</a></li>
  </ul>
</div>
<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Aksiyon</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Başka bir aksiyon</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Başka şeyler</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Ayrılmış kısayol</a></li>
  </ul>
</div>

Varsayılan olarak, dropdown menü otomatik olarak atasının üstünde %100 ve sol tarafı boyunca konumlandırılır. Dropdown menüyü sağa yaslamak istiyorsan .dropdown-menu koduna .dropdown-menu-right ekle.

Ek konumlandırma gerektirebilir

Dropdown, dokümanın normal akışı içinde CSS ile otomatik olarak konumlandırılır. Bu şu anlama gelmektedir; Dropdown, overflow özelliği ile atası tarafından kesilebilir veya viewport'un sınırları dışında gözükebilir. Oluşması durumunda bu durumu ele almak gerekebilir.

Önerilmemeyen .pull-right ile yaslama

Versiyon 3.1.0 ile, dropdown menülerde .pull-right kullanımı önerilmemektedir. Menüyü sağa yaslamak için .dropdown-menu-right kullanabilirsin. navbar içinde sağa yaslanmış nav bileşenleri, menüyü otomatik olarak yaslamak için bu sınıfın karışık versiyonunu kullanır. Bunun üzerine yazmak için .dropdown-menu-left kullanabilirsin.

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

Dropdown menüdeki aksiyonların etiket kısmına başlık ekleyin.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  ...
  <li role="presentation" class="dropdown-header">Dropdown başlığı</li>
  ...
</ul>

Dropdown menüdeki kısayol gruplarını ayırmak için ayırıcı kullanın.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="presentation" class="divider"></li>
  ...
</ul>

Dropdown içinde kısayolu engellemek için <li> elementine .disabled ekleyin.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Normal kısayol</a></li>
  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Engellenmiş kısayol</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Başka bir kısayol</a></li>
</ul>

Düğme grupları

Düğme grubu ile bir çizgi halinde düğmeleri gruplandırabilirsin. Group a series of buttons together on a single line with the button group. Düğme eklentimiz ile opsiyonel JavaScript radyo ve seçim kutusu davranışı ekleyebilirsin.

Düğme grubundaki açıklama (tooltip) & açılır kutular (popover) özel ayarlar gerektirir

.btn-group içindeki açıklama ve açılır kutuları kullanırken, istenmeyen yan etkileri (mesela elementin daha büyük olması ve/veya açıklama veya açılır kutu tetiklendiğinde yuvarlak kenarların kaybolması gibi) önlemek için container: 'body' seçeniğini belirtmek gerekmektedir.

Doğru role verdiğinden emin ol ve bir etiket ver

Yardımcı teknolojiler için (ekran okuyucuları gibi) düğmelerin gruplandığını iletmek için uygun role özelliği verilmelidir. Düğme grupları için role="group" kullanılırken, araç çubukları için role="toolbar" kullanılmalıdır.

Tek istisna sadece bir kontrol içeren (mesela <button> elementi ile yaslanmış düğme grupları) gruplardır.

Ek olarak, gruplar ve araç çubuklarına harici etiket verilmelidir. Çünkü çoğu yardımcı teknolojiler diğer durumda seslendirme yapmazlar. Burda verilen örneklerde aria-label kullandık, fakat aria-labelledby gibi alternatif yöntemler de kullanılabilir.

Temel örnek

.btn-group içindeki düğmeleri .btn ile sarmalayın.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Sol</button>
  <button type="button" class="btn btn-default">Orta</button>
  <button type="button" class="btn btn-default">Sağ</button>
</div>

Düğme araç çubuğu

Daha karmaşık bileşenler için <div class="btn-group"> öğelerini <div class="btn-toolbar"> içinde birleştirin.

<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>

Boyutlandırma

Bir gruptaki her düğmeye boyutlandırma sınıflarını vermek yerine sadece her .btn-group elementine .btn-group-* eklenebilir. Birden fazla grubu iç içe yerleştirirken de bu kullanılabilir.




<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>

İç içe geçirme

Dropdown menülerin bir grup düğme ile beraber kullanılmasını istersen .btn-group içinde başka bir .btn-group kullanabilirsin.

<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-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Dropdown kısayol</a></li>
      <li><a href="#">Dropdown kısayol</a></li>
    </ul>
  </div>
</div>

Dikey hali

Düğmelerin yatay yerine dikey olarak gözükmesini sağlayabilirsin. Ayrık dropdown düğme bu durumda desteklenmez.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

İki yana yaslanmış düğme grupları

Bir grup düğmenin, atasının tüm genişliğini kaplayacak şekilde eşit boyutta olmasını sağlar. Ayrıca düğme grubu içindeki düğme dropdown'ları için de kullanılabilir.

Kenarlıklar

Düğmeleri iki yana yaslamak için kullanılan özel HTML ve CSS'lerden dolayı (örneğin display: table-cell) aradaki kenarlıklar çift çıkar. Normal düğme gruplarında, kenarlıkları kaldırmak yerine birleştirmek için margin-left: -1px kullanılır. Fakat, margin özelliği display: table-cell ile çalışmaz. Sonuç olarak, Bootstrap kişiselleştirmenize bağlı olaraktan kenarlıkları kaldırmayı ve yeniden renklendirmeyi tercih edebilirsin.

IE8 ve kenarlıklar

Internet Explorer 8, iki yana yaslanmış düğmelerdeki kenarlıkları, <a> veya <button> elementleri içinde olsa bile göstermez. Bunu aşmak için her düğmeyi başka bir .btn-group ile sarmalayabilirsin.

Daha fazla bilgi için #12476 bakınız.

<a> elementi ile beraber

Sadece .btn'leri .btn-group.btn-group-justified ile sarmalayın.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Düğme gibi çalışan kısayollar

Eğer <a> elementleri düğme gibi kullanılırsa - mevcut sayfadaki başka bir dokümana veya kısma yönlendirmek yerine sayfa-içi fonksiyonaliteyi tetikler - uygun role="button" belirtilmelidir.

<button> elementleri ile

<button> elementleri ile iki yana yaslanmış düğme gruplarını kullanmak için, her düğmeyi bir düğme grubu içinde sarmalamalısın. <button> elementlerini iki yana yaslamak için çoğu tarayıcılar bizim CSS'imizi düzgün uygulamaz, fakat düğme dropdown'ları desteklediğimiz için bu sorun aşılabilmektedir.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Sol</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Orta</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Sağ</button>
  </div>
</div>

Düğme dropdown

Dropdown menüyü tetiklemek için herhangi bir düğmeyi .btn-group içine yerleştirerek ve uygun menü işaretini koyarak kullanabilirsin.

Eklenti bağımlılığı

Düğme dropdown'ı dropdown eklentisinin elinizdeki Bootstrap versiyonuna eklenmesini gerektirir.

Tek dropdown düğme

Küçük dokunuşlarla düğmeyi açılır/kapanır dropdown'a dönüştürün.

<!-- Tekli düğme -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Aksiyon <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Aksiyon</a></li>
    <li><a href="#">Başka bir aksiyon</a></li>
    <li><a href="#">Başka şeyler</a></li>
    <li class="divider"></li>
    <li><a href="#">Ayrılmış kısayol</a></li>
  </ul>
</div>

Ayrık dropdown düğme

Benzer olarak, sadece ayrı düğmelerde, aynı ufak dokunuşlarla ayrık düğme dropdown oluşturulabilir.

<!-- Ayrık düğme -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Aksiyon</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Açılır Kapanır Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Aksiyon</a></li>
    <li><a href="#">Başka bir aksiyon</a></li>
    <li><a href="#">Başka şeyler</a></li>
    <li class="divider"></li>
    <li><a href="#">Ayrılmış kısayol</a></li>
  </ul>
</div>

Boyutlandırma

Düğme dropdown, tüm düğme boyutlarıyla çalışır.

<!-- Büyük düğme grubu -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Büyük düğme <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>
<!-- Küçük düğme grubu -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Küçük düğme <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>
<!-- Çok küçük düğme grubu -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Çok küçük düğme <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

Dropup hali

Ata elemente .dropup ekleyerek menünün yukarı doğru açılması sağlanır.

<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-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Açılır Kapanır Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <!-- Dropdown menü kısayolları -->
  </ul>
</div>

Girdi grupları

Herhangi metin bazlı bir <input> elementinden önce, sonra veya her iki tarafına da metin veya düğme ekleyerek form kontrollerini genişletebilirsin. Tekil .form-control'ün öncesine veya sonrasına element eklemek için .input-group ile .input-group-addon beraber kullan.

Sadece metinsel <input>

Bu durumda <select> elementini kullanmaktan kaçının, çünkü WebKit tarayıcılarında tamamıyla desteklenmez.

Bu durumda <textarea> elementlerini kullanmaktan kaçının, çünkü onların rows özelliği bazı durumlarda ele alınmaz.

Girdi gruplarındaki açıklama & açılır kutular özel ayar gerektirir

.input-group içinde açıklama veya açılır kutu kullandığın zaman, istenmeyen yan etkileri (mesela elementin daha büyük olması ve/veya açıklama veya açılır kutu tetiklendiğinde yuvarlak kenarların kaybolması gibi) önlemek için container: 'body' seçeniğini belirtmek gerekmektedir.

Diğer bileşenler ile beraber kullanmayınız

Form grupları veya ızgara sütun sınıflarını girdi grupları ile beraber kullanmayınız. Onun yerine, girdi grubunu form grubu veya ızgara elementinin içine yerleştirin.

Her zaman etiket ekleyin

Eğer formun içindeki her girdi için etiket eklemezsen ekran okuyucular zor durumda kalabiliyor. Bu girdi grupları için ek etiket veya fonksiyonalitenin yardımcı teknolojilere sağlandığından emin olun.

Kullanılan asıl teknik (.sr-only sınıfını kullanarak gizlenen <label> elementleri, veya aria-label, aria-labelledby, aria-describedby, title, placeholder özelliği kullanımı ile) ve sağlanacak ek bilgi, geliştirilen arayüz bileşenine göre değişmektedir. Bu bölümde açıklanan örnekler tavsiye edilenlerden birkaç tanesidir.

Temel örnek

Girdinin her iki tarafına eklenti veya düğme yerleştir. Bir tanesinden, girdinin her iki tarafına da yerleştirebilirsin.

Bir tarafa birden fazla eklenti konulması desteklenmez.

Tekil girdi grubunda birden fazla form kontrolünün konulması desteklenmez.

@

@ornek.com

$ .00
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Kullanıcı Adı" aria-describedby="basic-addon1">
</div>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Alıcının kullanıcı adı" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@ornek.com</span>
</div>
<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Miktar">
  <span class="input-group-addon">.00</span>
</div>

Boyutlandırma

.input-group kendisine göreceli form boyutlandırma sınıfını ekleyin ve içindeki içerik otomatik olarak boyutlanır, form boyutlandırma sınıfını her element için tekrar etmeye gerek kalmaz.

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Kullanıcı Adı" 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="Kullanıcı Adı" 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="Kullanıcı Adı" aria-describedby="sizing-addon3">
</div>

Seçim kutusu ve radyo eklentisi

Girdi grubunun eklentisi olarak metin yerine seçim kutusu veya radyo eklentisi 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 -->

Düğme eklentisi

Girdi gruplarındaki düğmeler biraz farklıdır ve bir seviye daha içte olmayı gerektirir. .input-group-addon yerine .input-group-btn ile düğmeleri sarmalaman gerekir. Bu, tarayıcının varsayılan ve değiştirilemeyen stilleri için 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">Git!</button>
      </span>
      <input type="text" class="form-control" placeholder="Aranacak metin...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Aranacak metin...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Git!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Dropdown içeren düğme

<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-expanded="false">Aksiyon <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Aksiyon</a></li>
          <li><a href="#">Başka bir aksiyon</a></li>
          <li><a href="#">Başka şeyler</a></li>
          <li class="divider"></li>
          <li><a href="#">Ayrılmış kısayol</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-expanded="false">Aksiyon <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right" role="menu">
          <li><a href="#">Aksiyon</a></li>
          <li><a href="#">Başka bir aksiyon</a></li>
          <li><a href="#">Başka şeyler</a></li>
          <li class="divider"></li>
          <li><a href="#">Ayrılmış kısayol</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Bölünmüş düğmeler

<div class="input-group">
  <div class="input-group-btn">
    <!-- Düğme ve dropdown menü -->
  </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">
    <!-- Düğme ve dropdown menü -->
  </div>
</div>

Navigasyon

Bootstrap'de bulunan navigasyon, .nav ata sınıfı ile başlayan paylaşımlı işaretçilere sahiptir. Her bir stil arasında değişim yapmak için düzenleme sınıflarını yer değiştirebilirsin.

Sekme panelleri için navigasyon kullanımı JavaScript sekme eklentisini gerektirir

Sekmeli bölgelerdeki sekmeler için JavaScript sekme eklentisini kullanmak zorundasın. İşaretçi aynı zamanda ek role ve ARIA özelliği gerektirmektedir. Daha fazla detay için örnek işaretçiye bakınız.

Nav etiketini erişilebilir navigasyon maksatlı kullanın

Eğer nav etiketini navigasyon çubuğu için kullanıyorsan, <ul>'nin en mantıksal ata sarmalayıcısına role="navigation" eklediğinden emin ol, veya tüm navigasyonu <nav> elementi ile sarmala. Rolü <ul>'nin kendisine ekleme, çünkü onun yardımcı teknolojiler tarafından gerçek liste olarak algılanmasını engeller.

.nav-tabs sınıfı .nav ata sınıfını gerektirir.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Ana Sayfa</a></li>
  <li role="presentation"><a href="#">Profil</a></li>
  <li role="presentation"><a href="#">Mesajlar</a></li>
</ul>

Aynı HTML'i .nav-pills ile bereaber kullan

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Ana Sayfa</a></li>
  <li role="presentation"><a href="#">Profil</a></li>
  <li role="presentation"><a href="#">Mesajlar</a></li>
</ul>

Haplar aynı zamanda dikey olarak da kullanılabilir. Sadece .nav-stacked eklemen yeterlidir.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Sekme ve hapları, 768px'den büyük ekranlarda, .nav-justified kullanarak kolayca atasının genişliği ile aynı yapabilirsin. Daha küçük ekranlarda, nav kısayolları bitişik olur.

İki yana yaslanmış navigasyon çubuğu nav kısayollarını şu anda desteklenmez.

Safari ve duyarlı iki yana yaslanmış nav

Safari v8.0 tarayıcısının yatay olarak yeniden boyutlandırmasıyla iki yana yaslanmış nav'da gösterim hatası oluşmaktadır, sayfanın yeniden yüklenmesi ile sorun aşılmaktadır. Bu hata aynı zamanda iki yana yaslanmış nav örneğinde de gösterilmiştir.

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Herhangi bir nav bileşeni için (sekme veya haplar), gri kısayol ve üzerinde geldiğinde efekt oluşmaması .disabled ekleyin.

Kısayol fonksiyonalitesi etkilenmez

Bu sınıf sadece <a>'nın görünümünü değiştirmektedir, fonksiyonalitesini değiştirmez. Bu durumda kısayolları engellemek içn özelleşmiş JavaScript kullanabilirsin.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Engellenmiş kısayol</a></li>
  ...
</ul>

Az HTML kodu ve dropdown JavaScript eklentisi ile dropdown menü ekleyebilirsin.

Dropdown içeren sekmeler

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
  </li>
  ...
</ul>

Dropdown ile beraber haplar

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navigasyon çubuğu

Navigayon çubuğu, uygulamanız ve siteniz için naviagasyon başlığı görevi gören uyumlu bileşenlerdir. Mobil görünümlerde sıkışır (ve açılır/kapanır olur), ekranın genişliği arttıkça yatay hale dönüşür.

İki yana yaslanmış navbar na kısayolları şu anda desteklenmemektedir.

Taşan içerik

Bootstrap sizin navigasyon çubuğunuzun ne kadar yer gerektirdiğini bilmediği için içeriğin ikinci bir satıra sarkmasına sebep olabilir. Bunu çözmek için:

  1. Navigasyon çubuğu elemanlarının sayısını veya genişliğini düşürün.
  2. Bazı naviagasyon çubuğu elemanlarını belli ekran boyutlarında uyumlu araç sınıfları kullanarak gizleyebilirsin.
  3. Navigasyon çubuğunun hangi noktada sıkışıp kapanacağı ve yatay hale geleceğini değiştir. @grid-float-breakpoint değişkenini değiştir veya kendi media sorgularını ekle.

JavaScript eklentisi gerektirir

Eğer JavaScript aktif değilse ve ekran navigasyon çubuğunun sıkışacağı kadar dar ise, navigasyon çubuğunu genişletmek ve .navbar-collapse içindeki içeriğe bakmak imkansız hale gelir.

Uyumlu navigasyon çubuğu sıkışma eklentisinin kodunuza eklenmesini gerektirir.

Mobil navigasyon çubuğunun sıkışma noktasını değiştirme

Ekran @grid-float-breakpoint değerinden az olduğunda navigasyon çubuğu dikey mobil görünümüne sıkışır. Ve ekran en az @grid-float-breakpoint genişliğe sahip olunca mobil olmayan yatay görünüme genişler. Navigasyon çubuğunun ne zaman sıkışıp/genişleyeceğini kontrol etmek için Less kaynak kodunda bu değişkeni ayarlayın. Varsayılan değer 768px (en küçük "small" veya "tablet" ekranı) dir.

Navigasyon çubuklarını erişilebilir yapmak

<nav> elementi kullandığından emin ol veya, eğer <div> gibi daha kapsamlı bir element kullanılıyorsa, yardımcı teknoloji kullanan kullanıcılara işaret alanı olduğunu belirtmek için her bir navbar'a role="navigation" eklenmelidir.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Daha iyi mobil görüntü için marka ve aç/kapa gruplanıyor -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Navigasyonu aç/kapa</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Marka</a>
    </div>
    <!-- Aç/kapa için nav kısayollarını, formu ve diğer içeriği bir araya topla -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Kısayol <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Kısayol</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Aksiyon</a></li>
            <li><a href="#">Başka bir aksiyon</a></li>
            <li><a href="#">Başka şeyler</a></li>
            <li class="divider"></li>
            <li><a href="#">Ayrılmış kısayol</a></li>
            <li class="divider"></li>
            <li><a href="#">Başka bir ayrılmış kısayol</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Ara">
        </div>
        <button type="submit" class="btn btn-default">Gönder</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Kısayol</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Aksiyon</a></li>
            <li><a href="#">Başka bir aksiyon</a></li>
            <li><a href="#">Başka şeyler</a></li>
            <li class="divider"></li>
            <li><a href="#">Ayrılmış kısayol</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-aç/kapa -->
  </div><!-- /.container-fluid -->
</nav>

Navigasyon çubuğu markasını, metni <img> ile yer değiştirerek kendi imajın ile değiştirebilirsin. .navbar-brand kendi padding ve yükseklik değerlerine sahip olduğu için resminle ilgili bazı CSS değerlerinin üzerine yazma ihtiyacı duyabilirsin.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Marka" src="...">
      </a>
    </div>
  </div>
</nav>

Dar ekranlarda uygun dikey yaslama ve sıkışmış davranış için form içeriğini .navbar-form içine yerleştir. Navbar içeriğinde nerde yer alacağını belirlemek için yaslama özelliklerini kullanın.

Dİkkatinizi çekmek isteriz, .navbar-form kodunun çoğunu .form-inline ile karışık şekilde paylaşır. Bazı form kontrolleri, mesela girdi gruları gibii navigasyon çubuğu içinde düzgün görüntülenmesi için sabit genişlik değeri gerektirebilir.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Ara">
  </div>
  <button type="submit" class="btn btn-default">Gönder</button>
</form>

Mobil cihaz uyarıları

Mobil cihazlarda, boyutu belirli elementler arasında form kontrolleri kullanılması hakkında uyarılar mevcuttur. Daha detay için tarayıcı destekleme dokümanına bakabilirsin.

Her zaman etiket ekleyin

Eğer formun içindeki her girdi için etiket eklemezsen ekran okuyucular zor durumda kalabiliyor. Bu içteki formlar için etiketleri .sr-only sınıfını kullanarak gizleyebilirsin.

Yardımcı teknolojiler için etiket sunmanın başka alternatif yöntemleri, mesela aria-label, aria-labelledby or title özellikleri gibi, mevcuttur. Eğer bunların hiçbiri yoksa, ekran okuyucular çareyi placeholder özelliğini kullanmakta bulur. Eğer varsa, diğer etiketleme yöntemlerinin yerine placeholder kullanımı tavsiye edilmez.

<form> içerisinde yer almayan navigasyon çubuğundaki <button> elementlerini dikey olarak ortalamak için .navbar-btn sınıfını ekleyin.

<button type="button" class="btn btn-default navbar-btn">Giriş</button>

Bağlam-özellikli kullanım

Standart düğme sınıfları gibi .navbar-btn, <a> ve <input> elementlerinde kullanılabilir. Fakat, hem .navbar-btn hem de standart düğme sınıfları .navbar-nav içindeki <a> elementlerinde kullanılmamalıdır.

Metinleri .navbar-text ile bir elementin içinde sarmalayabilirsin. Bu element genellikle uygun önem ve renk için <p> etiketi olur.

<p class="navbar-text">Murat olarak giriş yapıldı</p>

Normal navigasyon çubuğu bileşeni içinde olmayan standart kısayolları kullananlar uygun renklendirme için .navbar-link sınıfını kullanılabilir.

<p class="navbar-text navbar-right"><a href="#" class="navbar-link">Murat</a> olarak giriş yapıldı</p>

.navbar-left ve .navbar-right sınıflarını kullanarak navigasyon kısayollarını, formları, düğmeleri ve metinleri yaslayabilirsin. Her iki sınıf da belirtilen yönde CSS'e float ekler. Örneğin, navigasyon kısayollarını yaslamak için uygun yaslama sınıfı belirtilmiş ayrı <ul> içine koyun.

Bu sınıflar .pull-left ve .pull-right'ın karıştırılmış versiyonlarıdır. Bunlar, cihaz boyutuna göre navigasyon çubuğu bileşenlerinin kolay ele alınması için media sorgularını kapsarlar.

Birden fazla bileşenin sağa yaslanması

Navigayon çubukları birden fazla .navbar-right sınıfları için limite sahiptir. İçeriğe uygun yerleştirmek için, son .navbar-right elementine negatif kenar boşluğu (margin) verilir. Bu sınıfı kullanan birden fazla element olduğunda bu kenar boşlukları istenildiği gibi çalışmaz.

Versiyon 4'te bu bileşeni tekrardan yazacağız.

Navigayon çubuğu içeriğini ortalamak ve uygun boşluk bırakmak için .navbar-fixed-top ekleyin, ayrıca .container veya .container-fluid yerleştirin.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Gövde iç kenar boşluğu (padding) gereklidir

<body>'nin üstüne padding eklemediğiniz sürece sabitlenmiş navigasyon çubuğu diğer içeriğinizi kaplar. Kendi değerlerinizi deneyin veya alttaki örneğimizi kullanın. İpucu: Varsayılan olarak navigasyon çubuğu yüksekliği 50 pikseldir.

body { padding-top: 70px; }

Bunu çekirdek Bootstrap CSS'inden sonra eklediğinizden emin olun.

Navigayon çubuğu içeriğini ortalamak ve uygun boşluk bırakmak için .navbar-fixed-bottom ekleyin, ayrıca .container veya .container-fluid yerleştirin.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Gövde iç kenar boşluğu (padding) gereklidir

<body>'nin üstüne padding eklemediğiniz sürece sabitlenmiş navigasyon çubuğu diğer içeriğinizi kaplar. Kendi değerlerinizi deneyin veya alttaki örneğimizi kullanın. İpucu: Varsayılan olarak navigasyon çubuğu yüksekliği 50 pikseldir.

body { padding-bottom: 70px; }

Bunu çekirdek Bootstrap CSS'inden sonra eklediğinizden emin olun.

Navigayon çubuğu içeriğini ortalamak ve uygun boşluk bırakmak için .navbar-static-top ekleyerek sayfayla beraber devam eden tam genişliğe sahip navigayon çubuğu oluşturun, ayrıca .container veya .container-fluid yerleştirin.

.navbar-fixed-* sınıflarının aksine, body içindeki iç kenar boşluğunu (padding) değitirmeye gerek yoktur.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

.navbar-inverse ekleyerek navigasyon çubuğunun görünümünü değiştirin.

<nav class="navbar navbar-inverse">
  ...
</nav>

Breadcrumbs

Navigasyonel hiyerarşik olarak sayfadaki mevcut yeri işaret eder.

Ayraçlar, :before ve content boyunca otomatik olarak eklenir.

<ol class="breadcrumb">
  <li><a href="#">Ana Sayfa</a></li>
  <li><a href="#">Kütüphane</a></li>
  <li class="active">Veri</li>
</ol>

Sayfalama

Siteniz ve uygulamanız için çok-sayfalı sayfalama bileşeni veya daha basit sayfalayıcı alternatifi ile sayfalama kısayolları sağlayabilirsin.

Varsayılan sayfalama

Rdio tarafından esinlenmiş basit sayfalama uygulama ve arama sonuçları için çok iyidir. Bileşen, büyükçe blok şekline sahip olduğundan kaçırılması zordur, kolayca boyutlandırılabilirdir ve büyük tıklama alanı sunar.

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</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">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Devredışı ve aktif durumlar

Kısayollar farklı şartlarda özelleştirilebilir. Tıklanamayan kısayollar için .disabled kullanın, mevcut sayfayı belirtmek için .active kullanın.

<nav>
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Önceki"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(aktif)</span></a></li>
    ...
  </ul>
</nav>

İstenilen stili tutarak tıklama fonksiyonalitesini çıkarmek için; <span> için aktif ve devredışı çapaları yer değiştirebilirsin veya önceki/sonraki okların olduğu durumda çapayı atlayabilirsin.

<nav>
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(aktif)</span></span>
    </li>
    ...
  </ul>
</nav>

Boyutlandırma

Daha büyük veya daha küçük sayfalama fantezin mi var? Daha fazla boyutlar için .pagination-lg veya .pagination-sm ekleyin.

<nav><ul class="pagination pagination-lg">...</ul></nav>
<nav><ul class="pagination">...</ul></nav>
<nav><ul class="pagination pagination-sm">...</ul></nav>

Sayfalayıcı

Hafif işaretlemeli ve stilli basit sayfalama için çabuk önceki ve sonraki kısayollarıdır. Blog ve magazin gibi basit siteler için mükemmeldir.

Varsayılan örnek

Varsayılan olarak, sayfalayıcı kısayolları ortalar.

<nav>
  <ul class="pager">
    <li><a href="#">Önceki</a></li>
    <li><a href="#">Sonraki</a></li>
  </ul>
</nav>

Yaslanmış kısayollar

Alternatif olarak, her kısayolu kenarlara yaslayabilirsin:

<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Daha eski</a></li>
    <li class="next"><a href="#">Daha yeni <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Opsiyonel devre dışı durumu

Sayfalayıcı kısayolları sayfalama için genel .disabled araç sınıfını da kullanır.

<nav>
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Daha eski</a></li>
    <li class="next"><a href="#">Daha yeni <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Etiketler

Örnek

Örnek başlık Yeni

Örnek başlık Yeni

Örnek başlık Yeni

Örnek başlık Yeni

Örnek başlık Yeni
Örnek başlık Yeni
<h3>Örnek başlık <span class="label label-default">Yeni</span></h3>

Mevcut varyasyonlar

Etiketin görünümünü değiştirmek için aşağıdaki uyarlayıcı sınıflardan birini ekleyin.

Varsayılan Öncelikli Başarılı Bilgi Uyarı Tehlike
<span class="label label-default">Varsayılan</span>
<span class="label label-primary">Öncelikli</span>
<span class="label label-success">Başarılı</span>
<span class="label label-info">Bilgi</span>
<span class="label label-warning">Uyarı</span>
<span class="label label-danger">Tehlike</span>

Tonlarca etiketiniz mi var?

Dar bir taşıyıcı içinde her biri inline-block elementi (simge gibi) içeren çok fazla iç etiket olduğu zaman yorumlama problemleri oluşabilir. Önlemek için display: inline-block; ayarını kullanın. Bağlam ve örnek için, bakınız #13219.

Rozetler

Kısayollara, Bootstrap navigasyon çubuğu ve daha fazla elemente <span class="badge"> ekleyerek kolayca yeni veya okunmamış nesneleri ön plana çıkarın.

Gelen kutusu 42

<a href="#">Gelen kutusu <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
  Mesajlar <span class="badge">4</span>
</button>

Kendi kendine sıkışan

Yeni veya okunmamış nesne olmadığı zaman, rozetler basitçe (CSS'in :empty seçicisi ile) sıkışır.

Çapraz tarayıcı uyumluluğu

Rozetler, Internet Explorer 8'de kendiliğinden sıkışmaz, çünkü :empty seçicisine desteği yoktur.

Aktif navigasyon durumlarına adapte olur

Hap navigasyonlardaki aktif durumlarda rozet yerleştirmek için bütünleşik stiller içerilmektedir.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Ana Sayfa <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profil</a></li>
  <li role="presentation"><a href="#">Mesajlar <span class="badge">3</span></a></li>
</ul>

Jumbotron

Sitenizdeki anahtar içeriği tüm ekrana yayılarak gösteren hafif ve esnek bir bileşendir.

Merhaba Dünya!

Fazladan dikkat çeken özellikli içerik ve bilgiyi sunmak için basit jumbotron stilinde bileşendir.

Daha fazla öğrenin

<div class="jumbotron">
  <h1>Merhaba Dünya!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Daha fazla öğrenin</a></p>
</div>

Jumbotronu tam genişlik yapmak ve yuvarlanmış köşeli yapmamak için, .container'lerin hepsinin dışında konumlandırın ve içine .container ekleyin.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Sayfa başlığı

Sayfadaki içerik kısımlarını uygun şekilde boşluklandırmak ve parçalamak maksatlı h1 için basit kabuktur. h1'in varsayılan small elementini, çoğu diğer bileşenleri (ekstra stillerle beraber) kullandığı gibi kullanabilir.

<div class="page-header">
  <h1>Örnek sayfa başlığı <small>Başlık için alt metin</small></h1>
</div>

Küçük resimler

Küçük resimler bileşeni ile kolayca resim, video, metin ve daha fazlasını ızgarada göstermek için Bootstrap'in ızgara sistemini genişletin.

Eğer değişken yükseklik ve genişlikteki küçük resimleri Pinterest gibi sunmak istiyorsan, üçüncü parti bir uygulama kullanmak zorundasın, mesela Masonry, Isotope veya Salvattore.

Varsayılan örnek

Varsayılan olarak, Bootstrap'in küçük resimleri en az işaretleme ile kısayolu olan resimleri göstermek 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>

Özelleşmiş içerik

Biraz fazla işaretleme ile, herhangi bir HTML içeriği koymak mümkündür. Mesela küçük resim içine başlık, paragraf veya düğme gibi.

Generic placeholder thumbnail

Küçük resim etiketi

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Düğme Düğme

Generic placeholder thumbnail

Küçük resim etiketi

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Düğme Düğme

Generic placeholder thumbnail

Küçük resim etiketi

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Düğme Düğme

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Küçük resim etiketi</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Düğme</a> <a href="#" class="btn btn-default" role="button">Düğme</a></p>
      </div>
    </div>
  </div>
</div>

Uyarılar

Uygun ve uyarlanabilir uyarı mesajları ile tipik kullanıcı eylemleri için içeriği olan geri besleme mesajları sunar.

Örnekler

.alert ve temel uyarı mesajları için içerikli dört sınıftan birisi (mesela .alert-success) içinde metin ve opsiyonel iptal düğmesi ile sarmalayın.

Varsayılan sınıfı yoktur

Uyarıların varsayılan sınıfları yoktur, sadece ata ve değiştirici sınıfları vardır. Varsayılan gri uyarı mesajı pek anlamlı değildir, dolayısıyla içerikli sınıflardan birisiyle tipini tanımlayabilirsin. Başaraılı, bilgi, uyarı ve tehlike arasından birini seçin.

<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>

Devredışı bırakabilen uyarılar

Opsiyonel .alert-dismissible ve kapatma düğmesi ekleyerek herhangi bir uyarı oluşturun.

JavaScript uyarı eklentisi gerektirmektedir

Tam fonksiyonluğu olan devredışı bırakabilen uyarılar için JavaScript uyarı eklentisini kullanmalısın.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Kapat"><span aria-hidden="true">&times;</span></button>
  <strong>Uyarı!</strong> Kendini bir daha kontrol et, çok iyi görünmüyorsun.
</div>

Tüm cihazlarla uyumlu davranış sergilediğinden emin olun

<button> elementini data-dismiss="alert" veri özelliği ile beraber kullandığından emin ol.

Uyarı içinde uyumlu renge sahip kısayollar göstermek için .alert-link 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>

İlerleme çubukları

İş akışının ilerlemesi veya uyarlanabilir ilerleme çubuğu ile aksiyon geri beslemesini sağlar.

Farklı tarayıcı uyumluluğu

İlerleme çubukları, efektleri sağlamak için CSS3 geçişlerini ve animasyonlarını kullanır. Bu özellikler Internet Explorer 9 ve Firefox'un eski sürümlerinde desteklenmez. Opera 12 animasyonları desteklemez.

Temel örnek

Varsayılan ilerleme çubuğu.

60% Tamamlandı
<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>

Etiket ile beraber

Görünebilir yüzdeyi göstermek için <span> ile .sr-only sınıfını ilerleme çubuğu içinden kaldırabilirsin.

60%
<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 dahi etiket metninin görünür olmasını sağlamak için ilerleme çubuğuna min-width ekleyin.

0%
2%
<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>

Bağlamlı alternatifler

İlerleme çubukları, tutarlı stiller için aynı düğme ve uyarı sınıflarını kullanır.

40% Tamamlandı (başarılı)
20% Tamamlandı
60% Tamamlandı (uyarı)
80% Tamamlandı (tehlike)
<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% Tamamlandı (başarılı)</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% Tamamlandı</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% Tamamlandı (uyarı)</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% Tamamlandı (tehlike)</span>
  </div>
</div>

Çizgili

Çizgili efektleri oluşturmak için geçiş kullanır. IE9 ve aşağısında desteklenmez.

40% Tamamlandı (başarılı)
20% Tamamlandı
60% Tamamlandı (uyarı)
80% Tamamlandı (tehlike)
<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% Tamamlandı (başarı)</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% Tamamlandı</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% Tamamlandı (uyarı)</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% Tamamlandı (tehlike)</span>
  </div>
</div>

Animasyonlu

Çizgileri sağdan sola animasyon yapmak için .progress-bar-striped'a .active ekleyin. IE9 ve aşağısında desteklenmez.

45% Tamamlandı
<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% Tamamlandı</span>
  </div>
</div>

Yığılmış

Birden fazla barı aynı .progress içine koyarak yığabilirsin.

35% Tamamlandı (başarı)
20% Tamamlandı (uyarı)
10% Tamamlandı (tehlike)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Tamamlandı (başarılı)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Tamamlandı (uyarı)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Tamamlandı (tehlike)</span>
  </div>
</div>

Medya nesnesi

Metinsel içeriğin yanına sağa veya sola yaslanmış çeşitli bileşenleri (mesela blog yorumları, Tweetler vb.) oluşturmak için soyut nesne stilleridir.

Varsayılan medya

Varsayılan medya, içerik bloğunun sağına veya soluna medya nesnesi (resim, video, ses) gösterir.

Medya başlığı

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Medya başlığı

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

İç içe medya başlığı

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Medya başlığı

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Medya başlığı

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<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">Medya başlığı</h4>
    ...
  </div>
</div>

.pull-left ve .pull-right sınıfları halen vardır ve medya bileşeninin parçası olarak kullanılmaktaydı. Ama v3.3.0 ile artık desteklenmemektedir. Yaklaşık olarak .media-left ve .media-right ile eşleniktir, istisna olarak .media-right, .media-body'den sonra yerleştirilmelidir.

Medya yaslama

İmajlar veya diğer medya üste, ortaya veya alta yaslanabilir. Varsayılan üste yaslanmışıdır.

Üste yaslanmış medya

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Ortaya yaslanmış medya

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Alta yaslanmış medya

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient 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">Ortaya yaslanmış medya</h4>
    ...
  </div>
</div>

Medya listesi

Ek bir kaç işaretleme ile medyayı liste içinde kullanabilirsin (yorum ve makale listesi için kullanışlıdır).

  • Medya başlığı

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    İç içe medya başlığı

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    İç içe medya başlığı

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    İç içe medya başlığı

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, 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">Medya başlığı</h4>
      ...
    </div>
  </li>
</ul>

Liste grubu

Liste grupları, sadece temel maddelerin listesini göstermek için değil, özellişmiş içerikli karmaşık olanları da gösteren çevik ve güçlü bileşenlerdir.

Temel örnek

En temel liste grubu temel olarak liste maddeleri içeren sırasız liste ve uygun sınıflardır. Aşağıdaki seçeneklerle veya kendi CSS kodunuz ile oluşturabilirsin.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<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

Herhangi bir liste grup maddesine rozet ekleyin ve otomatik olarak sağda konumlandırıldığını göreceksin.

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Kısayollu maddeler

Liste grup maddelerini, liste maddeleri (ayrıca <ul> yerine ata <div> anlamına gelmektedir) yerine çapa etiketini kullanarak kısayollu hale getirebilirsin.

<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>

Engellenmiş maddeler

Engellenmiş gözükmesini sağlayan grileşmesi için .list-group-item elementine .disabled ekleyin.

<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>

Bağlamsal sınıflar

Liste maddelerini stilleştirmek için bağlamsal sınıflar kullanabilirsin. Varsayılan veya kısayollu olabilir. Ayrıca .active durumu da içermektedir.

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros
<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>

Özelleşmiş içerik

İçine herhangi bir HTML yerleştirebilirsin, hatta aşağıdaki kısayollu liste grupları için bile.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">Liste grup maddesi başlığı</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Paneller

Her zaman gerekli olmasa bile bazen DOM'u bir kutu içine koymak isteyebilirsin. Bu durumlar için panel bileşenini deneyin.

Temel örnek

Varsayılan olarak, .panel'in yaptığı şey, içeriği sarmalamak için temel kenarlık ve iç kenar boşluğu uygulamaktır.

Temel panel örneği
<div class="panel panel-default">
  <div class="panel-body">
    Temel panel örneği
  </div>
</div>

Başlıklı panel

Panelinize, .panel-heading ile kolayca başlık konteyneri ekleyin. Ön stilize edilmiş başlık eklemek için <h1>-<h6> ile beraber .panel-title sınıfı ekleyebilirsin.

Uygun kısayol rengi için kısayolu .panel-title içindeki başlıkta yerleştirdiğinden emin olun.

Başlıksız panel üst metni
Panel içeriği

Panel başlığı

Panel içeriği
<div class="panel panel-default">
  <div class="panel-heading">Başlıksız panel üst metni</div>
  <div class="panel-body">
    Panel içeriği
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel başlığı</h3>
  </div>
  <div class="panel-body">
    Panel içeriği
  </div>
</div>

.panel-footer içindeki düğmeleri veya ikincil metni sarmalayın. Unutmayın ki, bağlamsal varyasyonları ön planda olmaması için kullanıldığında panel alt metinleri rengi ve kenarlıkları kalıtmaz.

Panel içeriği
<div class="panel panel-default">
  <div class="panel-body">
    Panel içeriği
  </div>
  <div class="panel-footer">Panel alt metni</div>
</div>

Bağlamsal alternatifler

Diğer bileşenlerde olduğu gibi bağlamsal durum sınıfları ekleyerek paneli daha anlamlı yapabilirsin.

Panel başlığı

Panel içeriği

Panel başlığı

Panel içeriği

Panel başlığı

Panel içeriği

Panel başlığı

Panel içeriği

Panel başlığı

Panel içeriği
<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>

Tabloyla beraber

Dikişsiz tasarım için kenarlıksız .table'ı panel içine yerleştirin. Eğer bir .panel-body varsa, ayırmak için tablonun üstüne ayrı bir kenarlık daha ekleriz.

Panel üst bilgisi

Varsayılan panel içeriği buraya gelecek. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# Ad Soyad Kullanıcı Adı
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <!-- Varsayılan panel içeriği -->
  <div class="panel-heading">Panel üst bilgisi</div>
  <div class="panel-body">
    <p>...</p>
  </div>
  <!-- Tablo -->
  <table class="table">
    ...
  </table>
</div>

Panel gövdesi yok ise, bileşen, panel üst bilgisinden tabloya kesintisiz bir şekild kayar.

Panel üst bilgisi
# Ad Soyad Kullanıcı Adı
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <!-- Varsayılan panel içeriği -->
  <div class="panel-heading">Panel üst bilgisi</div>
  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Liste grupları ile beraber

Basitçe panel içerisine tam genişlikli liste grupları ekleyin.

Panel üst bilgisi

Varsayılan panel içeriği buraya gelecek. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<div class="panel panel-default">
  <!-- Varsayılan panel içeriği -->
  <div class="panel-heading">Panel üst bilgisi</div>
  <div class="panel-body">
    <p>...</p>
  </div>
  <!-- Liste grubu -->
  <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>

Duyarlı gömülü

tarayıcıların, kendisini sarmalayan bloğun genişliğine bağlı olarak video ve yansı boyutlarını düzgün algılamasını, tüm cihazlarda düzgün ölçeklenebilecek gerçek oranı oluşturarak sağlayın.

Kurallar doğrudan <iframe>, <embed>, <video> ve <object> elementlerine uygulanmaktadır; opsiyonel olarak diğer özellikler ile stilin uyuşmasını istiyorsan açık torun .embed-responsive-item sınıfını kullan.

Profesyonel ipucu! <iframe>'lerinde frameborder="0" eklemek zorunda değilsin, biz bunu senin için yapıyoruz.

<!-- 16:9 görünüş oranı -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 görünüş oranı -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Well nesneleri

Varsayılan well

Well'i bir elemente ilave efektini vermek için kullanabilirsin.

Bak, ben bir well içindeyim!
<div class="well">...</div>

Opsiyonel sınıflar

İç kenar boşluğunu veya yuvarlamalı köşeleri iki opsiyonel sınıf ile kontrol edebilirsin.

Bak, ben büyük bir well içindeyim!
<div class="well well-lg">...</div>
Bak, ben küçük bir well içindeyim!
<div class="well well-sm">...</div>