Düğme grupları

Birden çok düğmeyi tek bir bileşik bileşen olarak birleştirmek için düğme gruplarını kullanın. Bunları bir dizi <a>veya <button>öğeyle oluşturun.

Ayrıca daha karmaşık projeler için setleri <div class="btn-group">bir araya getirebilirsiniz.<div class="btn-toolbar">

Örnek işaretleme

Bağlantı etiketi düğmeleriyle oluşturulmuş standart bir düğme grubunu HTML şu şekilde arar:

<div sınıfı = "btn grubu" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Ve birden çok grup için bir araç çubuğu ile:

<div sınıfı = "btn-araç çubuğu" > 
  <div sınıfı = "btn grubu" > 
    ...
  </div>
</div>

Onay kutusu ve radyo aromaları

Düğme grupları, yalnızca bir düğmenin etkin olabileceği radyolar veya herhangi bir sayıda düğmenin etkin olabileceği onay kutuları olarak da işlev görebilir. Bunun için Javascript belgelerini görüntüleyin .

Javascript'i edinin »

Önüne bak

Düğme grupları için CSS ayrı bir dosyadadır, button-groups.less.

Düğme açılır menüleri

Bir açılır menüyü a içine yerleştirerek .btn-groupve uygun menü işaretlemesini sağlayarak tetiklemek için herhangi bir düğmeyi kullanın.

Örnek işaretleme

Bir düğme grubuna benzer şekilde, işaretlememiz normal düğme işaretlemesini kullanır, ancak stili iyileştirmek ve Bootstrap'in açılır jQuery eklentisini desteklemek için bir avuç ekleme ile.

<div sınıfı = "btn grubu" > 
  <a class = "btn açılır-geçiş" data-toggle = "açılır menü" href = "#" >   
    Eylem
    <span class = "şapka" ></span> 
  </a>
  <ul class = "açılır menü" > 
    <!-- açılır menü bağlantıları -->
  </ul>
</div>

Bölme düğmesi açılır menüleri

Düğme grubu stillerine ve işaretlemesine dayanarak, kolayca bölünmüş bir düğme oluşturabiliriz. Bölme düğmeleri, solda standart bir eyleme ve sağda bağlamsal bağlantılar içeren bir açılır menüye sahiptir.

Örnek işaretleme

Ayrı bir açılır liste tetikleyicisi olarak çalışan ikinci bir düğme eylemi sağlamak için normal düğme açılır listelerini genişletiriz.

<div sınıfı = "btn grubu" > 
  <a class = "btn" href = "#" > Eylem </a>  
  <a class = "btn açılır-geçiş" data-toggle = "açılır menü" href = "#" >   
    <span class = "şapka" ></span> 
  </a>
  <ul class = "açılır menü" > 
    <!-- açılır menü bağlantıları -->
  </ul>
</div>

Güçlü temel sınıf

Buradaki tüm gezinme bileşenleri (sekmeler, haplar ve listeler ) sınıf boyunca aynı temel işaretlemeyi ve stilleri paylaşır ..nav

Neden sekmeler ve haplar

Bootstrap'teki sekmeler ve haplar <ul>, aynı temel HTML'ye, bir bağlantı listesi üzerine kuruludur. Yalnızca bir sınıfla sekmeler veya haplar arasında geçiş yapın.

Her iki seçenek de içeriğin alt bölümleri veya ilgili içeriğin sayfaları arasında gezinmek için harikadır.

Temel sekmeler

Düzenli <ul>bir bağlantı alın ve şunu ekleyin .nav-tabs:

• Ev
• Profil
• Mesajlar

<ul class = "nav gezinme sekmeleri" > 
  <li sınıf = "etkin" > 
    <a href = "#" > Ana Sayfa </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Temel haplar

Aynı HTML'yi alın, ancak .nav-pillsbunun yerine kullanın:

• Ev
• Profil
• Mesajlar

<ul class = "nav nav hapları" > 
  <li sınıf = "etkin" > 
    <a href = "#" > Ana Sayfa </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

nasıl istiflenir

Sekmeler ve haplar varsayılan olarak yatay olduğundan, .nav-stackeddikey olarak yığılmış görünmelerini sağlamak için ikinci bir sınıf eklemeniz yeterlidir.

Yığılmış sekmeler

• Ev
• Profil
• Mesajlar

<ul class = "nav gezinme sekmeleri gezinme yığınlı" > 
  ...
</ul>

yığılmış haplar

• Ev
• Profil
• Mesajlar

<ul class = "nav nav-pills nav-yığılmış" > 
  ...
</ul>

Zengin menüler kolaylaştı

Bootstrap sekmeleri ve haplarındaki açılır menüler son derece kolaydır ve yalnızca biraz fazladan HTML ve hafif bir jQuery eklentisi gerektirir.

Bootstrap'ta açılır menülerin başlatılmasıyla ilgili belgeleri okumak için Javascript sayfasına gidin.

Açılan sekmeler

• Ev
• Profil
• Yıkılmak
  • Eylem
  • Başka bir eylem
  • Burada başka bir şey
  • Ayrılmış bağlantı

<ul class = "nav gezinme sekmeleri" > 
  <li class = "açılır menü" > 
    <a sınıfı = "açılır-geçiş" 
       data-toggle = "açılır menü"
       href = "#" >
        Yıkılmak
        <b sınıfı = "şapka" ></b> 
      </a>
    <ul class = "açılır menü" > 
      <!-- bağlantılar -->
    </ul>
  </li>
</ul>

Açılan haplar

• Ev
• Profil
• Yıkılmak
  • Eylem
  • Başka bir eylem
  • Burada başka bir şey
  • Ayrılmış bağlantı

<ul class = "nav nav hapları" > 
  <li class = "açılır menü" > 
    <a sınıfı = "açılır-geçiş" 
       data-toggle = "açılır menü"
       href = "#" >
        Yıkılmak
        <b sınıfı = "şapka" ></b> 
      </a>
    <ul class = "açılır menü" > 
      <!-- bağlantılar -->
    </ul>
  </li>
</ul>

Uygulama tarzı gezinme

Gezinti listeleri, isteğe bağlı başlıklarla gezinme bağlantıları grupları oluşturmanın basit ve kolay bir yolunu sağlar. En iyi OS X'teki Finder gibi kenar çubuklarında kullanılırlar.

Yapısal olarak, sekmeler ve haplarla aynı temel gezinme stilleri üzerine inşa edilmişlerdir, bu nedenle kullanım ve özelleştirme basittir.

simgelerle

Gezinme listelerinin simgelerle donatılması da kolaydır. Uygun <i>etiketi sınıfla ekleyin ve hazırsınız.

Örnek gezinme listesi

Bağlantıların bir listesini alın ve ekleyin class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Liste başlığı
  </li>
  <li sınıf = "etkin" > 
    <a href = "#" > Ana Sayfa </a> 
  </li>
  <li>
    <a href = "#" > Kitaplık </a> 
  </li>
  ...
</ul>

Simgelerle örnek

Aynı örnek, ancak <i>simgeler için etiketler var.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "simge-kitap" ></i> 
      Kütüphane
    </a>
  </li>
  ...
</ul>

Neler dahil

Sekmeler aracılığıyla içerikler arasında geçiş yapmak için basit bir eklenti ile sekmelerinize hayat verin. Bootstrap, sekmeli sekmeleri dört stilde birleştirir: üst (varsayılan), sağ, alt ve sol.

Aralarında geçiş yapmak kolaydır ve yalnızca çok az işaretlemenin değiştirilmesini gerektirir.

Sekmeli örnek

.nav-tabsSekmeleri sekmeli hale getirmek için , class ile başka bir div'e sarın .tabbable.

Özel jQuery eklentisi

Tüm sekmeli sekmeler, hafif jQuery eklentimiz tarafından desteklenmektedir. Javascript dokümanlar sayfasında sekmeli sekmelerin nasıl hayata geçirileceği hakkında daha fazla bilgi edinin.

Javascript'i edinin →

Alttaki sekmeler

HTML'nin sırasını çevirin ve en alta sekmeler koymak için bir sınıf ekleyin.

<div class = "tabbable sekmeler-aşağıda" > 
  <div class = "sekme içeriği" > 
    ...
  </div>
  <ul class = "nav gezinme sekmeleri" > 
    ...
  </ul>
</div>

Soldaki sekmeler

Sekmeleri sola yerleştirmek için sınıfı değiştirin.

<div class = "sekmelenebilir sekmeler-sol" > 
  <ul class = "nav gezinme sekmeleri" > 
    ...
  </ul>
  <div class = "sekme içeriği" > 
    ...
  </div>
</div>

Sağdaki sekmeler

Sekmeleri sağa yerleştirmek için sınıfı değiştirin.

<div class = "sekmelenebilir sekmeler-sağ" > 
  <ul class = "nav gezinme sekmeleri" > 
    ...
  </ul>
  <div class = "sekme içeriği" > 
    ...
  </div>
</div>

Navbar iskele

Gezinme çubuğu, statik veya sabit görüntüleme için iyi bir şekilde yapılandırılması için yalnızca birkaç div gerektirir.

<div sınıfı = "navbar" > 
  <div sınıfı = "navbar-iç" > 
    <div sınıfı = "konteyner" > 
      ...
    </div>
  </div>
</div>

.navbar-fixed-topGezinme çubuğunu görünümün üst kısmına sabitlemek için en dıştaki div'e ekleyin , .navbar. CSS'nizde, bunun neden olduğu çakışmayı padding-top: 40px;da <body>.

<div class = "navbar navbar-sabit-üst" > 
  ...
</div>

Marka adı

Markanızı veya proje adınızı göstermek için basit bir bağlantı, yalnızca bir bağlantı etiketi gerektirir.

<a class = "marka" href = "#" >  
  Proje Adı
</a>

Arama Formu

.navbar-searchArama formları, sınıfla birlikte gezinme çubuğunda özel stiller alır . Hizalamak için .pull-leftveya .pull-rightüzerine ekleyin .form

<form sınıfı = "navbar-arama sola çekme" > 
  <input type = "metin" sınıfı = "arama sorgusu" yer tutucusu = "Ara" >   
</form>

İsteğe bağlı duyarlı varyasyon

Üst çubuğunuzdaki içerik miktarına bağlı olarak, duyarlı seçenekleri uygulamak isteyebilirsiniz. Bunu yapmak için, gezinme içeriğinizi içeren bir div içine sarın ve gezinme .nav-collapse.collapseçubuğu geçiş düğmesini ekleyin .btn-navbar.

<div sınıfı = "navbar" > 
  <div sınıfı = "navbar-iç" > 
    <div sınıfı = "konteyner" > 
 
      <!-- .btn-navbar, daraltılmış gezinme çubuğu içeriği için geçiş olarak kullanılır -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span sınıfı = "simge çubuğu" ></span> 
        <span sınıfı = "simge çubuğu" ></span> 
        <span sınıfı = "simge çubuğu" ></span> 
      </a>
 
      <!-- Gösterilmesini istiyorsanız markayı orada bıraktığınızdan emin olun -->
      <a class = "brand" href = "#" > Proje adı </a>  
 
      <!-- 940 piksel veya daha düşük bir boyutta gizlenmesini istediğiniz her şeyi buraya yerleştirin -->
      <div sınıfı = "nav-çöküş" > 
        <!-- .nav, .navbar-arama, .navbar-form, vb -->
      </div>
 
    </div>
  </div>
</div>

Gezinme bağlantıları

Gezinme öğelerinin sırasız listeler aracılığıyla eklenmesi kolaydır.

<ul sınıfı = "nav" > 
  <li sınıf = "etkin" > 
    <a href = "#" > Ana Sayfa </a> 
  </li>
  <li><a href = "#" > Bağlantı </a></li> 
  <li><a href = "#" > Bağlantı </a></li> 
</ul>

Açılır listeler ekleme

Navigasyona açılır menüler eklemek son derece basittir, ancak javascript eklentimizin kullanılmasını gerektirir .

<ul sınıfı = "nav" > 
  <li class = "açılır menü" > 
    <a href = "#" 
          sınıf = "açılır-geçiş"
          data-toggle = "açılır menü" >
          Hesap
          <b sınıfı = "şapka" ></b> 
    </a>
    <ul class = "açılır menü" > 
      ...
    </ul>
  </li>
</ul>

Javascript'i edinin →

neden kullansınlar

Breadcrumb navigasyonu, kullanıcılara bir uygulama veya site içinde nerede olduklarını göstermenin bir yolu olarak kullanılır, ancak birincil gezinme için kullanılmaz. En etkili olması için kullanımlarını seyrek ve özlü tutun.

Örnekler

Birden çok sayfada görüntülenebileceği için gösterilen tek bir örnek.

• Ev

• Ana Sayfa /
• Kütüphane

• Ana Sayfa /
• Kütüphane /
• Veri

İşaretleme

HTML, bağlantıları olan standart sırasız listenizdir.

<ul sınıfı = "ekmek kırıntısı" > 
  <li>
    <a href = "#" > Ana Sayfa </a> <span class = "bölücü" > / </span>   
  </li>
  <li>
    <a href = "#" > Kitaplık </a> <span class = "bölücü" > / </span>   
  </li>
  <li sınıf = "etkin" > 
    <a href = "#" > Veri </a> 
  </li>
</ul>

Ne zaman kullanılır

Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

Stateful page links

Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.

Flexible alignment

Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

Examples

The default pagination component is flexible and works in a number of variations.

Markup

Wrapped in a <div>, pagination is just a <ul>.

<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li class="active">
      <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="#">Next</a></li>
  </ul>
</div>

About pager

The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.

Default example

By default, the pager centers links.

• Previous
• Next

<ul class="pager">
  <li>
    <a href="#">Previous</a>
  </li>
  <li>
    <a href="#">Next</a>
  </li>
</ul>

Aligned links

Alternatively, you can align each link to the sides:

• ← Older
• Newer →

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Older</a>
  </li>
  <li class="next">
    <a href="#">Newer &rarr;</a>
  </li>
</ul>

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

Highly customizable

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

• 

  Thumbnail label

  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.

  Action Action

• 

  Thumbnail label

  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.

  Action Action

Why use thumbnails

Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

Simple, flexible markup

Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

Uses grid column sizes

Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

The markup

As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

<ul class="thumbnails">
  <li class="span3">
    <a href="#" class="thumbnail">
      <img src="https://placehold.it/260x180" alt="">
    </a>
  </li>
  ...
</ul>

For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

<ul class="thumbnails">
  <li class="span3">
    <div class="thumbnail">
      <img src="https://placehold.it/260x180" alt="">
      <h5>Thumbnail label</h5>
      <p>Thumbnail caption right here...</p>
    </div>
  </li>
  ...
</ul>

More examples

Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

Rewritten base class

With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.

Single alert message

For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.

Goes great with javascript

Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

Get the plugin »

Example alerts

Wrap your message and an optional close icon in a div with simple class.

<div class="alert">
  <a class="close">×</a>
  <strong>Warning!</strong> Best check yo self, you’re not looking too good.
</div>

Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.

<div class="alert alert-block">
  <a class="close">×</a>
  <h4 class="alert-heading">Warning!</h4>
  Best check yo self, you’re not...
</div>

Error or danger

<div class="alert alert-error">
  ...
</div>

Success

<div class="alert alert-success">
  ...
</div>

Information

<div class="alert alert-info">
  ...
</div>

Basic

Default progress bar with a vertical gradient.

<div class="progress">
  <div class="bar"
       style="width: 60%;"></div>
</div>

Striped

Uses a gradient to create a striped effect.

<div class="progress progress-info
     progress-striped">
  <div class="bar"
       style="width: 20%;"></div>
</div>

Animated

Takes the striped example and animates it.

<div class="progress progress-danger
     progress-striped active">
  <div class="bar"
       style="width: 40%;"></div>
</div>

Additional colors

Progress bars utilize some of the same class names as buttons and alerts for similar styling.

• .progress-info
• .progress-success
• .progress-danger

Alternatively, you can customize the LESS files and roll your own colors and sizes.

Behavior

Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.

Opera does not support animations at this time.

Wells

Use the well as a simple effect on an element to give it an inset effect.

<div class="well">
  ...
</div>

Rozetler

Okunmamış bir sayı için veya basit bir gösterge olarak bir öğe üzerinde bir rozet kullanın.

<span class = "rozet" > 3 </div> 

Close icon

Use the generic close icon for dismissing content like modals and alerts.

×

<a class="close">&times;</a>