Bootstrap - Hızlı Kılavuz

Twitter Bootstrap nedir?

Bootstrap, daha hızlı ve daha kolay web geliştirme için şık, sezgisel ve güçlü bir mobil ilk ön uç çerçevedir. HTML, CSS ve Javascript kullanır.

Tarih

Bootstrap tarafından geliştirilen Mark Otto ve Jacob Thornton de Twitter . Ağustos 2011'de GitHub'da açık kaynaklı bir ürün olarak piyasaya sürüldü.

Neden Bootstrap Kullanmalı?

• Mobile first approach - Bootstrap 3, çerçeve ayrı dosyalar yerine tüm kitaplık boyunca Mobil ilk stillerden oluşur.

• Browser Support - Tüm popüler tarayıcılar tarafından desteklenmektedir.

• Easy to get started- Sadece HTML ve CSS bilgisi ile herkes Bootstrap ile başlayabilir. Ayrıca Bootstrap resmi sitesinde iyi bir dokümantasyon var.

• Responsive design- Bootstrap'in duyarlı CSS'si Masaüstü Bilgisayarlara, Tabletlere ve Cep Telefonlarına uyarlanır. Duyarlı tasarım hakkında daha fazla bilgi Bootstrap Duyarlı Tasarım bölümündedir .

• Geliştiriciler için bir arayüz oluşturmak için temiz ve tek tip bir çözüm sağlar.

• Özelleştirmesi kolay, güzel ve işlevsel yerleşik bileşenler içerir.

• Ayrıca web tabanlı özelleştirme sağlar.

• Ve en iyisi bir açık kaynaktır.

Bootstrap Paketi Neleri İçerir?

• Scaffolding- Bootstrap, Izgara Sistemi, bağlantı stilleri ve arka plan ile temel bir yapı sağlar. Bu, bölümde ayrıntılı olarak ele alınmıştır.Bootstrap Basic Structure

• CSS- Bootstrap, genel CSS ayarları, genişletilebilir sınıflarla stilize edilmiş ve geliştirilmiş temel HTML öğeleri ve gelişmiş bir ızgara sistemi özelliği ile birlikte gelir. Bu, bölümde ayrıntılı olarak ele alınmıştır.Bootstrap with CSS.

• Components- Bootstrap, ikonografi, açılır menüler, gezinme, uyarılar, açılır pencereler ve çok daha fazlasını sağlamak için oluşturulmuş bir düzineden fazla yeniden kullanılabilir bileşen içerir. Bu, bölümde ayrıntılı olarak ele alınmıştır.Layout Components.

• JavaScript Plugins- Bootstrap bir düzineden fazla özel jQuery eklentisi içerir. Hepsini veya tek tek kolayca dahil edebilirsiniz. Bu, bölümde ayrıntılı olarak ele alınmıştır.Bootstrap Plugins.

• Customize - Kendi sürümünüzü almak için Bootstrap bileşenlerini, LESS değişkenlerini ve jQuery eklentilerini özelleştirebilirsiniz.

Bootstrap'i kurmak ve kullanmaya başlamak çok kolaydır. Bu bölümde Bootstrap'in nasıl indirileceği ve kurulacağı açıklanacaktır. Bootstrap dosya yapısını da tartışacağız ve kullanımını bir örnekle göstereceğiz.

Bootstrap'i indirin

Bootstrap'in en son sürümünü şu adresten indirebilirsiniz: https://getbootstrap.com/. Bu bağlantıya tıkladığınızda aşağıdaki gibi bir ekran göreceksiniz -

Burada iki düğme görebilirsiniz -

• Download Bootstrap- Bunu tıklayarak, Bootstrap CSS, JavaScript ve yazı tiplerinin önceden derlenmiş ve küçültülmüş sürümlerini indirebilirsiniz. Hiçbir belge veya orijinal kaynak kodu dosyası dahil edilmemiştir.

• Download Source - Bunu tıklayarak, en son Bootstrap LESS ve JavaScript kaynak kodunu doğrudan GitHub'dan alabilirsiniz.

Bootstrap'in derlenmemiş kaynak koduyla çalışıyorsanız, kullanılabilir CSS dosyaları oluşturmak için LESS dosyalarını derlemeniz gerekir. CSS içine AZ dosyalarının derlenmesi için Bootstrap resmen yalnızca destekler Tatile dayalı Twitter'ın CSS hinter olduğunu less.js .

Daha iyi anlamak ve kullanım kolaylığı için, eğitim boyunca Bootstrap'in önceden derlenmiş sürümünü kullanacağız. Dosyalar derlendiğinden ve küçültüldüğünden, her seferinde ayrı işlevler için ayrı dosyalar dahil etmek zorunda kalmazsınız. Bu öğreticiyi yazarken en son sürüm (Bootstrap 3) indirildi.

Dosya yapısı

Önceden derlenmiş Bootstrap

Derlenmiş Bootstrap sürümü indirildikten sonra, ZIP dosyasını çıkartın ve aşağıdaki dosya / dizin yapısını göreceksiniz -

Gördüğünüz gibi, derlenmiş CSS ve JS (bootstrap. *), Ayrıca derlenmiş ve küçültülmüş CSS ve JS (bootstrap.min. *) Vardır. İsteğe bağlı Bootstrap teması olduğu için Glyphicons'un yazı tipleri dahildir.

Bootstrap Kaynak Kodu

Bootstrap kaynak kodunu indirdiyseniz, dosya yapısı aşağıdaki gibi olacaktır -

• Less / , js / ve fonts / altındaki dosyalar Bootstrap CSS, JS ve simge yazı tiplerinin kaynak kodudur (sırasıyla).

• Dist / klasör üzerinde derlenmiş indirme bölümünde listelenen her şeyi içerir.

• docs-assets / , örnekler / ve tüm * .html dosyaları Bootstrap belgeleridir.

HTML Şablonu

Bootstrap kullanan basit bir HTML şablonu şuna benzer:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Burada görebilirsiniz jquery.js, bootstrap.min.js ve bootstrap.min.cssBootstrapped Şablonuna normal bir HTM dosyası oluşturmak için eklenen dosyalar. Bootstrap kitaplığını dahil etmeden önce jQuery kitaplığını dahil ettiğinizden emin olun.

Yukarıdaki kod parçasındaki öğelerin her biri hakkında daha fazla ayrıntı Bootstrap CSS'ye Genel Bakış bölümünde tartışılacaktır .

Misal

Şimdi yukarıdaki şablonu kullanarak bir örnek deneyelim. Web sitemizde aşağıdaki örnek kod kutusunun sağ üst köşesinde bulunan Canlı Demo seçeneğini kullanarak aşağıdaki örneği deneyin -

<h1>Hello, world!</h1>

Sonraki tüm bölümlerde siteden sahte metin kullandık https://www.lipsum.com/.

Bu bölümde Bootstrap Grid Sistemini tartışacağız.

Izgara nedir?

Wikepedia'nın belirttiği gibi -

Grafik tasarımda ızgara, içeriği yapılandırmak için kullanılan bir dizi kesişen düz (dikey, yatay) çizgiden oluşan bir yapıdır (genellikle iki boyutlu). Baskı tasarımında düzen ve içerik yapısını tasarlamak için yaygın olarak kullanılır. Web tasarımında HTML ve CSS kullanarak hızlı ve etkili bir şekilde tutarlı bir mizanpaj oluşturmak çok etkili bir yöntemdir.

Basit kelimelerle ifade etmek gerekirse, web tasarımındaki ızgaralar içeriği düzenler ve yapılandırır, web sitelerinin taranmasını kolaylaştırır ve kullanıcılar üzerindeki bilişsel yükü azaltır.

Bootstrap Grid System nedir?

Izgara sistemi için Bootstrap'in resmi belgelerinde belirtildiği gibi -

Bootstrap, cihaz veya görüntü alanı boyutu arttıkça 12 sütuna kadar uygun şekilde ölçeklendiren duyarlı, mobil bir ilk akışkan ızgara sistemi içerir. Kolay yerleşim seçenekleri için önceden tanımlanmış sınıfların yanı sıra daha anlamsal düzenler oluşturmak için güçlü karışımlar içerir.

Yukarıdaki ifadeyi anlayalım. Bootstrap 3, Bootstrap kodunun artık mobil cihazlar, tabletler gibi daha küçük ekranları hedefleyerek başlaması ve ardından dizüstü bilgisayarlar, masaüstü bilgisayarlar gibi daha büyük ekranlar için bileşenleri ve ızgaraları "genişletmesi" anlamında mobil bir ilk.

Mobil İlk Strateji

• Content

  • En önemli olanı belirleyin.

• Layout

  • Önce daha küçük genişlikler için tasarlayın.
  • Öncelikle mobil cihaz temel CSS adresi; tablet, masaüstü bilgisayarlar için ortam sorguları adresi.

• Progressive Enhancement

  • Ekran boyutu büyüdükçe öğeler ekleyin.

Bootstrap Grid Sisteminin Çalışması

Izgara sistemleri, içeriğinizi barındıran bir dizi satır ve sütun aracılığıyla sayfa düzenleri oluşturmak için kullanılır. Bootstrap ızgara sistemi şu şekilde çalışır -

• Satırlar bir .container uygun hizalama ve dolgu için sınıf.

• Yatay sütun grupları oluşturmak için satırları kullanın.

• İçerik sütunların içine yerleştirilmelidir ve yalnızca sütunlar satırların hemen alt öğeleri olabilir.

• Önceden tanımlanmış ızgara sınıfları gibi .row and .col-xs-4hızlı ızgara düzenleri oluşturmak için kullanılabilir. Daha fazla anlamsal düzen için LESS mixins de kullanılabilir.

• Sütunlar, dolgu yoluyla cilt payları (sütun içeriği arasındaki boşluklar) oluşturur. Bu dolgu, ilk ve son sütun için negatif kenar boşluğu ile satırlarda kaydırılır..rows.

• Izgara sütunları, yaymak istediğiniz on iki kullanılabilir sütunun sayısı belirlenerek oluşturulur. Örneğin, üç eşit sütun üç kullanır.col-xs-4.

Medya sorguları

Medya sorgusu, "koşullu CSS kuralı" için gerçekten süslü bir terimdir. Belirtilen belirli koşullara göre bazı CSS'ler uygular. Bu koşullar karşılanırsa stil uygulanır.

Bootstrap'teki Ortam Sorguları, içeriği görüntü alanı boyutuna göre taşımanıza, göstermenize ve gizlemenize olanak tanır. Aşağıdaki ortam sorguları, Bootstrap ızgara sisteminde anahtar kesme noktaları oluşturmak için LESS dosyalarında kullanılır.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Bazen bunlar bir max-width CSS'yi daha dar bir cihaz setiyle sınırlamak için.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Medya sorgularının iki bölümü vardır, bir cihaz özelliği ve ardından bir boyut kuralı. Yukarıdaki durumda, aşağıdaki kural belirlenir -

Bu satırı düşünelim -

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

Olursa olsun ne tür tüm cihazlar için min-width: Ekran-sm-min @ ekranın genişliği daha küçük alırsa ekran sm-max @ , daha sonra bir şey yapmak .

Izgara seçenekleri

Aşağıdaki tablo, Bootstrap grid sisteminin birden çok cihazda nasıl çalıştığını özetlemektedir -

Temel Izgara Yapısı

Bootstrap ızgarasının temel yapısı aşağıdadır -

<div class = "container">

   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>
   
   <div class = "row">...</div>
	
</div>

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

Bazı basit tablo örneklerini görelim -

• Örnek - Yataya yığılmış

• Örnek - Orta ve Büyük Cihaz

• Örnek - Mobil, tablet, masaüstü bilgisayarlar

Duyarlı sütun sıfırlamaları

Mevcut dört ızgara katmanıyla, belirli kesme noktalarında, biri diğerinden daha uzun olduğu için sütunların tam olarak netleşmediği sorunlarla karşılaşabilirsiniz. Bunu düzeltmek için bir sınıf kombinasyonunu kullanın.clearfixve aşağıdaki örnekte gösterildiği gibi duyarlı yardımcı program sınıfları -

<div class = "container">
   <div class = "row" >
   
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.</p>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut.</p>
      </div>

      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim</p>
      </div>
      
   </div>
</div>

Bu, aşağıdaki sonucu verecektir -

Bu örneğin istenen bir sonucu için görüntü alanınızı yeniden boyutlandırın veya telefonunuzda kontrol edin.

Ofset Sütunları

Ofsetler, daha özel düzenler için kullanışlı bir özelliktir. Daha fazla boşluk için sütunları itmek için kullanılabilirler (örneğin). .col-xs = * sınıflar ofsetleri desteklemez, ancak boş bir hücre kullanılarak kolayca çoğaltılabilirler.

Ofsetleri büyük ekranlarda kullanmak için, .col-md-offset-*sınıflar. Bu sınıflar bir sütunun sol kenar boşluğunu artırır* nerede sütunlar * dan aralığı 1 -e 11.

Aşağıdaki örnekte <div class = "col-md-6"> .. </div> var, bunu sınıf kullanarak ortalayacağız .col-md-offset-3.

<div class = "container">

   <h1>Hello, world!</h1>

   <div class = "row" >
      <div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

   </div>
	
</div>

Bu, aşağıdaki sonucu verecektir -

Yuvalama sütunları

İçeriğinizi varsayılan ızgara ile iç içe yerleştirmek için yeni bir .row ve bir dizi .col-md-* mevcut bir .col-md-*sütun. İç içe geçmiş satırların toplamı 12'ye kadar olan bir dizi sütun içermelidir.

Aşağıdaki örnekte, mizanpajın iki sütunu vardır ve ikincisi iki sıra üzerinde dört kutuya bölünmüştür.

<div class = "container">
   <h1>Hello, world!</h1>

   <div class = "row">

      <div class = "col-md-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>First Column</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class = "col-md-9" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>Second Column- Split into 4 boxes</h4>
         <div class = "row">
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Consectetur art party Tonx culpa semiotics. 
                  Pinterest assumenda minim organic quis.</p>
            </div>
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
				
         </div>

         <div class = "row">
			
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>quis nostrud exercitation ullamco laboris nisi ut aliquip 
                  ex ea commodo consequat.</p>
            </div>   
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p>
            </div>
				
         </div>

      </div>

   </div>
	
</div>

Bu, aşağıdaki sonucu verecektir -

Sütun Sıralaması

Bootstrap grid sisteminin bir diğer güzel özelliği de sütunları bir sırayla kolayca yazıp bir başkasında gösterebilmenizdir. Yerleşik ızgara sütunlarının sırasını şu şekilde kolayca değiştirebilirsiniz:.col-md-push-* ve .col-md-pull-* değiştirici sınıfları nerede * dan aralığı 1 -e 11.

Aşağıdaki örnekte, sol sütun en dar olan ve bir kenar çubuğu görevi gören iki sütun düzenimiz var. Bu sütunların sırasını kullanarak değiştireceğiz.col-md-push-* ve .col-md-pull-* sınıflar.

<div class = "container">
   <h1>Hello, world!</h1>
   
   <div class = "row">
      <p>Before Ordering</p>
      
      <div class = "col-md-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on left
      </div>
      
      <div class = "col-md-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on right
      </div>
      
   </div>
	
   <br>
   
   <div class = "row">
      <p>After Ordering</p>
      
      <div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on left
      </div>
      
      <div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on right
      </div>
		
   </div>

</div>

Bu, aşağıdaki sonucu verecektir -

Bu bölüm, Bootstrap'in daha iyi, daha hızlı ve daha güçlü web geliştirme yaklaşımı dahil olmak üzere Bootstrap altyapısının temel parçalarına genel bir bakış sağlar.

HTML5 belge türü

Bootstrap, HTML5 belge türünün kullanılmasını gerektiren belirli HTML öğelerini ve CSS özelliklerini kullanır. Bu nedenle, Bootstrap kullanan tüm projelerinizin başına HTML5 doctype için aşağıdaki kod parçasını ekleyin.

<!DOCTYPE html>
<html>
   ....
</html>

Önce Mobil

Bootstrap 3 piyasaya sürüldüğünden beri, Bootstrap önce mobil hale geldi. Bu, 'mobil önce' stillerin ayrı dosyalarda değil, tüm kitaplıkta bulunabileceği anlamına gelir. Eklemeniz gerekiyorviewport meta tag için <head> öğesi, mobil cihazlarda düzgün işleme ve dokunmatik yakınlaştırmayı sağlamak için.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

• width özelliği, aygıtın genişliğini kontrol eder. Cihaz genişliğine ayarlamak , çeşitli cihazlarda (cep telefonları, masaüstü bilgisayarlar, tabletler ...) doğru şekilde oluşturulmasını sağlar.

• initial-scale = 1.0 , yüklendiğinde, web sayfanızın 1: 1 ölçeğinde görüntülenmesini ve kutudan herhangi bir yakınlaştırma uygulanmamasını sağlar.

Ekle user-scalable = no için contentaşağıda gösterildiği gibi mobil cihazlarda yakınlaştırma özelliklerini devre dışı bırakma özelliği. Kullanıcılar bu değişiklikle yalnızca kaydırabilir ve zum yapamaz ve sitenizin biraz daha yerel bir uygulama gibi hissetmesine neden olur.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

Normalde maksimum ölçek = 1.0 , kullanıcı tarafından ölçeklenebilir = hayır ile birlikte kullanılır . Yukarıda da belirtildiği gibiuser-scalable = no kullanıcılara daha çok yerel bir uygulama gibi bir deneyim sunabilir, bu nedenle Bootstrap bu özelliği kullanmanızı önermemektedir.

Duyarlı Görüntüler

Bootstrap 3, bir sınıf ekleyerek görüntüleri duyarlı hale getirmenize olanak tanır .img-responsive için <img>etiket. Bu sınıf geçerlidirmax-width: 100%; ve height: auto; görüntüye, böylece ana öğeye göre güzel bir şekilde ölçeklendirilir.

<img src = "..." class = "img-responsive" alt = "Responsive image">

Tipografi ve Bağlantılar

Bootstrap temel bir genel görüntü (arka plan), tipografi ve bağlantı stilleri ayarlar -

• Basic Global display- Arka plan rengini ayarlar : #fff; üzerinde <body> elemanı.

• Typography- Tipografik taban olarak @ font-family-base , @ font-size-base ve @ line-height-base özelliklerini kullanır.

• Link styles- Genel bağlantı rengini öznitelik @ link-color ile ayarlar ve yalnızca : hover üzerine bağlantı alt çizgilerini uygular .

LESS kodunu kullanmayı düşünüyorsanız, tüm bunları scaffolding.less içinde bulabilirsiniz .

Normalleştir

Bootstrap, tarayıcılar arası tutarlılık sağlamak için Normalize kullanır .

Normalize.css, CSS sıfırlamalarına modern, HTML5'e hazır bir alternatiftir. HTML öğelerinin varsayılan stilinde daha iyi tarayıcılar arası tutarlılık sağlayan küçük bir CSS dosyasıdır.

Konteynerler

Sınıfı kullan .container bir sayfanın içeriğini sarmak ve içeriği aşağıda gösterildiği gibi kolayca ortalamak için.

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

Bir göz atın .containerbootstrap.css dosyasındaki sınıf -

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

Dolgu ve sabit genişlikler nedeniyle kapsayıcıların varsayılan olarak yuvalanamayacağını unutmayın.

Bootstrap.css dosyasına bir göz atın -

@media (min-width: 768px) {
   .container {
      width: 750px;
   }
}

Burada CSS'nin kapsayıcılar için medya sorguları olduğunu görebilirsiniz. width. Bu, yanıt verebilirliğin uygulanmasına yardımcı olur ve bunların içinde, ızgara sistemini düzgün bir şekilde oluşturmak için konteyner sınıfı buna göre değiştirilir.

Bootstrap, varsayılan yazı tipi yığınında Helvetica Neue, Helvetica, Arial ve sans-serif kullanır. Bootstrap'in tipografi özelliğini kullanarak başlıklar, paragraflar, listeler ve diğer satır içi öğeleri oluşturabilirsiniz. Aşağıdaki bölümlerde bunların her birini öğrenelim.

Başlıklar

Tüm HTML başlıkları (h1'den h6'ya) Bootstrap'te biçimlendirilmiştir. Aşağıda bir örnek gösterilmiştir -

<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>

Bootstrap ile yukarıdaki kod segmenti aşağıdaki sonucu üretecektir -

Satır İçi Alt Başlıklar

Başlıklardan herhangi birine satır içi bir alt başlık eklemek için, öğelerin herhangi birinin çevresine <small> eklemeniz veya .small aşağıdaki örnekte gösterildiği gibi daha açık bir renkte daha küçük metin elde edersiniz -

<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1> 
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>

Bootstrap ile yukarıdaki kod segmenti aşağıdaki sonucu üretecektir -

Kurşun Gövde Kopyası

Bir paragrafa biraz vurgu eklemek için class = "lead" ekleyin. Bu size aşağıdaki örnekte olduğu gibi daha büyük bir yazı tipi boyutu, daha hafif bir ağırlık ve daha uzun bir satır yüksekliği sağlayacaktır -

<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating 
   the use of lead body copy. This is an example paragraph 
   demonstrating the use of lead body copy.This is an example 
   paragraph demonstrating the use of lead body copy.This is an 
   example paragraph demonstrating the use of lead body copy.
   This is an example paragraph demonstrating the use of lead body copy.</p>

Vurgu

HTML'nin <small> gibi varsayılan vurgu etiketleri, metni üst öğenin boyutunun% 85'i olarak ayarlar, <strong> daha ağır yazı tipi ağırlıklı bir metni vurgular ve <em> italik bir metni vurgular.

Bootstrap, aşağıdaki örnekte görüldüğü gibi metinlere vurgu yapmak için kullanılabilecek birkaç sınıf sunar -

<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>

<p class = "text-left">Left aligned text.</p>
<p class = "text-center">Center aligned text.</p>
<p class = "text-right">Right aligned text.</p>
<p class = "text-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>

Kısaltmalar

HTML <abbr> öğesi, WWW veya HTTP gibi kısaltmalar veya kısaltmalar için işaretleme sağlar. Önyükleme, alt kısımda hafif noktalı bir kenarlıkla <abbr> öğelerine stil verir ve fareyle üzerine gelindiğinde tam metni gösterir (bu metni <abbr> başlık özniteliğine eklediğiniz sürece). Biraz daha küçük bir yazı tipi boyutu elde etmek için <abbr> 'ye .initialism ekleyin.

<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>

Adresler

<address> etiketini kullanarak iletişim bilgilerini web sayfanızda görüntüleyebilirsiniz. <address> varsayılan olarak görüntüleneceği için: block; kullanmanız gerekecek

Ekteki adres metnine satır sonları eklemek için Etiketler.

<address>
   <strong>Some Company, Inc.</strong><br>
   007 street<br>
   Some City, State XXXXX<br>
   <abbr title = "Phone">P:</abbr> (123) 456-7890
</address>

<address>
   <strong>Full Name</strong><br>
   <a href = "mailto:#">[email protected]</a>
</address>

Blok alıntılar

Herhangi bir HTML metninin çevresinde varsayılan <blockquote> değerini kullanabilirsiniz. Diğer seçenekler arasında, teklifin kaynağını tanımlamak için bir <small> etiketi eklemek ve .pull-right sınıfını kullanarak blok alıntıyı sağa hizalamak yer alır . Aşağıdaki örnek, tüm bu özellikleri göstermektedir -

<blockquote>
   <p>This is a default blockquote example. This is a default 
      blockquote example. This is a default blockquote 
      example.This is a default blockquote example. This is a 
      default blockquote example.</p>
</blockquote>

<blockquote>
   This is a blockquote with a source title.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

<blockquote class = "pull-right">This is a blockquote aligned to the right.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

Listeler

Bootstrap sıralı listeleri, sırasız listeleri ve tanım listelerini destekler.

• Ordered lists - Sıralı bir liste, bir tür ardışık sıraya giren ve önünde sayılar bulunan bir listedir.

• Unordered lists- Sırasız liste, belirli bir sıraya sahip olmayan ve geleneksel olarak madde işaretleriyle biçimlendirilmiş bir listedir. Madde işaretlerinin görünmesini istemiyorsanız, .list-unstyled sınıfını kullanarak stili kaldırabilirsiniz . Ayrıca, sınıf .list-inline kullanarak tüm liste öğelerini tek bir satıra yerleştirebilirsiniz .

• Definition lists- Bu tür bir listede, her liste öğesi hem <dt> hem de <dd> öğelerinden oluşabilir. <dt>, tanım terimi anlamına gelir ve bir sözlük gibi, bu tanımlanmakta olan terimdir (veya tümceciktir). Sonuç olarak <dd>, <dt> nin tanımıdır. <dl> içindeki terimleri ve açıklamaları dl-horizontal sınıfını kullanarak yan yana sıralayabilirsiniz .

Aşağıdaki örnek, bu türlerin her birini göstermektedir -

<h4>Example of Ordered List</h4>
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

<h4>Example of UnOrdered List</h4>

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Unstyled List</h4>

<ul class = "list-unstyled">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Inline List</h4>

<ul class = "list-inline">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Definition List</h4>

<dl>
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

<h4>Example of Horizontal Definition List</h4>

<dl class = "dl-horizontal">
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

Bootstrap, kodu iki farklı anahtar yolla görüntülemenizi sağlar -

• İlki <code> etiketidir. Kodu satır içi olarak görüntüleyecekseniz, <code> etiketini kullanmalısınız.

• İkincisi, <pre> etiketidir. Kodun bağımsız bir blok öğesi olarak görüntülenmesi gerekiyorsa veya birden çok satırı varsa, <pre> etiketini kullanmalısınız.

<pre> ve <code> etiketlerini kullandığınızda, açılış ve kapanış etiketleri için unicode varyantlarını kullandığınızdan emin olun - &lt; ve &gt;.

Aşağıda bir örnek görelim -

<p><code>&lt;header&gt;</code> is wrapped as an inline element.</p>
<p>To display code as a standalone block element use &lt;pre&gt; tag as:</p>

<pre>
   &lt;article&gt;
      &lt;h1&gt;Article Heading&lt;/h1&gt;
   &lt;/article&gt;
</pre>

Bootstrap, tablo oluşturmak için temiz bir düzen sağlar. Bootstrap tarafından desteklenen bazı tablo öğeleri şunlardır:

Temel Tablo

Sadece biraz hafif dolgu ve yatay bölücüler içeren güzel, basit bir tablo stili istiyorsanız , aşağıdaki örnekte gösterildiği gibi herhangi bir tabloya .table temel sınıfını ekleyin -

<table class = "table">
   <caption>Basic Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

İsteğe Bağlı Tablo Sınıfları

Temel tablo işaretlemesi ve .table sınıfıyla birlikte, işaretlemeyi biçimlendirmek için kullanabileceğiniz birkaç ek sınıf vardır. Aşağıdaki bölümler size tüm bu sınıflara bir göz atacaktır.

Çizgili Masa

.Table-çizgili sınıfını ekleyerek , aşağıdaki örnekte görüldüğü gibi <tbody> içindeki satırlarda çizgiler elde edeceksiniz -

<table class = "table table-striped">
   <caption>Striped Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Bordürlü Tablo

.Table-bordered sınıfını ekleyerek , aşağıdaki örnekte görüldüğü gibi, her öğeyi çevreleyen kenarlıklar ve tüm tablonun etrafında yuvarlak köşeler elde edeceksiniz -

<table class = "table table-bordered">
   <caption>Bordered Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
	
</table>

Fareyle Üzerine Gelme Tablosu

Ekleyerek .table-hover aşağıdaki örnekte görüldüğü gibi sınıf, açık gri arka plan, üzerlerinde imleç gezinen ise satır eklenecektir -

<table class = "table table-hover">
   <caption>Hover Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Yoğun Tablo

.Table-yoğunlaştırılmış sınıfı eklenerek , tabloyu yoğunlaştırmak için satır doldurma ikiye bölünür . aşağıdaki örnekte görüldüğü gibi. Daha yoğun bilgi istiyorsanız bu yararlıdır.

<table class = "table table-condensed">
   <caption>Condensed Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Bağlamsal sınıflar

Aşağıdaki tabloda gösterilen Bağlamsal sınıflar, tablo satırlarınızın veya tek tek hücrelerinizin arka plan rengini değiştirmenize izin verir.

Bu sınıflar <tr>, <td> veya <th> için uygulanabilir.

<table class = "table">
   <caption>Contextual Table Layout</caption>
   
   <thead>
      <tr>
         <th>Product</th>
         <th>Payment Date</th>
         <th>Status</th>
      </tr>
   </thead>
   
   <tbody>
      <tr class = "active">
         <td>Product1</td>
         <td>23/11/2013</td>
         <td>Pending</td>
      </tr>
      
      <tr class = "success">
         <td>Product2</td>
         <td>10/11/2013</td>
         <td>Delivered</td>
      </tr>
      
      <tr class = "warning">
         <td>Product3</td>
         <td>20/10/2013</td>
         <td>In Call to confirm</td>
      </tr>
      
      <tr class = "danger">
         <td>Product4</td>
         <td>20/10/2013</td>
         <td>Declined</td>
      </tr>
   </tbody>
</table>

Duyarlı Tablolar

Herhangi sarılmasıyla .table içinde .table duyarlı sınıf, yatay yukarı küçük cihazlara (768px altında) masa kaydırma yapacaktır. 768 pikselden daha geniş herhangi bir şey üzerinde görüntülerken, bu tablolarda herhangi bir fark görmeyeceksiniz.

<div class = "table-responsive">
   <table class = "table">
      <caption>Responsive Table Layout</caption>
      
      <thead>
         <tr>
            <th>Product</th>
            <th>Payment Date</th>
            <th>Status</th>
         </tr>
      </thead>
      
      <tbody>
         <tr>
            <td>Product1</td>
            <td>23/11/2013</td>
            <td>Pending</td>
         </tr>
         
         <tr>
            <td>Product2</td>
            <td>10/11/2013</td>
            <td>Delivered</td>
         </tr>
         
         <tr>
            <td>Product3</td>
            <td>20/10/2013</td>
            <td>In Call to confirm</td>
         </tr>
         
         <tr>
            <td>Product4</td>
            <td>20/10/2013</td>
            <td>Declined</td>
         </tr>
      </tbody>
   </table>
</div>

Bu bölümde, Bootstrap kullanarak formların nasıl kolayca oluşturulacağını inceleyeceğiz. Bootstrap, basit HTML biçimlendirmesi ve farklı form stilleri için genişletilmiş sınıflarla işi kolaylaştırır. Bu bölümde Bootstrap kullanarak formların nasıl kolayca oluşturulacağını inceleyeceğiz.

Form Düzeni

Bootstrap size aşağıdaki form düzeni türlerini sağlar -

• Dikey (varsayılan) form
• Satır içi form
• Yatay form

Dikey veya Temel Form

Temel form yapısı Bootstrap ile birlikte gelir; bireysel form kontrolleri otomatik olarak bazı genel stilleri alır. Temel bir form oluşturmak için aşağıdakileri yapın -

• Ana <form> öğesine bir rol formu ekleyin .

• .Form-group sınıfı ile bir <div> içindeki etiketleri ve denetimleri sarmalayın . Optimum aralık için bu gereklidir.

• Tüm metinsel <input>, <textarea> ve <select> öğelerine bir .form-control sınıfı ekleyin .

<form role = "form">

   <div class = "form-group">
      <label for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
      <p class = "help-block">Example block-level help text here.</p>
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

Satır İçi Form

Tüm öğelerin satır içi, sola hizalanmış ve etiketlerin yan yana olduğu bir form oluşturmak için <form> etiketine .form-inline sınıfını ekleyin .

<form class = "form-inline" role = "form">
   
   <div class = "form-group">
      <label class = "sr-only" for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label class = "sr-only" for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

• Varsayılan olarak, Bootstrap'te girişler, seçimler ve metin alanları% 100 genişliğe sahiptir. Satır içi formu kullanırken form denetimlerinde bir genişlik ayarlamanız gerekir.

• Yalnızca .sr sınıfını kullanarak satır içi formların etiketlerini gizleyebilirsiniz.

Yatay Form

Yatay formlar diğerlerinden sadece işaret miktarı açısından değil, formun sunumunda da ayrılmaktadır. Yatay düzeni kullanan bir form oluşturmak için aşağıdakileri yapın -

• Ana <form> öğesine bir .form-horizontal sınıfı ekleyin .

• .Form-group sınıfı ile bir <div> içindeki etiketleri ve denetimleri sarmalayın .

• Etiketlere bir .control-label sınıfı ekleyin .

<form class = "form-horizontal" role = "form">
   
   <div class = "form-group">
      <label for = "firstname" class = "col-sm-2 control-label">First Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <div class = "checkbox">
            <label><input type = "checkbox"> Remember me</label>
         </div>
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <button type = "submit" class = "btn btn-default">Sign in</button>
      </div>
   </div>
	
</form>

Desteklenen Form Denetimleri

Bootstrap , giriş, metin alanı, onay kutusu, radyo ve seçme gibi en yaygın biçim denetimlerini yerel olarak destekler .

Girişler

En yaygın form metin alanı giriş alanıdır. Bu, kullanıcıların temel form verilerinin çoğunu gireceği yerdir. Bootstrap, tüm yerel HTML5 giriş türleri için destek sunar: metin, parola, tarih saat, tarih saat-yerel, tarih, ay, saat, hafta, sayı, e-posta, url, arama, tel ve renk . Girdileri tamamen biçimlendirmek için uygun tip beyanı gereklidir .

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Label</label>
      <input type = "text" class = "form-control" placeholder = "Text input">
   </div>
  
</form>

Metin alanı

Metin alanı, birden çok satır girişine ihtiyacınız olduğunda kullanılır. Satır özniteliğini gerektiği gibi değiştirin (daha az satır = daha küçük kutu, daha fazla satır = daha büyük kutu).

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Text Area</label>
      <textarea class = "form-control" rows = "3"></textarea>
   </div>
   
</form>

Onay Kutuları ve Radyo Düğmeleri

Kullanıcıların önceden ayarlanmış seçenekler listesinden seçim yapmasını istediğinizde onay kutuları ve radyo düğmeleri harikadır.

• Bir form oluştururken, kullanıcının bir listeden herhangi bir sayıda seçeneği seçmesini istiyorsanız onay kutusunu kullanın . Kullanıcıyı tek bir seçimle sınırlamak istiyorsanız radyoyu kullanın .

• Kullanım .checkbox-inline veya yavaş.Radyo-inline kontrolleri için onay kutuları ya da radyolar bir dizi sınıf aynı satırda görünür.

Aşağıdaki örnek, hem (varsayılan hem de satır içi) türleri gösterir -

<label for = "name">Example of Default Checkbox and radio button </label>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 1
   </label>
</div>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 2
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
      Option 2 - selecting it will deselect option 1
   </label>
</div>

<label for = "name">Example of Inline Checkbox and radio button </label>

<div>
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
   </label>
</div>

Seçer

Kullanıcının birden çok seçenek arasından seçim yapmasına izin vermek istediğinizde seçim kullanılır, ancak varsayılan olarak yalnızca birine izin verir.

• Durumlar veya sayılar gibi kullanıcının aşina olduğu liste seçenekleri için <seç> seçeneğini kullanın.

• Kullanıcıların birden fazla seçenek belirlemesine izin vermek için multiple = "multiple" kullanın.

Aşağıdaki örnek, hem (seçili hem de birden çok) türü göstermektedir -

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Select list</label>
      
      <select class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for = "name">Mutiple Select list</label>
      
      <select multiple class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
      
   </div>
	
</form>

Statik Kontrol

Bir <p> üzerinde, yatay bir form içindeki bir form etiketinin yanına düz metin yerleştirmeniz gerektiğinde .form-control-static sınıfını kullanın .

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Email</label>
      
      <div class = "col-sm-10">
         <p class = "form-control-static">[email protected]</p>
      </div>
      
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">Password</label>
      
      <div class = "col-sm-10">
         <input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
      </div>
      
   </div>
</form>

Form Kontrol Durumları

Odaklanma durumuna ek olarak (yani, kullanıcı girdiyi tıklar veya üzerine sekmeler ekler ), Bootstrap devre dışı girdiler için stil ve form doğrulama için sınıflar sunar.

Giriş Odağı

Bir girdi alındığında : odak , girdinin ana hatları kaldırılır ve bir kutu gölgesi uygulanır.

Devre dışı girişler

Bir girişi devre dışı bırakmanız gerekirse, devre dışı bırakılmış özniteliği eklemek yalnızca onu devre dışı bırakmaz; imleç öğenin üzerine geldiğinde stil ve fare imlecini de değiştirecektir.

Devre Dışı Alan Kümeleri

<fieldset> içindeki tüm kontrolleri aynı anda devre dışı bırakmak için bir <fieldset> alanına devre dışı bırakılmış özniteliği ekleyin.

Doğrulama Durumları

Bootstrap, hatalar, uyarılar ve başarı mesajları için doğrulama stilleri içerir. Kullanmak için, ana öğeye uygun sınıfı ( .has-warning, .has-error veya .has-success ) eklemeniz yeterlidir .

Aşağıdaki örnek, tüm form kontrol durumlarını gösterir -

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Focused</label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">
         Disabled
      </label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
      </div>
   </div>
   
   <fieldset disabled>
      <div class = "form-group">
         <label for = "disabledTextInput" class = "col-sm-2 control-label">
            Disabled input (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
         </div> 
      </div>
      
      <div class = "form-group">
         <label for = "disabledSelect" class = "col-sm-2 control-label"> 
            Disabled select menu (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <select id = "disabledSelect" class = "form-control"> 
               <option>Disabled select</option>
            </select> 
         </div>
      </div> 
   </fieldset>
   
   <div class = "form-group has-success">
      <label class = "col-sm-2 control-label" for = "inputSuccess">
         Input with success
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputSuccess">
      </div>
   </div>
   
   <div class = "form-group has-warning">
      <label class = "col-sm-2 control-label" for = "inputWarning">
         Input with warning
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputWarning">
      </div>
   </div>
   
   <div class = "form-group has-error">
      <label class = "col-sm-2 control-label" for = "inputError">
         Input with error
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputError">
      </div>
   </div>
</form>

Form Kontrolü Boyutlandırma

Sırasıyla .input-lg ve .col-lg- * gibi sınıfları kullanarak formların yüksekliklerini ve genişliklerini ayarlayabilirsiniz . Aşağıdaki örnek bunu göstermektedir -

<form role = "form">

   <div class = "form-group">
      <input class = "form-control input-lg" type = "text" placeholder =".input-lg">
   </div>

   <div class = "form-group">
      <input class = "form-control" type = "text" placeholder = "Default input">
   </div>

   <div class = "form-group">
      <input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
   </div>
   
   <div class = "form-group"></div>
   
   <div class = "form-group">
      <select class = "form-control input-lg">
         <option value = "">.input-lg</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control">
         <option value = "">Default select</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control input-sm">
         <option value = "">.input-sm</option>
      </select>
   </div>

   <div class = "row">
      <div class = "col-lg-2">
         <input type = "text" class = "form-control" placeholder = ".col-lg-2">
      </div>
      
      <div class = "col-lg-3">
         <input type = "text" class = "form-control" placeholder = ".col-lg-3">
      </div>
      
      <div class = "col-lg-4">
         <input type = "text" class = "form-control" placeholder = ".col-lg-4">
      </div>
      
   </div>
</form>

Yardım Metni

Bootstrap form kontrolleri, girişlerle birlikte akan blok düzeyinde bir yardım metnine sahip olabilir. Tam genişlikte bir içerik bloğu eklemek için , <input> 'dan sonra .help-bloğunu kullanın . Aşağıdaki örnek bunu göstermektedir -

<form role = "form">
   <span>Example of Help Text</span>
   <input class = "form-control" type = "text" placeholder = "">
   
   <span class = "help-block">
      A longer block of help text that breaks onto a new line and may extend beyond one line.
   </span>
	
</form>

Bu bölüm, örneklerle birlikte Bootstrap düğmesinin kullanım yaşını kapsar. Bir sınıf verilen her şey.btnyuvarlatılmış köşeleri olan gri bir düğmenin varsayılan görünümünü devralır. Bununla birlikte, Bootstrap, aşağıdaki tabloda özetlenen düğmeler için bazı seçenekler sunar -

Aşağıdaki örnek, yukarıdaki tüm düğme sınıflarını gösterir -

<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>

<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>

<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>

<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>

Düğme Boyutu

Aşağıdaki tablo, çeşitli boyutlarda düğmeler elde etmek için kullanılan sınıfları özetlemektedir -

Aşağıdaki örnek bunu göstermektedir -

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Large Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg">
      Large button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary">
      Default size Primary button
   </button>
   
   <button type = "button" class = "btn btn-default">
      Default size button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-sm">
      Small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-sm">
      Small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-xs">
      Extra small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-xs">
      Extra small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg btn-block">
      Block level Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg btn-block">
      Block level button
   </button>
</p>

Düğme Durumu

Bootstrap, düğmelerin durumunu etkin, devre dışı vb. Olarak değiştirmenize olanak tanıyan sınıflar sağlar ve bunların her biri aşağıdaki bölümlerde ele alınmıştır.

Aktif Durum

Etkin olduğunda düğmeler basılı olarak (daha koyu bir arka plan, daha koyu kenarlık ve ek gölge ile) görünecektir. Aşağıdaki tablo, düğme öğelerini ve bağlantı öğelerini etkin hale getirmek için kullanılan sınıfları özetlemektedir -

Aşağıdaki örnek bunu göstermektedir -

<p>
   <button type = "button" class = "btn btn-default btn-lg ">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg active">
      Active Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg active">
      Active Primary button
   </button>
</p>

Engelli Durumu

Bir düğmeyi devre dışı bıraktığınızda, rengi% 50 oranında solacak ve renk geçişini kaybedecektir.

Aşağıdaki tablo, düğme öğesini ve bağlantı öğesini devre dışı bırakmak için kullanılan sınıfları özetlemektedir -

Aşağıdaki örnek bunu göstermektedir -

<p>
   <button type = "button" class = "btn btn-default btn-lg">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
      Disabled Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
      Disabled Primary button
   </button>
</p>

<p>
   <a href = "#" class = "btn btn-default btn-lg" role = "button">
      Link
   </a>
   
   <a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
      Disabled Link
   </a>
</p>

<p>
   <a href = "#" class = "btn btn-primary btn-lg" role = "button">
      Primary link
   </a>
   
   <a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
      Disabled Primary link
   </a>
</p>

Düğme Etiketleri

<a>, <button> veya <input> elemanlı düğme sınıflarını kullanabilirsiniz. Ancak, tarayıcılar arası tutarsızlık sorunlarını önlemek için bunu çoğunlukla <button> öğeleriyle kullanmanız önerilir.

Aşağıdaki örnek bunu göstermektedir -

<a class = "btn btn-default" href = "#" role = "button">Link</a>
<button class = "btn btn-default" type = "submit">Button</button>
<input class = "btn btn-default" type = "button" value = "Input">
<input class = "btn btn-default" type = "submit" value = "Submit">

Bu bölüm, görüntüler için Bootstrap desteğini kapsar. Bootstrap, görüntülere bazı basit stilleri uygulamak için kullanılabilecek üç sınıf sağlar -

• .img-rounded- Resme yuvarlatılmış köşeler vermek için border-radius: 6px ekler .

• .img-circle- border-radius: 500px ekleyerek tüm resmi yuvarlak hale getirir .

• .img-thumbnail - biraz dolgu ve gri bir kenarlık ekler -

Aşağıdaki örnek bunu göstermektedir -

<img src = "/bootstrap/images/download.png" class = "img-rounded">
<img src = "/bootstrap/images/download.png" class = "img-circle">
<img src = "/bootstrap/images/download.png" class = "img-thumbnail">

Bu bölümde, Bootstrap'te kullanışlı olabilecek bazı yardımcı sınıflar anlatılmaktadır.

Kapat simgesi

Kipler ve uyarılar gibi içerikleri kapatmak için genel kapat simgesini kullanın. Sınıfı kullanclose yakın simgesini almak için.

<p>Close Icon Example
   <button type = "button" class = "close" aria-hidden = "true">
      &times;
   </button>
</p>

Şapka

Açılır menü işlevini ve yönünü belirtmek için düzeltme işaretlerini kullanın. Bu işlevselliği elde etmek için sınıfı kullanıncaret bir <span> öğesi ile.

<p>Caret Example<span class = "caret"></span></p>

Hızlı Yüzer

Sınıf ile bir öğeyi sola veya sağa kaydırabilirsiniz pull-left veya pull-right sırasıyla aşağıdaki örnek bunu göstermektedir.

<div class = "pull-left">Quick Float to left</div>
<div class = "pull-right">Quick Float to right</div>

Gezinme çubuklarındaki bileşenleri yardımcı program sınıflarıyla hizalamak için şunu kullanın: .navbar-left veya .navbar-rightyerine. Ayrıntılar için gezinme çubuğu bölümüne bakın.

Merkez İçerik Blokları

Sınıfı kullan center-block bir öğeyi merkeze ayarlamak için.

<div class = "row">
   <div class = "center-block" style = "width:200px; background-color:#ccc;">
      This is an example for center-block
   </div>
</div>

Clearfix

Herhangi bir öğenin kayan noktasını temizlemek için .clearfix sınıf.

<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;">
   
   <div class = "pull-left" style = "background:#58D3F7;">
      Quick Float to left
   </div>
   
   <div class = "pull-right" style = "background: #DA81F5;">
      Quick Float to right
   </div>
   
</div>

İçeriği Gösterme ve Gizleme

Sınıfların kullanımıyla bir öğeyi gösterilmeye veya gizlenmeye (ekran okuyucular dahil) zorlayabilirsiniz. .show ve .hidden.

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   
   <div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
      This is an example for show class
   </div>
   
   <div class = "hidden" style = "width:200px; background-color:#ccc;">
      This is an example for hide class
   </div>
   
</div>

Ekran Okuyucu İçeriği

Bir öğeyi, sınıftaki ekran okuyucular dışında tüm cihazlara gizleyebilirsiniz. .sr-only.

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   <form class = "form-inline" role = "form">
      
      <div class = "form-group">
         <label class = "sr-only" for = "email">Email address</label>
         <input type = "email" class = "form-control" placeholder = "Enter email">
      </div>
      
      <div class = "form-group">
         <label class = "sr-only" for = "pass">Password</label>
         <input type = "password" class = "form-control" placeholder = "Password">
      </div>
      
   </form>
</div>

Burada, her iki giriş türünün etiketinin sınıfa atandığını görebiliriz sr-onlybu nedenle etiketler yalnızca ekran okuyucular tarafından görülebilir.

Bootstrap, daha hızlı mobil uyumlu geliştirme için birkaç yardımcı sınıf sağlar. Bunlar, büyük, küçük ve orta büyüklükteki cihazlarla birlikte medya sorgusu yoluyla içeriği cihaza göre göstermek ve gizlemek için kullanılabilir.

Bunları idareli kullanın ve aynı sitenin tamamen farklı sürümlerini oluşturmaktan kaçının. Responsive utilities are currently only available for block and table toggling.

Baskı Sınıfları

Aşağıdaki tablo baskı sınıflarını listeler. İçeriği yazdırmak üzere değiştirmek için bunları kullanın.

Misal

Aşağıdaki örnek, yukarıda listelenen yardımcı sınıfların kullanımını gösterir. Duyarlı yardımcı program sınıflarını test etmek için tarayıcınızı yeniden boyutlandırın veya örneği farklı cihazlara yükleyin.

<div class = "container" style = "padding: 40px;">
   <div class = "row visible-on">
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-xs">Extra small</span>
         <span class = "visible-xs">✔ Visible on x-small</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-sm">Small</span>
         <span class = "visible-sm">✔ Visible on small</span>
      </div>
      
      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-md">Medium</span>
         <span class = "visible-md">✔ Visible on medium</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-lg">Large</span>
         <span class = "visible-lg">✔ Visible on large</span>
      </div>
      
   </div>  
</div>

Checkmarks , öğenin mevcut görüntü alanınızda görünür olduğunu belirtir.

Bu bölümde Glyphicons, kullanımı ve bazı örnekler tartışılacaktır. Bootstrap, yazı tipi biçiminde 200 glif içerir. Şimdi Glyphicons'un ne olduğunu anlayalım.

Glifikonlar nedir?

Glifler, web projelerinizde kullanabileceğiniz simge yazı tipleridir. Glyphicons Buçuklukları ücretsiz değildir ve lisans gerektirir, ancak yaratıcıları bunları Bootstrap projeleri için ücretsiz olarak kullanıma sunmuştur .

"Bir teşekkür olarak tavsiye edilir, mümkün olduğunda GLYPHICONS'a isteğe bağlı bir bağlantı eklemenizi rica ederiz". - Bootstrap Belgeleri

Glyphicons nerede bulunur?

Artık Bootstrap 3.x sürümünü indirdiğimize ve dizin yapısını Ortam Kurulumu bölümünden anladığımıza göre , glifler fontlar klasöründe bulunabilir. Bu, aşağıdaki dosyaları içerir -

• glyphicons-halflings-regular.eot
• glyphicons-halflings-regular.svg
• glyphicons-halflings-regular.ttf
• glyphicons-halflings-regular.woff

İlişkili CSS kuralları, dist klasörünün css klasörü içindeki bootstrap.css ve bootstrap-min.css dosyalarında mevcuttur . Mevcut glifleri bu GLYPHICONS bağlantısında görebilirsiniz .

Kullanım

Simgeleri kullanmak için, kodunuzun hemen her yerinde aşağıdaki kodu kullanmanız yeterlidir. Düzgün dolgu için simge ve metin arasında bir boşluk bırakın.

<span class = "glyphicon glyphicon-search"></span>

Aşağıdaki örnek bunu göstermektedir -

<p>
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes-alt"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order-alt"></span>
   </button>
</p>

<button type = "button" class = "btn btn-default btn-lg">
   <span class = "glyphicon glyphicon-user"></span>
   
   User
</button>

<button type = "button" class = "btn btn-default btn-sm">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>

<button type ="button" class = "btn btn-default btn-xs">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>

Bu bölümde Bootstrap açılır menüleri vurgulanacaktır. Açılır menüler, bağlantıları liste biçiminde görüntülemek için değiştirilebilir, bağlamsal menülerdir. Bu, açılır JavaScript eklentisi ile etkileşimli hale getirilebilir .

Açılır menüyü kullanmak için, açılır menüyü sınıf içinde kaydırmanız yeterlidir .dropdownAşağıdaki örnek, temel bir açılır menüyü göstermektedir -

<div class = "dropdown">
   
   <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
      Topics
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Java</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">
            Data Communication/Networking
         </a>
      </li>
      
      <li role = "presentation" class = "divider"></li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
      </li>
   </ul>
   
</div>

Seçenekler

Hizalama

Sınıfı ekleyerek açılır menüyü sağa hizalayın .pull-right -e .dropdown-menu. Aşağıdaki örnek bunu göstermektedir -

<div class = "dropdown">
   
   <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
      Topics
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu1">
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Java</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">
            Data Communication/Networking
         </a>
      </li>
      
      <li role = "presentation" class = "divider"></li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
      </li>
   </ul>
   
</div>

Başlıklar

Sınıfı kullanarak herhangi bir açılır menüdeki eylem bölümlerini etiketlemek için bir başlık ekleyebilirsiniz. dropdown-header. Aşağıdaki örnek bunu göstermektedir -

<div class = "dropdown">
   
   <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
      Topics
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
      <li role = "presentation" class = "dropdown-header">Dropdown header</li>
      
      <li role = "presentation" >
         <a role = "menuitem" tabindex = "-1" href = "#">Java</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">
            Data Communication/Networking
         </a>
      </li>
      
      <li role = "presentation" class = "divider"></li>
      <li role = "presentation" class = "dropdown-header">Dropdown header</li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
      </li>
   </ul>
   
</div>

Düğme grupları, birden çok düğmenin tek bir hatta istiflenmesine izin verir. Bu, hizalama düğmeleri gibi öğeleri birlikte yerleştirmek istediğinizde kullanışlıdır. Bootstrap Düğme Eklentisi ile isteğe bağlı JavaScript radyosu ve onay kutusu stili davranışı ekleyebilirsiniz .

Aşağıdaki tablo, Bootstrap'in düğme gruplarını kullanmak için sağladığı önemli sınıfları özetlemektedir -

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button1</button>
   <button type = "button" class = "btn btn-default">Button2</button>
</div>

<div class = "btn-toolbar" role = "toolbar">
   <div class = "btn-group">...</div>
   <div class = "btn-group">...</div>
</div>

<div class = "btn-group btn-group-lg">...</div>
<div class = "btn-group btn-group-sm">...</div>
<div class = "btn-group btn-group-xs">...</div>

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

Temel Düğme Grubu

Aşağıdaki örnek, sınıfın kullanımını gösterir .btn-group yukarıdaki tabloda tartışılmıştır -

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
   
</div>

Düğme Araç Çubuğu

Aşağıdaki örnek, sınıfın kullanımını gösterir .btn-toolbar yukarıdaki tabloda tartışılmıştır -

<div class = "btn-toolbar" role = "toolbar">
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 1</button>
      <button type = "button" class = "btn btn-default">Button 2</button>
      <button type = "button" class = "btn btn-default">Button 3</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 4</button>
      <button type = "button" class = "btn btn-default">Button 5</button>
      <button type = "button" class = "btn btn-default">Button 6</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 7</button>
      <button type = "button" class = "btn btn-default">Button 8</button>
      <button type = "button" class = "btn btn-default">Button 9</button>
   </div>
   
</div>

Düğme Boyutu

Aşağıdaki örnek, sınıfın kullanımını gösterir .btn-group-* yukarıdaki tabloda tartışılmıştır -

<div class = "btn-group btn-group-lg">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
</div>

<div class = "btn-group btn-group-sm">
   <button type = "button" class = "btn btn-default">Button 4</button>
   <button type = "button" class = "btn btn-default">Button 5</button>
   <button type = "button" class = "btn btn-default">Button 6</button>
</div>

<div class = "btn-group btn-group-xs">
   <button type = "button" class = "btn btn-default">Button 7</button>
   <button type = "button" class = "btn btn-default">Button 8</button>
   <button type = "button" class = "btn btn-default">Button 9</button>
</div>

Yuvalama

Düğme gruplarını başka bir düğme grubuna yerleştirebilirsiniz, yani bir .btn-group bir başkasının içinde .btn-group . Bu, açılır menülerin bir dizi düğmeyle karıştırılmasını istediğinizde yapılır.

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>

Dikey Düğme Grubu

Aşağıdaki örnek, sınıfın kullanımını gösterir .btn-group-vertical yukarıdaki tabloda tartışılmıştır -

<div class = "btn-group-vertical">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group-vertical">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>

Bu bölüm, Bootstrap sınıflarını kullanarak düğmelere nasıl açılır menü ekleneceğini tartışacaktır. Bir düğmeye açılır menü eklemek için, düğmeyi ve açılır menüyü bir.btn-group. Düğmenin bir açılır menü olduğunun göstergesi olarak hareket etmek için <span class = "caret"> </span> de kullanabilirsiniz.

Aşağıdaki örnek, temel bir tek düğme açılır menülerini göstermektedir -

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
      Default 
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
      Primary 
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
   
</div>

Bölünmüş Düğme Açılır Menüleri

Bölünmüş düğme açılır listeleri, açılır düğmeyle aynı genel stili kullanır, ancak açılır menü ile birlikte bir birincil eylem ekler. Bölme düğmelerinin birincil eylemi solda ve sağda açılır menüyü görüntüleyen bir geçişe sahiptir.

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Default</button>
   
   <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
      <span class = "caret"></span>
      <span class = "sr-only">Toggle Dropdown</span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary">Primary</button>
   
   <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
      <span class = "caret"></span>
      <span class = "sr-only">Toggle Dropdown</span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

Düğme Açılır Kutu Boyutu

Açılır menüleri herhangi bir düğme boyutunda kullanabilirsiniz - .btn-large, .btn-sm, veya .btn-xs.

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default dropdown-toggle btn-lg" data-toggle = "dropdown">
      Default
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary dropdown-toggle btn-sm" data-toggle = "dropdown">
      Primary
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-success dropdown-toggle btn-xs" data-toggle = "dropdown">
      Success
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
   
</div>

Dropup Varyasyonu

Menüler ayrıca aşağıya doğru açılmadan açılır. Bunu başarmak için basitçe ekleyin.dropup ebeveyne .btn-group konteyner.

<div class = "row" style = "margin-left:50px; margin-top:200px">
   
   <div class = "btn-group dropup">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Default
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu" role = "menu">
         <li><a href = "#">Action</a></li>
         <li><a href = "#">Another action</a></li>
         <li><a href = "#">Something else here</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
   </div>
   
   <div class = "btn-group dropup">
      <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
         Primary
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu" role = "menu">
         <li><a href = "#">Action</a></li>
         <li><a href = "#">Another action</a></li>
         <li><a href = "#">Something else here</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
   </div>
   
</div>

Bu bölüm, Bootstrap'in desteklediği bir özellik olan Giriş Gruplarını açıklamaktadır. Giriş grupları, genişletilmiş Form Denetimleridir . Giriş gruplarını kullanarak, metin tabanlı girişlerin başına kolayca metin veya düğme ekleyebilirsiniz.

Bir giriş alanına önceden eklenen ve eklenen içeriği ekleyerek, kullanıcının girişine ortak öğeler ekleyebilirsiniz. Örneğin, dolar simgesi, Twitter kullanıcı adı için @ veya uygulama arayüzünüz için ortak olabilecek başka herhangi bir şey ekleyebilirsiniz.

Bir öğenin başına veya sonuna eklemek için .form-control-

• Sınıf ile bir <div> içine sarın .input-group

• Bir sonraki adım olarak, aynı <div> içine, fazladan içeriğinizi bir <span> ile sınıfın içine yerleştirin .input-group-addon.

• Şimdi bu <span> <input> öğesinin önüne veya arkasına yerleştirin.

Tarayıcılar arası uyumluluk için, WebKit tarayıcılarında tam olarak biçimlendirilemeyecekleri için burada <select> öğelerini kullanmaktan kaçının. Ayrıca, grupları oluşturmak için giriş grubu sınıflarını doğrudan uygulamayın. Giriş grubu, yalıtılmış bir bileşendir.

Temel Giriş Grubu

Aşağıdaki örnek, temel giriş grubunu gösterir -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "twitterhandle">
      </div>
		
      <br>

      <div class = "input-group">
         <input type = "text" class = "form-control">
         <span class = "input-group-addon">.00</span>
      </div>
		
      <br>
      
      <div class = "input-group">
         <span class = "input-group-addon">$</span>
         <input type = "text" class =" form-control">
         <span class = "input-group-addon">.00</span>
      </div>
   </form>
   
</div>

Giriş Grubu Boyutlandırma

Giriş gruplarının boyutunu, göreli form boyutlandırma sınıfları ekleyerek değiştirebilirsiniz. .input-group-lg, input-group-sm, input-group-xs için .input-groupkendisi. İçindeki içerik otomatik olarak yeniden boyutlandırılacaktır.

Aşağıdaki örnekler bunu göstermektedir -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group input-group-lg">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
		
      <br>

      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
		
      <br>

      <div class = "input-group input-group-sm">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
   </form>
   
</div>

Onay Kutuları ve Radyo Eklentileri

Aşağıdaki örnekte gösterildiği gibi metin yerine radyo düğmelerini ve onay kutularının başına veya sonuna ekleyebilirsiniz -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-addon">
                  <input type = "checkbox">
               </span>
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-addon">
                  <input type = "radio">
               </span>
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Düğme Eklentileri

Hatta giriş gruplarında düğmeleri önceden veya ekleyebilirsiniz. Onun yerine.input-group-addon sınıf, sınıf kullanmanız gerekecek .input-group-btndüğmeleri sarmak için. Bu, geçersiz kılınamayan varsayılan tarayıcı stilleri nedeniyle gereklidir. Aşağıdaki örnekler bunu göstermektedir -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <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">
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               <input type = "text" class = "form-control">
               
               <span class = "input-group-btn">
                  <button class = "btn btn-default" type = "button">
                     Go!
                  </button>
               </span>
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Açılır Menü İçeren Düğmeler

Giriş gruplarında açılır menülere sahip düğmeler eklemek, düğmeyi ve açılır menüyü bir .input-group-btn aşağıdaki örnekte gösterildiği gibi sınıf -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <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">
                     DropdownMenu 
                     <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 class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
               </div><!-- /btn-group -->
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <input type = "text" class = "form-control">
               <div class = "input-group-btn">
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown">
                     DropdownMenu 
                     <span class = "caret"></span>
                  </button>
                  
                  <ul class = "dropdown-menu pull-right">
                     <li><a href = "#">Action</a></li>
                     <li><a href = "#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
               </div><!-- /btn-group -->
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Parçalı Düğmeler

Giriş gruplarındaki düğme açılır listelerini bölümlere ayırmak için, açılır düğmeyle aynı genel stili kullanın, ancak aşağıdaki örnekte görülebileceği gibi açılır menüyle birlikte bir birincil eylem ekleyin -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <div class = "input-group-btn">
                  <button type = "button" class = "btn btn-default" 
                     tabindex = "-1">Dropdown Menu</button>
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown" tabindex = "-1">
                     <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 class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
                  
               </div><!-- /btn-group -->
               <input type = "text" class = "form-control">
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               <input type = "text" class = "form-control">
               <div class = "input-group-btn">
                  
                  <button type = "button" class = "btn btn-default" tabindex = "-1">
                     Dropdown Menu
                  </button>
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown" tabindex = "-1">
                     
                     <span class = "caret"></span>
                     <span class = "sr-only">Toggle Dropdown</span>
                  </button>
                  
                  <ul class = "dropdown-menu pull-right">
                     <li><a href = "#">Action</a></li>
                     <li><a href = "#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
               
               </div><!-- /btn-group -->
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Bootstrap, gezinme öğelerini şekillendirmek için birkaç farklı seçenek sunar. Hepsi aynı biçimlendirmeyi ve temel sınıfı paylaşıyor,.nav. Bootstrap ayrıca işaretlemeyi ve durumları paylaşmak için bir yardımcı sınıf sağlar. Her stil arasında geçiş yapmak için değiştirici sınıflarını değiştirin.

Tablolu Gezinme veya Sekmeler

Sekmeli bir gezinme menüsü oluşturmak için -

• Temel sınıfıyla temel bir sırasız listeyle başlayın. .nav

• Sınıf ekleyin .nav-tabs.

Aşağıdaki örnek bunu göstermektedir -

<p>Tabs Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Hap Navigasyonu

Temel Haplar

Sekmeleri haplara dönüştürmek için, yukarıdakiyle aynı adımları izleyin, sınıfı kullanın .nav-pills onun yerine .nav-tabs.

Aşağıdaki örnek bunu göstermektedir -

<p>Pills Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Dikey Haplar

Sınıfı kullanarak hapları dikey olarak istifleyebilirsiniz .nav-stacked sınıflarla birlikte - .nav, .nav-pills.

Aşağıdaki örnek bunu göstermektedir -

<p>Vertical Pills Example</p>

<ul class = "nav nav-pills nav-stacked">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Yaslanmış Gezinme

Sınıf kullanarak 768 pikselden daha geniş ekranlarda ebeveynleri ile eşit genişlikte sekme veya hap yapabilirsiniz .nav-justified ile birlikte .nav, .nav-tabs veya .nav, .nav-pillssırasıyla. Daha küçük ekranlarda gezinme bağlantıları üst üste dizilir.

Aşağıdaki örnek bunu göstermektedir -

<p>Justified Nav Elements Example</p>

<ul class = "nav nav-pills nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>
<br>

<ul class = "nav nav-tabs nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Devre Dışı Bağlantılar

Her biri için .nav sınıflar, eklerseniz .disabled sınıf, aynı zamanda devre dışı bırakan gri bir bağlantı oluşturacaktır. :hover aşağıdaki örnekte gösterildiği gibi durumu -

<p>Disabled Link Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   
   <li class = "disabled"><a href = "#">iOS(disabled link)</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   
   <li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Bu sınıf, <a> 'nin işlevselliğini değil sadece görünümünü değiştirecektir. Buradaki bağlantıları devre dışı bırakmak için özel JavaScript kullanın.

Açılır menüler

Gezinme menüleri, açılır menülerle benzer bir sözdizimi paylaşır. Varsayılan olarak, sırasız bir listeyi bir liste öğesiyle tetiklemek için bazı veri özellikleriyle birlikte çalışan bir bağlantıya sahip bir liste öğeniz vardır..dropdown-menu sınıf.

Açılır Menü İçeren Sekmeler

Sekmeye açılır menü eklemek için -

• Temel sınıfıyla temel bir sırasız listeyle başlayın. .nav

• Sınıfı ekleyin .nav-tabs.

• Şimdi bir sırasız liste ekleyin .dropdown-menu sınıf.

<p>Tabs With Dropdown Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java 
         <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

Açılır Tabletler

Aynı şeyi haplarla yapmak için, .nav-tabs ile sınıf .nav-pills aşağıdaki örnekte gösterildiği gibi.

<p>Pills With Dropdown Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

Gezinti çubuğu, Bootstrap sitelerinin öne çıkan özelliklerinden biridir. Gezinme çubukları, uygulamanız veya siteniz için gezinme başlıkları görevi gören duyarlı 'meta' bileşenlerdir. Gezinme çubukları, mobil görünümlerde daralır ve mevcut görüntü alanı genişliği arttıkça yatay hale gelir. Gezinme çubuğu, özünde site adları ve temel gezinme için stil içerir.

Varsayılan Navbar

Varsayılan bir gezinme çubuğu oluşturmak için -

• Sınıfları ekleyin .navbar, .navbar-default <nav> etiketine.

• Ekle role = "navigation" erişilebilirliğe yardımcı olmak için yukarıdaki öğeye.

• Bir başlık sınıfı ekleyin .navbar-header<div> öğesine. Sınıflı bir <a> öğesi ekleyinnavbar-brand. Bu, metne biraz daha büyük bir boyut verecektir.

• Gezinme çubuğuna bağlantılar eklemek için, aşağıdaki sınıfları içeren sırasız bir liste ekleyin: .nav, .navbar-nav.

Aşağıdaki örnek bunu göstermektedir -

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
			
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

Duyarlı Navbar

Gezinme çubuğuna duyarlı özellikler eklemek için, daraltılmasını istediğiniz içeriğin sınıflarla bir <div> içine sarılması gerekir .collapse, .navbar-collapse. Çöken doğa, sınıfına sahip bir düğme tarafından tetiklenir..navbar-toggleve sonra iki veri öğesi içerir. İlk,data-toggle, JavaScript'e düğmeyle ne yapacağını söylemek için kullanılır ve ikincisi, data-target, hangi öğenin değiştirileceğini belirtir. Sonra bir sınıfla .icon-barhamburger düğmesi dediğimiz şeyi yaratın. Bu, içindeki öğeleri değiştirir. .nav-collapse<div>. Bu özelliğin çalışması için, Bootstrap Collapse Plugin'i eklemeniz gerekir .

Aşağıdaki örnek bunu göstermektedir -

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <button type = "button" class = "navbar-toggle" 
         data-toggle = "collapse" data-target = "#example-navbar-collapse">
         <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 = "#">TutorialsPoint</a>
   </div>
   
   <div class = "collapse navbar-collapse" id = "example-navbar-collapse">
	
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
			
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

Navbar'daki Formlar

Bölüm Önyükleme Formları'ndaki varsayılan sınıf tabanlı formları , gezinme çubuğundaki formları kullanmak yerine,.navbar-formsınıf. Bu, formun dar görüntü pencerelerinde uygun dikey hizalamasını ve daraltılmış davranışını sağlar. Gezinme çubuğu içeriğinin neresinde olduğuna karar vermek için hizalama seçeneklerini (Bileşen hizalama bölümünde açıklanmıştır) kullanın.

Aşağıdaki örnek bunu göstermektedir -

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <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>    
   </div>
   
</nav>

Navbar'daki düğmeler

Sınıfı kullanarak düğmeler ekleyebilirsiniz .navbar-btn navbar'da dikey olarak ortalamak için bir <form> içinde bulunmayan <button> öğelerine. .navbar-btn <a> ve <input> öğelerinde kullanılabilir.

Kullanmayın .navbar-btnne de içindeki <a> öğelerindeki standart düğme sınıfları.navbar-nav.

Aşağıdaki örnek bunu göstermektedir -

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <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</button>
      </form>  
		
      <button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
   </div>
</nav>

Navbar'daki metin

Bir öğedeki metin dizelerini sarmak için sınıfı kullanın .navbar-text. Bu, genellikle doğru satır aralığı ve renk için <p> etiketi ile kullanılır. Aşağıdaki örnek bunu göstermektedir -

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <p class = "navbar-text">Signed in as Thomas</p>
   </div>
</nav>

Nav olmayan bağlantılar

Normal navbar gezinme bileşeninde bulunmayan standart bağlantıları kullanmak istiyorsanız, o zaman sınıfı kullanın navbar-link aşağıdaki örnekte gösterildiği gibi varsayılan ve ters gezinme çubuğu seçenekleri için uygun renkler eklemek için -

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <p class = "navbar-text navbar-right">
         Signed in as 
         <a href = "#" class = "navbar-link">Thomas</a>
      </p>
   </div>
</nav>

Bileşen Hizalama

Yardımcı sınıfları kullanarak gezinme çubuğunda gezinme bağlantıları, formlar, düğmeler veya metin gibi bileşenleri sola veya sağa hizalayabilirsiniz..navbar-left veya .navbar-right. Her iki sınıf da belirtilen yönde bir CSS kayan nokta ekler. Aşağıdaki örnek bunu göstermektedir -

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      
      <!--Left Align-->
      <ul class = "nav navbar-nav navbar-left">
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
      
      <form class = "navbar-form navbar-left" role = "search">
         <button type = "submit" class = "btn btn-default">Left align-Submit Button</button>
      </form> 
      
      <p class = "navbar-text navbar-left">Left align-Text</p>
      
      <!--Right Align-->
      <ul class = "nav navbar-nav navbar-right">
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
      
      <form class = "navbar-form navbar-right" role = "search">
         <button type = "submit" class = "btn btn-default">
            Right align-Submit Button
         </button>
      </form> 
		
      <p class = "navbar-text navbar-right">Right align-Text</p>
      
   </div>
</nav>

Üste Sabit

Bootstrap gezinme çubuğu, konumlandırmada dinamik olabilir. Varsayılan olarak, HTML'deki yerleşimine göre konumlandırmasını alan blok düzeyinde bir öğedir. Birkaç yardımcı sınıfla, bunu sayfanın üstüne veya altına yerleştirebilir veya sayfayla birlikte statik olarak kaydırmasını sağlayabilirsiniz.

Gezinti çubuğunun en üste sabitlenmesini istiyorsanız, sınıf ekleyin .navbar-fixed-top için .navbar class. Aşağıdaki örnek bunu göstermektedir -

Gezinme çubuğunun sayfanın gövdesindeki diğer içeriğin üzerinde oturmasını önlemek için, <body> etiketine en az 50 piksel dolgu ekleyin veya kendi değerlerinizi deneyin.

<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

Alta Sabit

Gezinti çubuğunun sayfanın altına sabitlenmesini istiyorsanız, sınıf ekleyin .navbar-fixed-bottom için .navbar class. Aşağıdaki örnek bunu göstermektedir -

<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class ="caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>

Statik Üst

Sayfayla birlikte kayan bir gezinme çubuğu oluşturmak için, .navbar-static-topsınıf. Bu sınıf, <body> öğesine dolgu eklemeyi gerektirmez.

<nav class = "navbar navbar-default navbar-static-top" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
				
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>

Ters Navbar

Siyah arka planlı ve beyaz metinli ters bir gezinme çubuğu oluşturmak için, .navbar-inverse sınıf .navbar aşağıdaki örnekte gösterildiği gibi sınıf -

Gezinme çubuğunun sayfanın gövdesindeki diğer içeriğin üzerinde oturmasını önlemek için, <body> etiketine en az 50 piksel dolgu ekleyin veya kendi değerlerinizi deneyin.

<nav class = "navbar navbar-inverse" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>

Ekmek kırıntıları, bir site için hiyerarşi tabanlı bilgileri göstermenin harika bir yoludur. Bloglar söz konusu olduğunda, kırıntılar yayınlanma tarihlerini, kategorileri veya etiketleri gösterebilir. Gezinme hiyerarşisi içinde geçerli sayfanın konumunu gösterirler.

Bootstrap'teki bir ekmek kırıntısı, yalnızca bir sınıf içeren sırasız bir listedir. .breadcrumb. Ayırıcı, aşağıdaki sınıf aracılığıyla CSS (bootstrap.min.css) tarafından otomatik olarak eklenir -

.breadcrumb > li + li:before {
   color: #CCCCCC;
   content: "/ ";
   padding: 0 5px;
}

Aşağıdaki örnek, kırıntıları göstermektedir -

<ol class = "breadcrumb">
   <li><a href = "#">Home</a></li>
   <li><a href = "#">2013</a></li>
   <li class = "active">November</li>
</ol>

Bu bölümde, Bootstrap'in desteklediği sayfalandırma özelliği anlatılmaktadır. Sayfalandırma, sıralanmamış bir liste, diğer birçok arayüz öğesi gibi Bootstrap tarafından yönetilir.

Sayfalandırma

Aşağıdaki tablo, Bootstrap'in sayfalandırmayı işlemek için sağladığı sınıfları listeler.

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   .......
</ul>

<ul class = "pagination">
   <li class = "disabled"><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1<span class = "sr-only">(current)</span></a></li>
   .......
</ul>

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

Varsayılan Sayfalandırma

Aşağıdaki örnek, sınıfın kullanımını gösterir .pagination yukarıdaki tabloda tartışılmıştır -

<ul class = "pagination">
   <li><a href = "#">&laquo;</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 = "#">&raquo;</a></li>
</ul>

Eyaletler

Aşağıdaki örnek, sınıfın kullanımını gösterir .disabled, .active yukarıdaki tabloda tartışılmıştır -

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1</a></li>
   <li class = "disabled"><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 = "#">&raquo;</a></li>
</ul>

Boyutlandırma

Aşağıdaki örnek, boyutlandırma için sınıfların kullanımını gösterir, .pagination-* yukarıdaki tabloda tartışılmıştır -

<ul class = "pagination pagination-lg">
   <li><a href = "#">&laquo;</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 = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination">
   <li><a href = "#">&laquo;</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 = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination pagination-sm">
   <li><a href = "#">&laquo;</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 = "#">&raquo;</a></li>
</ul>

Çağrı cihazı

Metnin ötesine geçen basit sayfalandırma bağlantıları oluşturmanız gerekirse, çağrı cihazı oldukça iyi çalışabilir. Sayfalandırma bağlantıları gibi, sayfalayıcı da sırasız bir listedir. Varsayılan olarak bağlantılar ortalanmıştır. Aşağıdaki tablo Bootstrap'in çağrı cihazı için sağladığı sınıfları listeler.

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

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

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

Varsayılan Çağrı Cihazı

Aşağıdaki örnek, sınıfın kullanımını gösterir .pager yukarıdaki tabloda tartışılmıştır -

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

Hizalanmış Bağlantılar

Aşağıdaki örnek, hizalama için sınıfların kullanımını gösterir, .previous, .next yukarıdaki tabloda tartışılmıştır -

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

Eyaletler

Aşağıdaki örnek, sınıfın kullanımını gösterir .disabled yukarıdaki tabloda tartışılmıştır -

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

Bu bölüm Bootstrap etiketlerini kapsar. Etiketler, sayfalar için sayımlar, ipuçları veya başka biçimlendirme sunmak için harikadır. Sınıfı kullan.label etiketleri aşağıdaki örnekte gösterildiği gibi görüntülemek için -

<h1>Example Heading <span class = "label label-default">Label</span></h1>
<h2>Example Heading <span class =" label label-default">Label</span></h2>
<h3>Example Heading <span class = "label label-default">Label</span></h3>
<h4>Example Heading <span class = "label label-default">Label</span></h4>

Aşağıdaki gibi değiştirici sınıfları kullanarak etiketlerin görünümünü değiştirebilirsiniz: label-default, label-primary, label-success, label-info, label-warning, label-danger aşağıdaki örnekte gösterildiği gibi -

<span class = "label label-default">Default Label</span>
<span class = "label label-primary">Primary Label</span>
<span class = "label label-success">Success Label</span>
<span class = "label label-info">Info Label</span>
<span class = "label label-warning">Warning Label</span>
<span class = "label label-danger">Danger Label</span>

Bu bölümde Bootstrap rozetleri anlatılacaktır. Rozetler etiketlere benzer; temel fark, köşelerin daha yuvarlak olmasıdır.

Rozetler genellikle yeni veya okunmamış öğeleri vurgulamak için kullanılır. Rozetleri kullanmak için şunu ekleyin:<span class = "badge"> bağlantılara, Bootstrap gezinmelerine ve daha fazlasına.

Aşağıdaki örnek bunu göstermektedir -

<a href = "#">Mailbox <span class = "badge">50</span></a>

Yeni veya okunmamış öğe olmadığında, rozetler CSS'ler aracılığıyla :empty seçici, içinde içerik olmaması koşuluyla.

Etkin Gezinme Durumları

Rozetleri aktif hap durumlarına yerleştirebilir ve gezinmeleri listeleyebilirsiniz. Bunu yerleştirerek başarabilirsiniz<span class = "badge"> aşağıdaki örnekte gösterildiği gibi aktif bağlantılara -

<h4>Example for Active State in Pill </h4>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home <span class ="badge">42</span></a></li>
   <li><a href = "#">Profile</a></li>
   <li><a href = "#">Messages <span class = "badge">3</span></a></li>
</ul>

<br>

<h4>Example for Active State in navigations</h4>

<ul class = "nav nav-pills nav-stacked" style = "max-width: 260px;">
   <li class = "active">
      <a href = "#">
         <span class = "badge pull-right">42</span>
         Home
      </a>
   </li>
	
   <li><a href = "#">Profile</a></li>
	
   <li>
      <a href = "#">
         <span class = "badge pull-right">3</span>
         Messages
      </a>
   </li>
</ul>

Bu bölümde, Bootstrap'in desteklediği bir başka özellik olan Jumbotron tartışılacaktır. Adından da anlaşılacağı gibi, bu bileşen isteğe bağlı olarak başlıkların boyutunu artırabilir ve açılış sayfası içeriği için çok fazla kenar boşluğu ekleyebilir. Jumbotron'u kullanmak için -

• Sınıfı ile bir kapsayıcı <div> oluşturun .jumbotron.

• Daha büyük bir <h1> 'e ek olarak yazı tipi ağırlığı 200 piksele düşürülür.

Aşağıdaki örnek bunu göstermektedir -

<div class = "container">

   <div class = "jumbotron">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
   
</div>

Tam genişlikte ve yuvarlatılmış köşeleri olmayan bir jumbotron elde etmek için .jumbotron her şeyin dışında sınıf .container sınıflar ve bunun yerine bir .container aşağıdaki örnekte gösterildiği gibi içinde -

<div class = "jumbotron">
   
   <div class = "container">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
   
</div>

Sayfa başlığı, bir sayfadaki başlıkların etrafına uygun boşluklar eklemek için hoş bir özelliktir. Bu, özellikle birkaç gönderi başlığınızın olabileceği ve her birine ayrım eklemek için bir yola ihtiyaç duyduğunuz bir web sayfasında yararlıdır. Bir sayfa üstbilgisini kullanmak için, başlığınızı <div> içine bir sınıf.page-header -

<div class = "page-header">
   <h1>
      Example page header 
      <small>Subtext for header</small>
   </h1>
</div>

<p>This is a sample text.This is a sample text.This is a sample text. This is a sample text.</p>

Bu bölümde Bootstrap küçük resimleri anlatılmaktadır. Birçok site, görüntüleri, videoları, metinleri vb. Bir ızgaraya yerleştirmenin bir yoluna ihtiyaç duyar ve Bootstrap bunu küçük resimlerle yapmanın kolay bir yolunu sunar. Bootstrap kullanarak küçük resimler oluşturmak için -

• Sınıfıyla bir <a> etiketi ekleyin .thumbnail bir görüntünün etrafında.

• Bu, dört piksel dolgu ve gri bir kenarlık ekler.

• Fareyle üzerine gelindiğinde, hareketli bir parıltı görüntünün ana hatlarını çizer.

Aşağıdaki örnek, varsayılan bir küçük resmi göstermektedir -

<div class = "row">
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
</div>

Özel İçerik Ekleme

Artık temel bir küçük resme sahip olduğumuza göre, küçük resimlere başlıklar, paragraflar veya düğmeler gibi her türlü HTML içeriğini eklemek mümkün. Aşağıdaki adımları izleyin -

• Bir sınıfı olan <a> etiketini değiştirin. .thumbnail bir <div>.

• Bunun içine <div> ihtiyacınız olan her şeyi ekleyebilirsiniz. Bu bir <div> olduğundan, boyutlandırma için varsayılan yayılma temelli adlandırma kuralını kullanabiliriz.

• Birden fazla görüntüyü gruplamak istiyorsanız, bunları sırasız bir listeye yerleştirin, her liste öğesi sola kayar.

Aşağıdaki örnek bunu göstermektedir -

<div class = "row">
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</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 class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</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 class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</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 class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</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>

Bu bölümde uyarılar ve Bootstrap'in uyarılar için sağladığı sınıflar tartışılacaktır. Uyarılar, kullanıcıya mesajların stilini belirlemek için bir yol sağlar. Tipik kullanıcı eylemleri için bağlamsal geribildirim mesajları sağlarlar.

Uyarmak için isteğe bağlı bir kapat simgesi ekleyebilirsiniz. Satır içi kapatma için Alerts jQuery eklentisini kullanın .

Bir sarmalayıcı <div> oluşturarak ve bir sınıf ekleyerek temel bir uyarı ekleyebilirsiniz. .alert ve dört bağlamsal sınıftan biri (ör. .alert-success, .alert-info, .alert-warning, .alert-danger). Aşağıdaki örnek bunu göstermektedir -

<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>

İşten Çıkarma Uyarıları

Bir işten çıkarma uyarısı oluşturmak için -

• Bir sarmalayıcı <div> oluşturarak ve bir sınıf ekleyerek temel bir uyarı ekleyin .alert ve dört bağlamsal sınıftan biri (ör. .alert-success, .alert-info, .alert-warning, .alert-danger)

• Ayrıca isteğe bağlı ekleyin .alert-dismissable yukarıdaki <div> sınıfına.

• Bir kapat düğmesi ekleyin.

Aşağıdaki örnek bunu göstermektedir -

<div class = "alert alert-success alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Success! Well done its submitted.
</div>

<div class = "alert alert-info alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Info! take this info.
</div>

<div class = "alert alert-warning alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Warning ! Dont submit this.
</div>

<div class = "alert alert-danger alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Error ! Change few things.
</div>

Data-dismiss = "alert" data özniteliğiyle <button> öğesini kullandığınızdan emin olun .

Uyarılardaki Bağlantılar

Uyarılarda bağlantı almak için -

• Bir sarmalayıcı <div> oluşturarak ve bir sınıf ekleyerek temel bir uyarı ekleyin .alert ve dört bağlamsal sınıftan biri (ör. .alert-success, .alert-info, .alert-warning, .alert-danger)

• Kullan .alert-link Herhangi bir uyarıda eşleşen renkli bağlantıları hızla sağlamak için yardımcı program sınıfı.

<div class = "alert alert-success">
   <a href = "#" class = "alert-link">Success! Well done its submitted.</a>
</div>

<div class = "alert alert-info">
   <a href = "#" class = "alert-link">Info! take this info.</a>
</div>

<div class = "alert alert-warning">
   <a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
</div>

<div class = "alert alert-danger">
   <a href = "#" class = "alert-link">Error ! Change few things.</a>
</div>

Bu bölümde Bootstrap ilerleme çubukları anlatılmaktadır. İlerleme çubuklarının amacı, varlıkların yüklendiğini, devam ettiğini veya sayfadaki öğelerle ilgili gerçekleşen bir eylem olduğunu göstermektir.

İlerleme çubukları, bazı efektlerini elde etmek için CSS3 geçişlerini ve animasyonlarını kullanır. Bu özellikler, Internet Explorer 9 ve altı veya Firefox'un daha eski sürümlerinde desteklenmez. Opera 12, animasyonları desteklemez.

Varsayılan İlerleme Çubuğu

Temel bir ilerleme çubuğu oluşturmak için -

• Sınıfına sahip bir <div> ekleyin .progress.

• Sonra, yukarıdaki <div> içerisine, bir sınıf ile boş bir <div> ekleyin: .progress-bar.

• Yüzde olarak ifade edilen genişliğe sahip bir stil niteliği ekleyin. Örneğin, style = "% 60"; ilerleme çubuğunun% 60 olduğunu gösterir.

Aşağıda bir örnek görelim -

<div class = "progress">
   <div class = "progress-bar" role = "progressbar" aria-valuenow = "60" 
      aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Alternatif İlerleme Çubuğu

Farklı stillere sahip bir ilerleme çubuğu oluşturmak için -

• Sınıfına sahip bir <div> ekleyin .progress.

• Sonra, yukarıdaki <div> içerisine, bir sınıf ile boş bir <div> ekleyin: .progress-bar ve sınıf progress-bar-* nerede * olabilir success, info, warning, danger.

• Yüzde olarak ifade edilen genişliğe sahip bir stil niteliği ekleyin. Örneğin, style = "% 60"; ilerleme çubuğunun% 60 olduğunu gösterir.

Aşağıda bir örnek görelim -

<div class = "progress">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</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: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Çizgili İlerleme Çubuğu

Şeritli bir ilerleme çubuğu oluşturmak için -

• Sınıfına sahip bir <div> ekleyin .progress ve .progress-striped.

• Sonra, yukarıdaki <div> içerisine, bir sınıf ile boş bir <div> ekleyin: .progress-bar ve sınıf progress-bar-* nerede * olabilir success, info, warning, danger.

• Yüzde olarak ifade edilen genişliğe sahip bir stil niteliği ekleyin. Örneğin, style = "% 60"; ilerleme çubuğunun% 60 olduğunu gösterir.

Aşağıda bir örnek görelim -

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-info" role = "progressbar"
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Animasyonlu İlerleme Çubuğu

Animasyonlu bir ilerleme çubuğu oluşturmak için -

• Sınıfına sahip bir <div> ekleyin .progress ve .progress-striped. Ayrıca sınıf ekle.active -e .progress-striped.

• Sonra, yukarıdaki <div> içerisine, bir sınıf ile boş bir <div> ekleyin: .progress-bar.

• Yüzde olarak ifade edilen genişliğe sahip bir stil niteliği ekleyin. Örneğin, style = "% 60"; ilerleme çubuğunun% 60 olduğunu gösterir.

Bu, şeritleri sağdan sola hareketlendirecektir.

Aşağıda bir örnek görelim -

<div class = "progress progress-striped active">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Yığılmış İlerleme Çubuğu

Hatta birden fazla ilerleme çubuğu istifleyebilirsiniz. Birden çok ilerleme çubuğunu aynı yere yerleştirin.progress bunları aşağıdaki örnekte görüldüğü gibi istiflemek için -

<div class = "progress">
   
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
   
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
   
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
   
</div>

Bu bölümde Medya nesnesi anlatılmaktadır. Bunlar, metin içeriğinin yanında sola veya sağa hizalı bir görüntüye sahip çeşitli bileşen türlerini (blog yorumları, Tweetler vb.) Oluşturmak için soyut nesne stilleridir. Medya nesnesinin amacı, bu bilgi bloklarını geliştirmek için kodu büyük ölçüde kısaltmaktır.

Medya nesnelerinin (ışık işaretlemesi, kolay genişletilebilirlik) amacına, bazı basit işaretlemelere sınıflar uygulayarak ulaşılır. Medya nesnesinin iki biçimi vardır -

• .media - Bu sınıf, bir medya nesnesini (görüntüler, video ve ses) bir içerik bloğunun soluna veya sağına kaydırmaya izin verir.

• .media-list- Öğelerin sırasız bir listenin parçası olacağı bir liste hazırlıyorsanız, bir sınıf kullanın. yorum dizileri veya makale listeleri için kullanışlıdır.

Varsayılan medya nesnesinin aşağıda bir örneğini görelim -

<div class = "media">
   <a class = "pull-left" href = "#">
      <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
   </a>
   
   <div class = "media-body">
      <h4 class = "media-heading">Media heading</h4>
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
   </div>
</div>

<div class = "media">
   <a class = "pull-left" href = "#">
      <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
   </a>
   
   <div class = "media-body">
      <h4 class = "media-heading">Media heading</h4>
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      
      <div class = "media">
         <a class = "pull-left" href = "#">
            <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
         </a>
         
         <div class = "media-body">
            <h4 class = "media-heading">Media heading</h4>
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
         </div>
      </div>
   </div>
</div>

Bir medya listesi örneği görelim -

<ul class = "media-list">
   <li class = "media">
      <a class = "pull-left" href = "#">
         <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image">
      </a>
      
      <div class = "media-body">
         <h4 class = "media-heading">Media heading</h4>
			
         <p>
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
         </p>
         
         <!-- Nested media object -->
         <div class = "media">
            <a class = "pull-left" href = "#">
               <img class = "media-object" src = "/bootstrap/images/64.jpg" 
                  alt = "Generic placeholder image">
            </a>
            
            <div class = "media-body">
               <h4 class = "media-heading">Nested media heading</h4>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               
               <!-- Nested media object -->
               <div class = "media">
                  <a class = "pull-left" href = "#">
                     <img class = "media-object" src = "/bootstrap/images/64.jpg" 
                        alt = "Generic placeholder image">
                  </a>
                  
                  <div class = "media-body">
                     <h4 class = "media-heading">Nested media heading</h4>
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                  </div>
               </div>
            </div>
         </div>
         
         <!-- Nested media object -->
         <div class = "media">
            <a class = "pull-left" href = "#">
               <img class = "media-object" src = "/bootstrap/images/64.jpg"
                  alt = "Generic placeholder image">
            </a>
            
            <div class = "media-body">
               <h4 class = "media-heading">Nested media heading</h4>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
            </div>
         </div>
      </div>
   </li>
   
   <li class = "media">
      <a class = "pull-right" href = "#">
         <img class = "media-object" src = "/bootstrap/images/64.jpg" 
            alt = "Generic placeholder image">
      </a>
      
      <div class = "media-body">
         <h4 class = "media-heading">Media heading</h4>
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.
      </div>
   </li>
</ul>

Liste grubu bileşeninin amacı, listelerde karmaşık ve özelleştirilmiş içerik oluşturmaktır. Temel bir liste grubu elde etmek için -

• Sınıfı ekleyin .list-group <ul> öğesine.

• Sınıf ekleyin .list-group-item <li>.

Aşağıdaki örnek bunu göstermektedir -

<ul class = "list-group">
   <li class = "list-group-item">Free Domain Name Registration</li>
   <li class = "list-group-item">Free Window Space hosting</li>
   <li class = "list-group-item">Number of Images</li>
   <li class = "list-group-item">24*7 support</li>
   <li class = "list-group-item">Renewal cost per year</li>
</ul>

Liste Grubuna Rozet Ekleme

Rozetler bileşenini herhangi bir liste grubu öğesine ekleyebiliriz ve otomatik olarak sağ tarafa yerleştirilecektir. Sadece ekle<span class = "badge"><li> öğesi içinde. Aşağıdaki örnek bunu göstermektedir -

<ul class = "list-group">
   <li class = "list-group-item">Free Domain Name Registration</li>
   <li class = "list-group-item">Free Window Space hosting</li>
   <li class = "list-group-item">Number of Images</li>
   
   <li class = "list-group-item">
      <span class = "badge">New</span>
      24*7 support
   </li>
   
   <li class = "list-group-item">Renewal cost per year</li>
   
   <li class = "list-group-item">
      <span class = "badge">New</span>
      Disocunt Offer
   </li>
</ul>

Liste Grubu Öğelerini Bağlama

Liste öğeleri yerine bağlantı etiketlerini kullanarak liste gruplarını birbirine bağlayabiliriz. <ul> öğesi yerine <div> kullanmamız gerekiyor. Aşağıdaki örnek bunu göstermektedir -

<a href = "#" class = "list-group-item active">
   Free Domain Name Registration
</a>

<a href = "#" class = "list-group-item">24*7 support</a>
<a href = "#" class = "list-group-item">Free Window Space hosting</a>
<a href = "#" class = "list-group-item">Number of Images</a>
<a href = "#" class = "list-group-item">Renewal cost per year</a>

Liste Grubuna Özel İçerik Ekleyin

Yukarıdaki bağlantılı liste gruplarına herhangi bir HTML içeriği ekleyebiliriz. Aşağıdaki örnek bunu göstermektedir -

<div class = "list-group">
   <a href = "#" class = "list-group-item active">
      <h4 class = "list-group-item-heading">
         Starter Website Package
      </h4>
   </a>
   
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">
         Free Domain Name Registration
      </h4>
      
      <p class = "list-group-item-text">
         You will get a free domain registration with website pages.
      </p>
   </a>
   
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">
         24*7 support
      </h4>
      
      <p class = "list-group-item-text">
         We provide 24*7 support.
      </p>
   </a>
</div>

<div class = "list-group">
   <a href = "#" class = "list-group-item active">
      <h4 class = "list-group-item-heading">
         Business Website Package
      </h4>
   </a>
   
   <a href = "#" class="list-group-item">
      <h4 class = "list-group-item-heading">
         Free Domain Name Registration
      </h4>
      
      <p class = "list-group-item-text">
         You will get a free domain registration with website pages.
      </p>
   </a>
   
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">24*7 support</h4>
      <p class = "list-group-item-text">We provide 24*7 support.</p>
   </a>
</div>

Bu bölümde Bootstrap panelleri anlatılacaktır. Panel bileşenleri, DOM bileşeninizi bir kutuya koymak istediğinizde kullanılır. Temel bir panel elde etmek için, sadece sınıf ekleyin.panel<div> öğesine. Ayrıca sınıf ekle.panel-default aşağıdaki örnekte gösterildiği gibi bu öğeye -

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

Başlıklı Panel

Panel başlığı eklemenin iki yolu vardır -

• Kullanım .panel-heading panelinize kolayca başlık kapsayıcı eklemek için sınıf.

• <h1> - <h6> tuşlarını bir .panel-title Önceden biçimlendirilmiş bir başlık eklemek için sınıf.

Aşağıdaki örnek her iki yolu da göstermektedir -

<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 With title
      </h3>
   </div>
   
   <div class = "panel-body">
      Panel content
   </div>
</div>

Alt Bilgili Panel

<div> içeren bir sınıfa düğmeler veya ikincil metin kaydırarak panellere altbilgi ekleyebilirsiniz. .panel-footer. Aşağıdaki örnek bunu göstermektedir.

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <div class = "panel-footer">Panel footer</div>
</div>

Panel altbilgileri, ön planda olmaları amaçlanmadığı için bağlamsal varyasyonları kullanırken renkleri ve kenarlıkları devralmaz.

Panel Bağlamsal Alternatifler

Aşağıdaki gibi bağlamsal durum sınıflarını kullanın: panel-primary, panel-success, panel-info, panel-warning, panel-danger, bir paneli belirli bir bağlam için daha anlamlı hale getirmek için.

<div class = "panel panel-primary">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-success">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-info">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-warning">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-danger">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

Masalı Panel

Bir panel içinde kenarlıksız bir tablo elde etmek için sınıfı kullanın .tablepanelin içinde. Varsayalım ki içeren bir <div>.panel-body, tablonun üst kısmına ayırma için fazladan bir kenarlık ekliyoruz. İçeren <div> yoksa.panel-body, ardından bileşen kesintisiz olarak panel başlığından tabloya taşınır.

Aşağıdaki örnek bunu göstermektedir -

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">Panel Heading</div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

Liste grupları içeren panel

Liste gruplarını herhangi bir panele dahil edebilirsiniz. Sınıf ekleyerek bir panel oluşturun.panel<div> öğesine. Ayrıca sınıf ekle.panel-defaultbu elemente. Şimdi bu panele liste gruplarınızı ekleyin. Liste Grupları bölümünden bir liste grubu oluşturmayı öğrenebilirsiniz .

<div class = "panel panel-default">
   <div class ="panel-heading">Panel heading</div>
   
   <div class = "panel-body">
      <p>This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content.</p>
   </div>
   
   <ul class = "list-group">
      <li class = "list-group-item">Free Domain Name Registration</li>
      <li class = "list-group-item">Free Window Space hosting</li>
      <li class = "list-group-item">Number of Images</li>
      <li class = "list-group-item">24*7 support</li>
      <li class = "list-group-item">Renewal cost per year</li>
   </ul>
</div>

Kuyu, <div> 'de içeriğin batmış veya sayfada içsel bir efekt olarak görünmesine neden olan bir kaptır. Bir kuyu oluşturmak için, kuyuda görünmesini istediğiniz içeriği sınıfını içeren bir <div> ile sarmalamanız yeterlidir..well. Aşağıdaki örnek, varsayılan bir kuyuyu göstermektedir -

<div class = "well">Hi, am in well !!</div>

Boyutlandırma

Kuyu boyutunu, isteğe bağlı sınıfları kullanarak değiştirebilirsiniz. well-lg veya well-lg. Bu sınıflar ile birlikte kullanılır.wellsınıf. Bunlar dolguyu etkiler ve sınıfa bağlı olarak kuyuyu büyütür veya küçültür.

<div class = "well well-lg">Hi, am in large well !!</div>
<div class = "well well-sm">Hi, am in small well !!</div>

Önceki bölümlerde tartışılan bileşenler Layout Componentssadece başlangıç. Bootstrap, özellikleri genişleten ve sitenize daha fazla etkileşim ekleyebilen 12 jQuery eklentisiyle birlikte gelir. Bootstrap'in JavaScript eklentilerini kullanmaya başlamak için gelişmiş bir JavaScript geliştiricisi olmanıza gerek yoktur. Bootstrap Data API kullanılarak, eklentilerin çoğu tek bir kod satırı yazmadan tetiklenebilir.

Bootstrap Eklentileri sitenize iki şekilde dahil edilebilir -

• Individually- Bootstrap'in bağımsız * .js dosyalarını kullanma. Bazı eklentiler ve CSS bileşenleri diğer eklentilere bağlıdır. Eklentileri tek tek eklerseniz, bu bağımlılıkları dokümanlarda kontrol ettiğinizden emin olun.

• Veya compiled (all at once)- bootstrap.js veya küçültülmüş bootstrap.min.js'yi kullanma . Her iki şekilde, her ikisini de denemeyin bootstrap.js ve bootstrap.min.js tek bir dosyada tüm eklentileri içerir.

Tüm eklentiler jQuery'ye bağlıdır. Dolayısıyla jQuery eklenti dosyalarından önce eklenmelidir. Kontrol bower.json jQuery sürümleri desteklenmektedir görmek için.

Veri Öznitelikleri

• Tüm Bootstrap eklentilerine, dahil olan Veri API'sı kullanılarak erişilebilir. Bu nedenle, eklenti özelliklerinden herhangi birini çağırmak için tek bir JavaScript satırı eklemenize gerek yoktur.

• Bazı durumlarda, Data API'nin bu işlevselliğinin kapatılması istenebilir. Veri API'sını kapatmanız gerekirse, aşağıdaki JavaScript satırını ekleyerek özniteliklerin bağlantısını kaldırabilirsiniz -

$(document).off('.data-api')

• Belirli / tek bir eklentiyi kapatmak için, eklentinin adını bunun gibi data-api ad alanıyla birlikte bir ad alanı olarak dahil edin -

$(document).off('.alert.data-api')

Programatik API

Bootstrap geliştiricileri, tüm eklentileri yalnızca JavaScript API aracılığıyla kullanabilmeniz gerektiğine inanıyor. Tüm genel API'ler tekil, zincirlenebilir yöntemlerdir ve örneğin, örneğin -

$(".btn.danger").button("toggle").addClass("fat")

Tüm yöntemler isteğe bağlı bir seçenek nesnesini, belirli bir yöntemi hedefleyen bir dizeyi veya aşağıda gösterildiği gibi hiçbir şeyi (varsayılan davranışa sahip bir eklenti başlatan) kabul eder -

// initialized with defaults
$("#myModal").modal() // initialized with no keyboard $("#myModal").modal({ keyboard: false })  

// initializes and invokes show immediately
$("#myModal").modal('show')

Her eklenti ayrıca ham yapıcısını bir Constructorözellik: $ .fn.popover.Constructor . Belirli bir eklenti örneğini almak istiyorsanız, onu doğrudan bir öğeden alın -

$('[rel = popover]').data('popover').

Çatışma yok

Bootstrap eklentileri bazen diğer UI çerçeveleriyle birlikte kullanılabilir. Bu durumlarda, bazen ad alanı çakışmaları meydana gelebilir. Bu çağrının üstesinden gelmek için.noConflict eklentide değerini geri döndürmek istiyorsunuz.

// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict() // give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton

Etkinlikler

Bootstrap, çoğu eklentinin benzersiz eylemleri için özel etkinlikler sağlar. Genellikle bu olaylar iki şekilde gelir -

• Infinitive form- Bu, bir olayın başlangıcında tetiklenir. Örneğin, gösteri . Infinitive olaylar, preventDefault işlevselliği sağlar. Bu, başlamadan önce bir eylemin yürütülmesini durdurma yeteneği sağlar.

$('#myModal').on('show.bs.modal', function (e) {
   // stops modal from being shown
   if (!data) return e.preventDefault() 
})

• Past participle form- Bu, bir eylemin tamamlanmasıyla tetiklenir. Örneğin gösterilmiştir.

Geçiş eklentisi basit bir geçiş efekti sağlar.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, ihtiyacınız olacak transition.jsdiğer JS dosyalarıyla birlikte. Önyükleme Eklentilerine Genel Bakış bölümünde bahsedildiği gibi , bootstrap.js veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

Transition.js , geçişEnd olaylarının yanı sıra bir CSS geçiş emülatörü için temel bir yardımcıdır. Diğer eklentiler tarafından CSS geçiş desteğini kontrol etmek ve asılı geçişleri yakalamak için kullanılır.

Kullanım Durumları

Geçiş eklentisine birkaç örnek -

• Modellerde kayma veya solma. Bootstrap Modal Plugin bölümünde bir örnek bulabilirsiniz .

• Sekmeleri karartmak. Bootstrap Tab Plugin bölümünde bir örnek bulabilirsiniz .

• Uyarılar kayboluyor. Bootstrap Uyarıları bölümünde bir örnek bulabilirsiniz .

• Kayar karusel bölmeleri. Bootstrap Carousel Plugin bölümünde bir örnek bulabilirsiniz .

Kalıcı, ana penceresinin üzerine yerleştirilen bir alt penceredir. Tipik olarak amaç, ana pencereden ayrılmadan bir miktar etkileşime sahip olabilen ayrı bir kaynaktan içeriği görüntülemektir. Alt pencereler bilgi, etkileşim veya daha fazlasını sağlayabilir.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, ihtiyacınız olacak modal.js. Önyükleme Eklentilerine Genel Bakış bölümünde bahsedildiği gibi , bootstrap.js veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

Kullanım

Modal eklentinin gizli içeriğini değiştirebilirsiniz -

• Via data attributes - Özniteliği ayarla data-toggle = "modal" bir düğme veya bağlantı gibi bir denetleyici öğesinde, data-target = "#identifier" veya href = "#identifier" geçiş yapmak için belirli bir modeli (id = "tanımlayıcı" ile) hedeflemek için.

• Via JavaScript - Bu tekniği kullanarak, tek bir JavaScript satırıyla id = "tanımlayıcı" içeren bir modal çağırabilirsiniz -

$('#identifier').modal(options)

Misal

Aşağıdaki örnekte statik bir kalıcı pencere örneği gösterilmektedir -

<h2>Example of creating Modals with Twitter Bootstrap</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
                  &times;
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Add some text here
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->

Details of the preceding code −

• Kalıcı pencereyi çağırmak için bir tür tetikleyiciye ihtiyacınız vardır. Bir düğme veya bağlantı kullanabilirsiniz. Burada bir düğme kullandık.

• Yukarıdaki koda bakarsanız, bunu <button> etiketinde göreceksiniz, data-target = "#myModal"sayfaya yüklemek istediğiniz modelin hedefidir. Bu kod, sayfada birden çok mod oluşturmanıza ve ardından her biri için farklı tetikleyicilere sahip olmanıza olanak tanır. Şimdi, açık olmak gerekirse, aynı anda birden fazla mod yüklemiyorsunuz, ancak farklı zamanlarda yüklenecek sayfalarda birçok model oluşturabilirsiniz.

• Modalde dikkat edilmesi gereken iki sınıf vardır -

  • İlk olarak .modal, bu basitçe <div> içeriğini bir modal olarak tanımlar.

  • Ve ikincisi .fadesınıf. Modal değiştirildiğinde, içeriğin girip çıkmasına neden olur.

• aria-labelledby = "myModalLabel", öznitelik mod başlığına başvurur.

• Öznitelik aria-hidden = "true" bir tetikleyici gelene kadar Kalıcı Pencereyi görünmez tutmak için kullanılır (ilgili düğmeye tıklamak gibi).

• <div class = "modal-header">, modal-header, modal pencerenin başlığı için stili tanımlayan sınıftır.

• class = "close", kalıcı pencerenin Kapat düğmesinin stilini belirleyen bir CSS sınıfı kapanışıdır.

• data-dismiss = "modal", özel bir HTML5 veri özelliğidir. Burada kalıcı pencereyi kapatmak için kullanılır.

• class = "modal-body", kalıcı pencerenin gövdesinin stilini ayarlamak için bir CSS Bootstrap CSS sınıfıdır.

• class = "modal-footer", kalıcı pencerenin altbilgisi için stil ayarlamak için Bootstrap CSS'nin bir CSS sınıfıdır.

• data-toggle = "modal", HTML5 özel veri özelliği veri geçişi, kalıcı pencereyi açmak için kullanılır.

Seçenekler

Kalıcı Pencerenin görünümünü ve hissini özelleştirmek için veri öznitelikleri veya JavaScript aracılığıyla geçirilebilecek belirli seçenekler vardır. Aşağıdaki tablo seçenekleri listeler -

<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>

Yöntemler

Modal () ile kullanılabilecek bazı yararlı yöntemler.

$('#identifier').modal({
   keyboard: false
})

$('#identifier').modal('toggle')

$('#identifier').modal('show')

$('#identifier').modal('hide')

Misal

Aşağıdaki örnek, yöntemlerin kullanımını gösterir -

<h2>Example of using methods of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Press ESC button to exit.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

Sadece Esc düğmesine tıklayın ve kalıcı pencere çıkar.

Etkinlikler

Aşağıdaki tablo modal ile çalışılacak olayları listeler. Bu olaylar, işleve bağlanmak için kullanılabilir.

$('#identifier').on('show.bs.modal', function () {
   // do something…
})

$('#identifier').on('shown.bs.modal', function () {
   // do something…
})

$('#identifier').on('hide.bs.modal', function () {
   // do something…
})

$('#identifier').on('hidden.bs.modal', function () {
   // do something…
})

Misal

Aşağıdaki örnek olayların kullanımını gösterir -

<h2>Example of using events of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Click on close button to check Event functionality.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal('hide')})}); </script> <script> $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Hey, I heard you like modals...');})
   });
</script>

Yukarıdaki ekranda görüldüğü gibi Kapat düğmesine tıklarsanız, yani olayı gizlerseniz bir uyarı mesajı görüntülenir.

Açılır menü eklentisini kullanarak gezinti çubukları, sekmeler, haplar ve düğmeler gibi herhangi bir bileşene açılır menüler ekleyebilirsiniz.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, ihtiyacınız olacak dropdown.js. Önyükleme Eklentilerine Genel Bakış bölümünde bahsedildiği gibi , bootstrap.js veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

Kullanım

Açılır eklentinin gizli içeriğini değiştirebilirsiniz -

• Via data attributes - Ekle data-toggle = "dropdown" aşağıda gösterildiği gibi bir açılır listeye geçiş yapmak için bir bağlantıya veya düğmeye -

<div class = "dropdown">
   <a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>
	
</div>

• Bağlantıları sağlam tutmanız gerekiyorsa (bu, tarayıcı JavaScript'i etkinleştirmiyorsa kullanışlıdır), data-target yerine öznitelik href = "#"-

<div class = "dropdown">
   <a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">
      Dropdown 
      <span class = "caret"></span>
   </a>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>
	
</div>

• Via JavaScript - JavaScript aracılığıyla açılır geçişi çağırmak için aşağıdaki yöntemi kullanın -

$('.dropdown-toggle').dropdown()

Misal

Within Navbar

Aşağıdaki örnek, bir gezinme çubuğu içindeki açılır menünün kullanımını göstermektedir -

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class="caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

Within Tabs

Aşağıdaki örnek, sekmelerdeki açılır menünün kullanımını göstermektedir -

<p>Tabs With Dropdown Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java 
         <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

Seçenekler

Seçenek yok.

Yöntemler

Açılır menü geçişinin, açılır menüyü göstermek veya gizlemek için basit bir yöntemi vardır.

$().dropdown('toggle')

Misal

Aşağıdaki örnek, açılır eklenti yönteminin kullanımını göstermektedir.

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>

   <div id = "myexample">
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
			
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle">Java <b class = "caret"></b></a>
            
            <ul class = "dropdown-menu">
               <li><a id = "action-1" href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
			
      </ul>
   </div>
   
</nav>

<script>
   $(function(){
      $(".dropdown-toggle").dropdown('toggle');
   }); 
</script>

Kaydırma casusu (otomatik güncelleme nav) eklentisi, kaydırma konumuna göre sayfanın bölümlerini hedeflemenize olanak tanır. Temel uygulamasında, kaydırırken ekleyebilirsiniz.active kaydırma konumuna göre sınıflar gezinme çubuğuna.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, ihtiyacınız olacak scrollspy.js. Önyükleme Eklentilerine Genel Bakış bölümünde bahsedildiği gibi , bootstrap.js veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

Kullanım

Üst çubuk gezintinize kaydırma casusu davranışı ekleyebilirsiniz -

• Via data attributes - ekle data-spy = "scroll"casusluk yapmak istediğiniz öğeye (tipik olarak vücut). Ardından öznitelik ekleyindata-target herhangi bir Bootstrap'in üst öğesinin kimliği veya sınıfı ile .navbileşen. Bunun çalışması için, sayfanın gövdesinde gözetlediğiniz bağlantıların eşleşen kimliklerine sahip öğelere sahip olmanız gerekir.

<body data-spy = "scroll" data-target = ".navbar-example">
   ...
   <div class = "navbar-example">
      <ul class = "nav nav-tabs">
         ...
      </ul>
   </div>
   ...
</body>

• Via JavaScript - Casusluk yapılacak öğeyi seçerek ve ardından casusluk yapılacak öğeyi seçerek, veri niteliklerini kullanmak yerine JavaScript ile kaydırma casusunu çağırabilirsiniz .scrollspy() işlev -

$('body').scrollspy({ target: '.navbar-example' })

Misal

Aşağıdaki örnek, scrollspy eklentisinin veri öznitelikleri aracılığıyla kullanımını gösterir -

<nav id = "navbar-example" class = "navbar navbar-default navbar-static" role = "navigation">
   
   <div class = "navbar-header">
      <button class = "navbar-toggle" type = "button" data-toggle = "collapse" 
         data-target = ".bs-js-navbar-scrollspy">
         <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 = "#">Tutorial Name</a>
   </div>
   
   <div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
      <ul class = "nav navbar-nav">
         <li><a href = "#ios">iOS</a></li>
         <li><a href = "#svn">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu" role = "menu" aria-labelledby = "navbarDrop1">
               <li><a href = "#jmeter" tabindex = "-1">jmeter</a></li>
               <li><a href = "#ejb" tabindex = "-1">ejb</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#spring" tabindex = "-1">spring</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

<div data-spy = "scroll" data-target = "#navbar-example" data-offset = "0" 
   style = "height:200px; overflow:auto; position: relative;">
   <h4 id = "ios">iOS</h4>
	
   <p>iOS is a mobile operating system developed and distributed by Apple 
      Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple 
      TV. iOS is derived from OS X, with which it shares the Darwin 
      foundation. iOS is Apple's mobile version of the OS X operating system 
      used on Apple computers.</p>
   
   <h4 id = "svn">SVN</h4>
   
   <p>Apache Subversion which is often abbreviated as SVN, is a software 
      versioning and revision control system distributed under an open source 
      license. Subversion was created by CollabNet Inc. in 2000, but now it 
      is developed as a project of the Apache Software Foundation, and as 
      such is part of a rich community of developers and users.</p>
   
   <h4 id = "jmeter">jMeter</h4>
   
   <p>jMeter is an Open Source testing software. It is 100% pure Java 
      application for load and performance testing.</p>
   
   <h4 id = "ejb">EJB</h4>
   
   <p>Enterprise Java Beans (EJB) is a development architecture for building 
      highly scalable and robust enterprise level applications to be deployed 
      on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   
   <h4 id = "spring">Spring</h4>
   
   <p>Spring framework is an open source Java platform that provides 
      comprehensive infrastructure support for developing robust Java 
      applications very easily and very rapidly.</p>
   
   <p>Spring framework was initially written by Rod Johnson and was first 
      released under the Apache 2.0 license in June 2003.</p>
   
</div>

Seçenekler

Seçenekler, veri özellikleri veya JavaScript aracılığıyla aktarılabilir. Aşağıdaki tablo seçenekleri listeler -

Yöntemler

.scrollspy('refresh') - Scrollspy'i JavaScript yöntemiyle çağırırken, .refreshDOM'u güncelleme yöntemi. Bu, DOM'un herhangi bir öğesi değiştiyse, yani bazı öğeleri eklediyseniz veya kaldırdıysanız yararlıdır. Bu yöntemi kullanmak için sözdizimi aşağıdadır.

$('[data-spy = "scroll"]').each(function () { var $spy = $(this).scrollspy('refresh')
})

Misal

Aşağıdaki örnek, .scrollspy('refresh') yöntem -

<nav id = "myScrollspy" class = "navbar navbar-default navbar-static" role = "navigation">
   
   <div class = "navbar-header">
      <button class = "navbar-toggle" type = "button" data-toggle = "collapse" 
         data-target = ".bs-js-navbar-scrollspy">
         <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 = "#">Tutorial Name</a>
   </div>
   
   <div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#ios">iOS</a></li>
         <li><a href = "#svn">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle  = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu" role = "menu" aria-labelledby = "navbarDrop1">
               <li><a href = "#jmeter" tabindex = "-1">jmeter</a></li>
               <li><a href = "#ejb" tabindex = "-1">ejb</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#spring" tabindex = "-1">spring</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

<div data-spy = "scroll" data-target = "#myScrollspy" data-offset = "0"  
   style = "height:200px; overflow:auto; position: relative;">
   
   <div class = "section">
      <h4 id = "ios">iOS<small><a href = "#" onclick = "removeSection(this);">
         &times; Remove this section</a></small>
      </h4>
      
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin 
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>
   
   <div class = "section">
      <h4 id = "svn">SVN<small></small></h4>
      <p>Apache Subversion which is often abbreviated as SVN, is a software 
         versioning and revision control system distributed under an open source 
         license. Subversion was created by CollabNet Inc. in 2000, but 
         now it is developed as a project of the Apache Software Foundation, 
         and as such is part of a rich community of developers and users.</p>
   </div>
   
   <div class = "section">
      <h4 id = "jmeter">jMeter<small><a href = "#" onclick = "removeSection(this);">
         &times; Remove this section</a></small>
      </h4>
      
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "section">
      <h4 id = "ejb">EJB</h4>
      
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications 
         to be deployed on J2EE compliant Application Server such as 
         JBOSS, Web Logic etc.</p>
   </div>
	
   <div class = "section">
      <h4 id = "spring">Spring</h4>
      
      <p>Spring framework is an open source Java platform that provides 
         comprehensive infrastructure support for developing robust Java 
         applications very easily and very rapidly.</p>
      
      <p>Spring framework was initially written by Rod Johnson and was first 
         released under the Apache 2.0 license in June 2003.</p>
   </div>
   
</div>

<script type = "text/javascript">
   $(function(){
      removeSection = function(e) {
         $(e).parents(".section").remove(); $('[data-spy = "scroll"]').each(function () {
            var $spy = $(this).scrollspy('refresh')
         });
      }
      $("#myScrollspy").scrollspy();
   });
</script>

Etkinlikler

Aşağıdaki tablo, scrollspy ile çalışacak olayları listeler. Bu olay, işleve bağlanmak için kullanılabilir.

$('#myScrollspy').on('activate.bs.scrollspy', function () {
   // do something…
})

Misal

Aşağıdaki örnek, activate.bs.scrollspy olay -

<html>
   <head>
      <link rel = "stylesheet" href = "bootstrap/css/bootstrap.min.css">
      <script src = "bootstrap/scripts/jquery.min.js"></script>
      <script src = "bootstrap/js/bootstrap.min.js"></script>
      
      <script>
         $(document).ready(function(){ removeSection = function(e) { $(e).parents(".subject").remove();
            
               $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); } $("#Navexample").scrollspy();
         
            // The event is fired when an item gets actived with the scrollspy
            $("#Navexample").on('activate.bs.scrollspy', function () { var currentSection = $(".nav li.active > a").text();
               $("#spyevent").html("Current Item being viewed >> " + currentSection);
            })
				
         });
      </script>
   
      <style>
         .scroll-box {
            height: 250px;
            position: relative;
            overflow: auto;
            font-size:2em;
         }
      </style>
   </head>
   
   <body>
      <div class = "container">
         <nav id = "Navexample" class = "navbar navbar-default" role = "navigation">
      
            <!-- Nav Bar -->
            <div class = "navbar-header">
               <button type = "button" class = "navbar-toggle" 
                  data-toggle = "collapse" data-target = "#navbarCollapse">
               
                  <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 = "#">Tutorials Point</a>
            </div>
            
            <!-- Links and Sublinks -->
            <div class = "collapse navbar-collapse" id = "navbarCollapse">
               <ul class = "nav navbar-nav">
                  <li class = "active"><a href = "#subject-1">Subject 1</a></li>
                  <li><a href = "#subject-2">Subject 2</a></li>
               
                  <li class = "dropdown"><a href = "#" class = "dropdown-toggle" 
                     data-toggle = "dropdown">Subject 3<b class = "caret"></b></a>
                     
                     <ul class = "dropdown-menu">
                        <li><a href = "#subject-3-1">Subject 3.1</a></li>
                        <li><a href = "#subject-3-2">Subject 3.2</a></li>
                        <li><a href = "#subject-3-3">Subject 3.3</a></li>
                     </ul>
                     
                  </li>
						
                  <li><a href = "#subject-4">Subject 4</a></li>
               </ul>
            </div>
            
         </nav>
         
         <div class = "scroll-box" data-spy = "scroll" data-offset = "0">
            <div class = "subject">
            
               <h3 id = "subject-1">Subject 1 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>
            
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
				
            <hr>
         
            <div class = "subject">
               <h3 id = "subject-2">Subject 2 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>
            
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
				
            <hr>
         
            <div class = "subject">
               <h3 id = "subject-3">Subject 3 
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h3>
            
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><
            </div>
				
            <hr>
            
            <div class = "subject">
               <h4 id = "subject-3-1">Subject 3.1
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h4>
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            
            <div class = "subject">
               <h4 id = "subject-3-2">Subject 3.2
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h4>
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            
            <div class = "subject">
               <h4 id = "subject-3-3">Subject 3.3 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h4>
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
				
            <hr>
            
            <div class = "subject">
               <h3 id = "subject-4">Subject 4 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            
         </div>
         <hr>
         
         <h4 id = "spyevent" class = "text-info"></h4>
      </div>
   </body>
</html>

Bootstrap Gezinme Öğeleri bölümünde sekmeler tanıtıldı . Birkaç veri özelliğini birleştirerek, kolayca sekmeli bir arayüz oluşturabilirsiniz. Bu eklentiyle, açılır menüler aracılığıyla bile sekmelerdeki veya haplardaki yerel içerik bölmeleri arasında geçiş yapabilirsiniz.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, ihtiyacınız olacak tab.js. Önyükleme Eklentilerine Genel Bakış bölümünde bahsedildiği gibi , bootstrap.js veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

Kullanım

Sekmeleri aşağıdaki iki şekilde etkinleştirebilirsiniz -

• Via data attributes - eklemeniz gerekiyor data-toggle = "tab" veya data-toggle = "pill" çapalara.

  Ekleniyor nav ve nav-tabs sekmeye göre sınıflar ulBootstrap sekmesi stilini uygularkennav ve nav-pillssınıflar hap stilini uygulayacaktır .

<ul class = "nav nav-tabs">
   <li><a href = "#identifier" data-toggle = "tab">Home</a></li>
   ...
</ul>

• Via JavaScript - Javscript kullanarak sekmeleri aşağıdaki gibi etkinleştirebilirsiniz -

$('#myTab a').click(function (e) {
   e.preventDefault()
   $(this).tab('show')
})

• Ayrı sekmeleri etkinleştirmenin farklı yollarının bir örneğini burada bulabilirsiniz -

// Select tab by name
$('#myTab a[href = "#profile"]').tab('show')
 
// Select first tab
$('#myTab a:first').tab('show') // Select last tab $('#myTab a:last').tab('show') 

// Select third tab (0-indexed)
$('#myTab li:eq(2) a').tab('show')

Solma Etkisi

Sekmelerde solma efekti elde etmek için şunu ekleyin: .fade her birine .tab-pane. İlk sekme bölmesinde ayrıca.in ilk içeriğin düzgün şekilde solması için -

<div class = "tab-content">
   <div class = "tab-pane fade in active" id = "home">...</div>
   <div class = "tab-pane fade" id = "svn">...</div>
   <div class = "tab-pane fade" id = "ios">...</div>
   <div class = "tab-pane fade" id = "java">...</div>
</div>

Misal

Veri özniteliklerini ve solma efektini kullanan bir sekme eklentisi örneği, aşağıdaki örnekte gösterildiği gibidir -

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li><a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a></li>
         <li><a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a></li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed 
         by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,
         and Apple TV. iOS is derived from OS X, with which it shares the 
         Darwin foundation. iOS is Apple's mobile version of the OS X 
         operating system used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
   
</div>

Yöntemler

.$().tab- Bu yöntem, bir sekme öğesini ve içerik kabını etkinleştirir. Sekmede birdata-target veya bir href DOM'da bir kapsayıcı düğümünü hedeflemek.

<ul class = "nav nav-tabs" id = "myTab">
   <li class = "active"><a href = "#identifier" data-toggle = "tab">Home</a></li>
   .....
</ul>

<div class = "tab-content">
   <div class = "tab-pane active" id = "home">...</div>
   .....
</div>

<script>
   $(function () { $('#myTab a:last').tab('show')
   })
</script>

Misal

Aşağıdaki örnek, sekme eklenti yönteminin kullanımını gösterir .tab. İşte örnekte ikinci sekme iOS etkinleştirilmiştir -

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
	
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">
               jmeter
            </a>
         </li>
         
         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">
               ejb
            </a>
         </li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas. 
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin 
         foundation. iOS is Apple's mobile version of the OS X operating system 
         used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, 
         Web Logic etc.</p>
   </div>
   
</div>

<script>
   $(function () { $('#myTab li:eq(1) a').tab('show');
   });
</script>

Etkinlikler

Aşağıdaki tablo, sekme eklentisi ile çalışacak olayları listeler. Bu olay, işleve bağlanmak için kullanılabilir.

$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})

$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})

Misal

Aşağıdaki örnek, sekme eklenti olaylarının kullanımını gösterir. İşte örnekte, mevcut ve önceki ziyaret edilen sekmeleri göstereceğiz -

<hr>
<p class = "active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class = "previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a>
         </li>
         
         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a>
         </li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
</div>

<script>
   $(function(){ $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
         // Get the name of active tab
         var activeTab = $(e.target).text(); // Get the name of previous tab var previousTab = $(e.relatedTarget).text(); 
         
         $(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab);
      });
   });
</script>

Araç ipuçları, bir bağlantıyı açıklamanız gerektiğinde kullanışlıdır. Eklenti, Jason Frame tarafından yazılan jQuery.tipsy eklentisinden esinlenmiştir . Araç ipuçları o zamandan beri resimsiz çalışmak, bir CSS animasyonu ile canlandırmak ve yerel başlık depolaması için veri nitelikleri ile güncellendi.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, ihtiyacınız olacak tooltip.js. Önyükleme Eklentilerine Genel Bakış bölümünde bahsedildiği gibi , bootstrap.js veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

Kullanım

Araç ipucu eklentisi, isteğe bağlı olarak içerik ve işaretleme oluşturur ve varsayılan olarak araç ipuçlarını tetikleyici öğesinin arkasına yerleştirir. Aşağıdaki iki şekilde araç ipuçları ekleyebilirsiniz -

• Via data attributes - Araç ipucu eklemek için şunu ekleyin data-toggle = "tooltip"bir bağlantı etiketine. Bağlantının başlığı, bir araç ipucunun metni olacaktır. Varsayılan olarak, araç ipucu eklenti tarafından en üste ayarlanmıştır.

<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>

• Via JavaScript - Araç ipucunu JavaScript aracılığıyla tetikleyin -

$('#identifier').tooltip(options)

Araç ipucu eklentisi, önceki bölümlerde tartışılan açılır menü veya diğer eklentiler gibi yalnızca css eklentileri DEĞİLDİR. Bu eklentiyi kullanmak için jquery kullanarak etkinleştirmelisiniz (javascript okuyun). Sayfanızdaki tüm araç ipuçlarını etkinleştirmek için sadece bu komut dosyasını kullanın -

$(function () { $("[data-toggle = 'tooltip']").tooltip(); });

Misal

Aşağıdaki örnek, araç ipucu eklentisinin veri öznitelikleri aracılığıyla kullanımını göstermektedir.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   title = "Tooltip on left"> Default Tooltip</a>.

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "top" 
   title = "Tooltip on top">Tooltip on Top</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
   title = "Tooltip on bottom">Tooltip on Bottom</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "right" 
   title = "Tooltip on right">Tooltip on Right</a>
	
<br>

<h4>Tooltip examples for buttons</h4>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
   Default Tooltip
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">
	
   Tooltip on left
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "top" title = "Tooltip on top">
   
   Tooltip on top
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "bottom" title = "Tooltip on bottom">
   
   Tooltip on bottom
</button>

<button type = " button" class = " btn btn-default" data-toggle = "tooltip" 
   data-placement = "right" title = "Tooltip on right">
   
   Tooltip on right
</button>

<script>
   $(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>

Seçenekler

Bootstrap Data API aracılığıyla eklenebilecek veya JavaScript aracılığıyla çağrılabilecek belirli seçenekler vardır. Aşağıdaki tablo seçenekleri listeler -

delay: { show: 500, hide: 100 }

Yöntemler

Aşağıda, araç ipuçları için bazı yararlı yöntemler verilmiştir -

$().tooltip(options)

$('#element').tooltip('toggle')

$('#element').tooltip('show')

$('#element').tooltip('hide')

$('#element').tooltip('destroy')

Misal

Aşağıdaki örnek, araç ipucu eklentisinin veri öznitelikleri aracılığıyla kullanımını göstermektedir.

<div style = "padding: 100px 100px 10px;">
   This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
      title = "show">Tooltip on method show</a>.

   This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip" 
      data-placement = "left" title = "hide">Tooltip on method hide</a>.

   This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip" 
      data-placement = "top" title = "destroy">Tooltip on method destroy</a>.

   This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip" 
      data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
   
   <br><br><br><br><br><br>
   
   <p class = "tooltip-options" >
      This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
         </h2>">Tooltip on method options</a>.
   </p>

   <script>
      $(function () { $('.tooltip-show').tooltip('show');});
      $(function () { $('.tooltip-hide').tooltip('hide');});
      $(function () { $('.tooltip-destroy').tooltip('destroy');});
      $(function () { $('.tooltip-toggle').tooltip('toggle');});
      $(function () { $(".tooltip-options a").tooltip({html : true });});
   </script>
</div>

Etkinlikler

Aşağıdaki tablo, araç ipucu eklentisiyle çalışılacak olayları listeler. Bu olay, işleve bağlanmak için kullanılabilir.

$('#myTooltip').on('show.bs.tooltip', function () {
   // do something
})

$('#myTooltip').on('shown.bs.tooltip', function () {
   // do something
})

$('#myTooltip').on('hide.bs.tooltip', function () {
   // do something
})

$('#myTooltip').on('hidden.bs.tooltip', function () {
   // do something
})

Misal

Aşağıdaki örnek, araç ipucu eklentisinin veri öznitelikleri aracılığıyla kullanımını göstermektedir.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
   title = "Default Tooltip">Default Tooltip</a>.

<script>
   $(function () { $('.tooltip-show').tooltip('show');});
   
   $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
      alert("Alert message on show");
   })});
</script>

Açılır bilgi penceresi araç ipucuna benzer ve bir başlık ile birlikte genişletilmiş bir görünüm sunar. Açılır bilgi penceresinin etkinleştirilmesi için kullanıcının imleci öğenin üzerine getirmesi yeterlidir. Açılır bilgi penceresinin içeriği tamamen Bootstrap Data API kullanılarak doldurulabilir. Bu yöntem bir araç ipucu gerektirir.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, popover.jsve araç ipucu eklentisine bağımlıdır . Önyükleme Eklentilerine Genel Bakış bölümünde bahsedildiği gibi , bootstrap.js veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

Kullanım

Açılır bilgi eklentisi isteğe bağlı olarak içerik ve biçimlendirme oluşturur ve varsayılan olarak açılır pencereyi tetikleyici öğesinin arkasına yerleştirir. Açılır bilgi penceresini aşağıdaki iki şekilde ekleyebilirsiniz -

• Via data attributes - Açılır bilgi penceresi eklemek için ekleyin data-toggle = "popover"bir çapa / düğme etiketine. Bağlantının başlığı, açılır pencerenin metni olacaktır. Varsayılan olarak, açılır bilgi eklentisi tarafından en üste ayarlanır.

<a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>

• Via JavaScript - Aşağıdaki sözdizimini kullanarak JavaScript aracılığıyla popover'ları etkinleştirin -

$('#identifier').popover(options)

Popover eklentisi, önceki bölümlerde tartışılan açılır menü veya diğer eklentiler gibi yalnızca css eklentileri DEĞİLDİR. Bu eklentiyi kullanmak için jquery kullanarak etkinleştirmelisiniz (javascript okuyun). Sayfanızdaki tüm açılır pencereleri etkinleştirmek için sadece bu komut dosyasını kullanın -

$(function () { $("[data-toggle = 'popover']").popover(); });

Misal

Aşağıdaki örnek, veri öznitelikleri aracılığıyla popover eklentisinin kullanımını gösterir.

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover on left">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover on top">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover on bottom">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "right" 
      data-content = "Some content in Popover on right">
      
      Popover on right
   </button>
   
</div>

<script>
   $(function (){
      $("[data-toggle = 'popover']").popover();
   });
</script>

Seçenekler

Bootstrap Data API aracılığıyla eklenebilecek veya JavaScript aracılığıyla çağrılabilecek belirli seçenekler vardır. Aşağıdaki tablo seçenekleri listeler -

delay: { show: 500, hide: 100 }

Yöntemler

Aşağıdakiler, popover için bazı yararlı yöntemlerdir -

$().popover(options)

$('#element').popover('toggle')

$('#element').popover('show')

$('#element').popover('hide')

$('#element').popover('destroy')

Misal

Aşağıdaki örnek, popover eklenti yöntemlerini göstermektedir -

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default popover-show" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary popover-hide" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-hide method">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success popover-destroy" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover-destroy method">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning popover-toggle" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-toggle method">
      
      Popover on right
   </button>
	
   <br><br><br><br><br><br>
   
   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning" 
         title = "<h2>Title</h2>" data-container = "body" 
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</h4>">
         
         Popover
      </a>
   </p>
   
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
   </script>
	
</div>

Etkinlikler

Aşağıdaki tablo, açılır pencere eklentisiyle çalışacak olayları listeler. Bu olay, işleve bağlanmak için kullanılabilir.

$('#mypopover').on('show.bs.popover', function () {
   // do something
})

$('#mypopover').on('shown.bs.popover', function () {
   // do something
})

$('#mypopover').on('hide.bs.popover', function () {
   // do something
})

$('#mypopover').on('hidden.bs.popover', function () {
   // do something
})

Misal

Aşağıdaki örnek Popover eklenti olaylarını gösterir -

<div clas = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-primary popover-show" 
      title = "Popover title" data-container = "body" data-toggle = "popover" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
</div>

<script>
   $(function () { $('.popover-show').popover('show');});
   
   $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("Alert message on show");
   })});
</script>

Uyarı mesajları çoğunlukla son kullanıcılara uyarı veya onay mesajları gibi bilgilerin gösterilmesi için kullanılır. Uyarı mesajı eklentisini kullanarak, tüm uyarı mesajlarına son verme işlevi ekleyebilirsiniz.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, alert.js. Aksi takdirde, Bootstrap Eklentilerine Genel Bakış bölümünde bahsedildiği gibi , bootstrap.js veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

Kullanım

Bir uyarının kapatılmasını aşağıdaki iki şekilde etkinleştirebilirsiniz:

• Via data attributes - Data API üzerinden kapatmak için sadece şunu ekleyin: data-dismiss = "alert" otomatik olarak bir uyarı kapatma işlevi vermek için kapat düğmenize.

<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
   &times;
</a>

• Via JavaScript - JavaScript aracılığıyla kapatmak için aşağıdaki sözdizimini kullanın -

$(".alert").alert()

Misal

Aşağıdaki örnek, veri öznitelikleri aracılığıyla uyarı eklentisinin kullanımını göstermektedir.

<div class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">
      &times;
   </a>
   
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

Seçenekler

Burada seçenek yok.

Yöntemler

Aşağıdakiler, uyarı eklentisi için bazı yararlı yöntemlerdir -

$('#identifier').alert();

$('#identifier').alert('close');

Uyarıların kapatıldıklarında hareket etmesini sağlamak için, .fade ve .in sınıf zaten onlara uygulandı.

Misal

Aşağıdaki örnek, .alert() yöntem -

<h3>Alert messages to demonstrate alert() method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){ $("#myAlert").alert();
      });
   });  
</script>

Aşağıdaki örnek, .alert('close') yöntem -

<h3>Alert messages to demonstrate alert('close') method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){ $(".close").click(function(){
         $("#myAlert").alert('close');
      });
   });  
</script>

Bu kodu kullanarak deneyin Try iteditör. Kapat işlevinin tüm uyarı mesajlarına uygulandığını görebilirsiniz, yani herhangi bir uyarı mesajını kapatın, uyarı mesajlarının geri kalanı da kapanır.

Etkinlikler

Aşağıdaki tablo, uyarı eklentisiyle çalışacak olayları listeler. Bu olay, uyarı işlevine bağlanmak için kullanılabilir.

$('#myalert').bind('close.bs.alert', function () {
   // do something
})

$('#myalert').bind('closed.bs.alert', function () {
   // do something
})

Misal

Aşağıdaki örnek, uyarı eklenti olaylarını gösterir -

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<script type = "text/javascript">
   $(function(){
      $("#myAlert").bind('closed.bs.alert', function () {
         alert("Alert message box is closed.");
      });
   });
</script>

Düğmeler Önyükleme Düğmeleri bölümünde açıklanmıştır . Bu eklenti ile kontrol düğmesi durumları gibi bazı etkileşimler ekleyebilir veya araç çubukları gibi daha fazla bileşen için düğme grupları oluşturabilirsiniz.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, button.js. Aksi takdirde, Bootstrap Plugins Overview bölümünde bahsedildiği gibi , bootstrap.js'yi veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

Yükleme Durumu

Bir düğmeye yükleme durumu eklemek için, data-loading-text = "Loading..." aşağıdaki örnekte gösterildiği gibi düğme öğesinin bir niteliği olarak -

<button id = "fat-btn" class = "btn btn-primary" data-loading-text = "Loading..." type = "button"> 
   Loading state 
</button>

<script>
   $(function() { 
      $(".btn").click(function(){ $(this).button('loading').delay(1000).queue(function() {
            // $(this).button('reset');
         });        
      });
   });  
</script>

Düğmeye tıkladığınızda çıktı aşağıdaki resimde görüldüğü gibi olacaktır -

Tek geçiş

Tek bir düğmeyle geçişi etkinleştirmek için (yani, bir düğmenin normal durumunu bir basma durumuna veya tersine), data-toggle = "button" aşağıdaki örnekte gösterildiği gibi düğme öğesinin bir niteliği olarak -

<button type = "button" class = "btn btn-primary" data-toggle = "button">
   Single toggle
</button>

Onay kutusu

Yalnızca veri özelliğini ekleyerek onay kutuları grubu oluşturabilir ve buna geçiş yapabilirsiniz. data-toggle = "buttons" için btn-group.

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 1
   </label>
   
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 2
   </label>
   
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 3
   </label>
</div>

Radyo

Benzer şekilde, bir grup radyo girişi oluşturabilir ve basitçe data özelliğini ekleyerek buna geçiş yapabilirsiniz. data-toggle = "buttons" için btn-group.

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "radio" name =" options" id = "option1"> Option 1
   </label>
   
   <label class = "btn btn-primary">
      <input type = "radio" name = "options" id = "option2"> Option 2
   </label>
   
   <label class = "btn btn-primary">
      <input type = "radio" name = "options" id = "option3"> Option 3
   </label>
</div>

Kullanım

Düğmeler eklentisini etkinleştirebilirsiniz via JavaScript aşağıda gösterildiği gibi -

$('.btn').button()

Seçenekler

Seçenek yok.

Yöntemler

Aşağıda, buton eklentisi için faydalı yöntemlerden bazıları verilmiştir -

$().button('toggle')

$().button('loading')

$().button('reset')

$().button(string)

Misal

Aşağıdaki örnek, yukarıdaki yöntemlerin kullanımını göstermektedir -

<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>Example to demonstrate .button('toggle') method</h4>

<div id = "myButtons1" class = "bs-example">
   <button type = "button" class = "btn btn-primary">Primary</button>
</div>

<h4>Example to demonstrate  .button('loading') method</h4>

<div id = "myButtons2" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>

<h4>Example to demonstrate .button('reset') method</h4>

<div id = "myButtons3" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>

<h4>Example to demonstrate  .button(string) method</h4>

<button type = "button" class = "btn btn-primary" id = "myButton4" 
   data-complete-text = "Loading finished">
   Click Me
</button>

<script type = "text/javascript">
   $(function () { $("#myButtons1 .btn").click(function(){
         $(this).button('toggle'); }); }); $(function() { 
      $("#myButtons2 .btn").click(function(){ $(this).button('loading').delay(1000).queue(function() {
         });        
      });
   });   
   
   $(function() { $("#myButtons3 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() { $(this).button('reset');
         });        
      });
   });  
   
   $(function() { $("#myButton4").click(function(){
         $(this).button('loading').delay(1000).queue(function() { $(this).button('complete');
         });        
      });
   }); 
</script>

Daraltma eklentisi, sayfanın daraltılmış bölümlerini oluşturmayı kolaylaştırır. Bir akordiyon gezinme veya içerik kutuları oluşturmak için kullanın, birçok içerik seçeneğine izin verir.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, collapse.js. Bu ayrıca Geçiş Eklentisinin Bootstrap sürümünüze dahil edilmesini gerektirir . Aksi takdirde, Bootstrap Eklentilerine Genel Bakış bölümünde bahsedildiği gibi , bootstrap.js veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

Daraltma eklentisini kullanabilirsiniz -

• To create collapsible groups or accordion. Bu, aşağıdaki örnek örnekte olduğu gibi oluşturulabilir -

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse.Section 1
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
               nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse.Section 2
            </a>
         </h4>
      </div>

      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse.Section 3
            </a>
         </h4>
      </div>
     
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
</div>

• data-toggle = "collapse" bileşeni genişletmek veya daraltmak için tıkladığınız bağlantıya eklenir.

• href veya a data-targetöznitelik, değeri alt bileşenin kimliği olan üst bileşene eklenir .

• data-parent Akordeon benzeri efekt oluşturmak için özellik eklenir.

• Akordeon işaretlemesi olmadan basit katlanabilir oluşturmak için - Bu, aşağıdaki örnek örnekte olduğu gibi oluşturulabilir -

<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
   simple collapsible
</button>

<div id = "demo" class = "collapse in">
   Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
      sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>

Örnekte görebileceğiniz gibi, akordeondan farklı olarak basit bir daraltılabilir bileşen oluşturduk, data-parent.

Kullanım

Aşağıdaki tablo, daraltma eklentisinin ağır yükleri kaldırmak için kullandığı sınıfları listeler -

Daraltma eklentisini iki şekilde kullanabilirsiniz -

• Via data attributes - Ekle data-toggle = "collapse" ve bir data-targetkatlanabilir bir öğenin denetimini otomatik olarak atamak için öğeye. data-targetözellik, daraltmanın uygulanacağı bir CSS seçiciyi kabul eder. Sınıfı eklediğinizden emin olun.collapsekatlanabilir öğeye. Varsayılan olarak açılmasını istiyorsanız, ek sınıfı dahil edin.in.

  Daraltılabilir bir kontrole akordeon benzeri grup yönetimi eklemek için data özelliğini ekleyin data-parent = "#selector".

• Via JavaScript - Daraltma yöntemi, aşağıda gösterildiği gibi JavaScript ile etkinleştirilebilir -

$('.collapse').collapse()

Seçenekler

Veri öznitelikleri veya JavaScript aracılığıyla geçirilebilecek belirli seçenekler aşağıdaki tabloda listelenmiştir -

Yöntemler

Daraltılabilir öğelerle kullanılan bazı yararlı yöntemlerin bir listesi burada.

$('#identifier').collapse({
   toggle: false
})

$('#identifier').collapse('toggle')

$('#identifier').collapse('show')

$('#identifier').collapse('hide')

Misal

Aşağıdaki örnek, yöntemlerin kullanımını gösterir -

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse. Section 1--hide method
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-success">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse. Section 2--show method
            </a>
         </h4>
      </div>
      
      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-info">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse. Section 3--toggle method
            </a>
         </h4>
      </div>
      
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
   
   <div class = "panel panel-warning">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour">
               Click me to expand. Click me again to collapse. Section 4--options method
            </a>
         </h4>
      </div>
      
      <div id = "collapseFour" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { $('#collapseFour').collapse({ toggle: false })}); $(function () { $('#collapseTwo').collapse('show')}); $(function () { $('#collapseThree').collapse('toggle')}); $(function () { $('#collapseOne').collapse('hide')});
</script>

Etkinlikler

Aşağıdaki tablo, daraltma işlevi ile kullanılabilecek birkaç olayı listelemektedir.

$('#identifier').on('show.bs.collapse', function () {
   // do something
})

$('#identifier').on('shown.bs.collapse', function () {
   // do something
})

$('#identifier').on('hide.bs.collapse', function () {
   // do something
})

$('#identifier').on('hidden.bs.collapse', function () {
   // do something
})

Misal

Aşağıdaki örnek olayların kullanımını gösterir -

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-info">
   
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample">
               Click me to expand. Click me again to collapse. Section --shown event
            </a>
         </h4>
      </div>
      
      <div id = "collapseexample" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { 
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('Hey, this alert shows up when you expand it');
      })
   });
</script>

Bootstrap karuseli, sitenize bir kaydırıcı eklemenin esnek ve duyarlı bir yoludur. Duyarlı olmanın yanı sıra içerik, resimlere, iç çerçevelere, videolara veya isteyebileceğiniz hemen hemen her tür içeriğe izin verecek kadar esnektir.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, carousel.js. Aksi takdirde, Bootstrap Eklentilerine Genel Bakış bölümünde bahsedildiği gibi , bootstrap.js veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

Misal

Aşağıdaki basit bir slayt gösterisi, Bootstrap carousel eklentisini kullanarak bir atlıkarınca gibi öğeler arasında geçiş yapmak için genel bir bileşeni göstermektedir. Atlı karıncayı uygulamak için, kodu işaretlemeyle eklemeniz yeterlidir. Veri özniteliklerine gerek yoktur, sadece basit sınıf tabanlı geliştirme.

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
</div>

İsteğe Bağlı Başlıklar

Slaytlarınıza başlıkları kolayca ekleyebilirsiniz. .carousel-caption herhangi bir öğe .item. Hemen hemen herhangi bir isteğe bağlı HTML'yi oraya yerleştirin ve otomatik olarak hizalanacak ve biçimlendirilecektir. Aşağıdaki örnek bunu göstermektedir -

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
         <div class = "carousel-caption">This Caption 1</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
         <div class = "carousel-caption">This Caption 2</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
         <div class = "carousel-caption">This Caption 3</div>
      </div>
   </div>
   
   <!-- Carousel nav --> 
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>+
</div>

Kullanım

• Via data attributes - Atlı karıncanın konumunu kolayca kontrol etmek için veri özelliklerini kullanın.

  • Öznitelik data-slideönceki veya sonraki anahtar kelimeleri kabul eder , bu da slayt konumunu mevcut konumuna göre değiştirir.

  • Kullanım data-slide-to atlı karıncaya ham slayt dizini geçirmek için data-slide-to = "2", slayt konumunu 0 ile başlayan belirli bir dizine kaydırır.

  • data-ride = "carousel" özniteliği, bir atlı karıncayı sayfa yüklemeden başlayan bir animasyon olarak işaretlemek için kullanılır.

• Via JavaScript - Atlı karınca, aşağıdaki gibi JavaScript ile manuel olarak çağrılabilir -

$('.carousel').carousel()

Seçenekler

Veri öznitelikleri veya JavaScript aracılığıyla geçirilebilecek belirli seçenekler aşağıdaki tabloda listelenmiştir -

Yöntemler

Atlıkarınca koduyla kullanılabilecek yararlı yöntemlerin listesi aşağıda verilmiştir.

$('#identifier').carousel({
   interval: 2000
})

$('#identifier').carousel('cycle')

$('#identifier')..carousel('pause')

$('#identifier').carousel(number)

$('#identifier').carousel('prev')

$('#identifier').carousel('next')

Misal

Aşağıdaki örnek, yöntemlerin kullanımını gösterir -

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
   <!-- Controls buttons -->
   <div style = "text-align:center;">
      <input type = "button" class = "btn prev-slide" value = "Previous Slide">
      <input type = "button" class = "btn next-slide" value = "Next Slide">
      <input type = "button" class = "btn slide-one" value = "Slide 1">
      <input type = "button" class = "btn slide-two" value = "Slide 2">            
      <input type = "button" class = "btn slide-three" value = "Slide 3">
   </div>
	
</div> 

<script>
   $(function() { // Cycles to the previous item $(".prev-slide").click(function() {
         $("#myCarousel").carousel('prev'); }); // Cycles to the next item $(".next-slide").click(function() {
         $("#myCarousel").carousel('next'); }); // Cycles the carousel to a particular frame $(".slide-one").click(function() {
         $("#myCarousel").carousel(0); }); $(".slide-two").click(function() {
         $("#myCarousel").carousel(1); }); $(".slide-three").click(function() {
         $("#myCarousel").carousel(2);
      });
   });
</script>

Etkinlikler

Bootstrap'in atlıkarınca sınıfı, aşağıdaki tabloda listelenen atlı karınca işlevselliğine bağlanmak için iki olay ortaya çıkarır.

$('#identifier').on('slide.bs.carousel', function () {
   // do something
})

$('#identifier').on('slid.bs.carousel', function () {
   // do something
})

Misal

Aşağıdaki örnek olayların kullanımını gösterir -

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
	
</div> 

<script>
   $(function() {
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("This event fires immediately when the slide instance method" +"is invoked.");
      });
   });
</script>

Ek eklentisi, <div> 'in sayfadaki bir konuma yapıştırılmasına izin verir. Ayrıca bu eklentiyi kullanarak pinlemeyi açıp kapatabilirsiniz. Bunun yaygın bir örneği sosyal simgelerdir. Bir konumda başlayacaklar, ancak sayfa belirli bir işarete ulaştığında, <div> yerinde kilitlenecek ve sayfanın geri kalanıyla birlikte kaydırmayı durduracaktır.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, affix.js. Aksi takdirde, Bootstrap Eklentilerine Genel Bakış bölümünde bahsedildiği gibi , bootstrap.js veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

Kullanım

Ek eklentisini veri öznitelikleri aracılığıyla veya aşağıda tartışıldığı gibi kendi JavaScript'inizle manuel olarak kullanabilirsiniz.

• Via data attributes - Herhangi bir öğeye kolayca ekleme davranışı eklemek için, data-spy = "affix"Casusluk yapmak istediğiniz öğeye. Bir elemanın iğnelemesinin ne zaman değiştirileceğini tanımlamak için ofsetleri kullanın.

Misal

Aşağıdaki örnek, veri öznitelikleri aracılığıyla kullanımı gösterir -

<div class = "container">
   <div class = "jumbotron">
      <h1>Bootstrap Affix Plugin example</h1>
   </div>
   
   <div id = "myNav"  data-spy = "affix" data-offset-top = "60" data-offset-bottom = "200">
	
      <div class = "col-md-3">
         <ul class = "nav nav-tabs nav-stacked affix" data-spy = "affix" data-offset-top = "190">
            <li class = "active"><a href = "#one">Tutorial One</a></li>
            <li><a href = "#two">Tutorial Two</a></li>
            <li><a href = "#three">Tutorial Three</a></li>
         </ul>
      </div>
      
      <div class = "col-md-9">
         <h2 id = "one">Tutorial One</h2>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
            dapibus nec turpis vel, semper malesuada ante. Vestibulum 
            id metus ac nisl bibendum scelerisque non non purus. Suspendisse 
            varius nibh non aliquet sagittis. In tincidunt orci sit amet 
            elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
            aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum 
            eu, tristique eget risus. Integer aliquet quam ut elit suscipit, 
            id interdum neque porttitor. Integer faucibus ligula.</p>
				
         <p>Vestibulum quis quam ut magna consequat faucibus. 
            Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum 
            risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
            potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
            Phasellus auctor velit at lacus blandit, commodo iaculis justo
            viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget
            mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat.
            Maecenas mattis lectus enim, quis tincidunt dui molestie euismod.
            Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
				
         <hr>
         
         <h2 id = "two">Tutorial Two</h2>
			
         <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in 
            sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis 
            dapibus orci. In dapibus velit blandit pharetra tincidunt. 
            Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
            Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed 
            fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
				
         <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem 
            convallis sed. Nam odio tortor, dictum quis malesuada at, 
            pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
            diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at 
            facilisis libero. Cum sociis natoque penatibus et magnis dis
            parturient montes, nascetur ridiculus mus. Vestibulum bibendum 
            blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
            tincidunt ante. Vivamus sem augue, hendrerit non sapien in, 
            mollis ornare augue.</p>
				
         <hr>
         
         <h2 id = "three">Tutorial Three</h2>
			
         <p>Integer pulvinar leo id risus pellentesque vestibulum. 
            Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. 
            Donec sed nibh vitae lorem porttitor blandit in nec ante. 
            Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada 
            condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec
            pharetra id arcu eget blandit. Proin imperdiet mattis augue in
            porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse 
            tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus
            lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl
            semper tortor, vel sagittis lacus est consequat eros. Sed id pretium
            nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit 
            amet mauris. </p>
				
         <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante 
            id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus
            turpis at accumsan tincidunt. Phasellus risus risus,
            volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit 
            dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, 
            tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis 
            pellentesque ultricies ac ligula. Pellentesque convallis  elit nisi, id 
            vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse 
            potenti. Integer pellentesque neque et elementum tempus. 
            Curabitur bibendum in ligula ut rhoncus.</p>
				
         <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo 
            sed ligula porta semper eu quis enim. Pellentesque pellentesque,
            metus at facilisis hendrerit, lectus velit facilisis leo, quis
            volutpat turpis arcu quis enim. Nulla viverra lorem elementum
            interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
            Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
      </div>
      
   </div>
</div>

• Via JavaScript - Aşağıda gösterildiği gibi JavaScript ile bir öğeyi manuel olarak ekleyebilirsiniz

$('#myAffix').affix({
   offset: {
      top: 100, bottom: function () {
         return (this.bottom = $('.bs-footer').outerHeight(true))
      }
   }
})

Misal

Aşağıdaki örnek, veri öznitelikleri aracılığıyla kullanımı gösterir -

<div class = "container">
   <div class = "jumbotron">
      <h1>Bootstrap Affix Plugin example</h1>
   </div>
   
   <div>
	
      <div class = "col-md-3">
         <ul class = "nav nav-tabs nav-stacked affix" id = "myNav">
            <li class = "active"><a href = "#one">Tutorial One</a></li>
            <li><a href = "#two">Tutorial Two</a></li>
            <li><a href = "#three">Tutorial Three</a></li>
         </ul>
      </div>
      
      <div class = "col-md-9">
         <h2 id = "one">Tutorial One</h2>
			
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, 
            dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus
            ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh 
            non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. 
            Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio 
            in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique 
            eget risus. Integer aliquet quam ut elit suscipit, id interdum 
            neque porttitor. Integer faucibus ligula.</p>
				
         <p>Vestibulum quis quam ut magna consequat faucibus. 
            Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
            risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
            potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
            Phasellus auctor velit at lacus blandit, commodo iaculis justo
            viverra. Etiam vitae est arcu. Mauris vel congue dolor. 
            Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis,
            bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
            dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu,
            hendrerit tellus.</p>
				
         <hr>
         
         <h2 id = "two">Tutorial Two</h2>
			
         <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in
            sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris 
            quis dapibus orci. In dapibus velit blandit pharetra tincidunt.
            Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
            Sed viverra interdum bibendum. Donec ac sollicitudin dolor. 
            Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum 
            ligula sed consequat.</p>
				
         <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem 
            convallis sed. Nam odio tortor, dictum quis malesuada at, 
            pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
            diam velit egestas lacus, quis fermentum metus ante quis urna. 
            Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis 
            parturient montes, nascetur ridiculus mus. Vestibulum bibendum 
            blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
            tincidunt ante. Vivamus sem augue, hendrerit non sapien in, 
            mollis ornare augue.</p>
				
         <hr>
         
         <h2 id = "three">Tutorial Three</h2>
			
         <p>Integer pulvinar leo id risus pellentesque vestibulum. 
            Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. 
            Donec sed nibh vitae lorem porttitor blandit in nec ante. 
            Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
            condimentum. Etiam in aliquam lectus. Nam vel sapien diam. 
            Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in 
            porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse 
            tincidunt risus quis dolor fringilla blandit. Ut sed sapien at
            purus lacinia porttitor. Nullam iaculis, felis a pretium ornare,
            dolor nisl semper tortor, vel sagittis lacus est consequat eros. 
            Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, 
            tincidunt sit amet mauris.</p>
				
         <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id
            lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis
            at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac,
            tincidunt fringilla massa. Etiam hendrerit dolor eget ante 
            rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel,
            semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies
            ac ligula. Pellentesque convallis  elit nisi, id vulputate ipsum
            ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse 
            potenti. Integer pellentesque neque et elementum tempus. 
            Curabitur bibendum in ligula ut rhoncus.</p>
				
         <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo
            sed ligula porta semper eu quis enim. Pellentesque pellentesque,
            metus at facilisis hendrerit, lectus velit facilisis leo, quis 
            volutpat turpis arcu quis enim. Nulla viverra lorem elementum 
            interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
            Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () {
      $('#myNav').affix({
         offset: {
            top: 60  
         }
      });
   });
</script>

CSS ile konumlandırma

Yukarıdaki her iki durumda da, içeriğinizin konumlandırılması için CSS sağlamalısınız. Ek eklentisi, her biri belirli bir durumu temsil eden üç sınıf arasında geçiş yapar - .affix, .affix-top ve .affix-bottom . Yukarıdaki kullanım seçeneklerinden herhangi biri için CSS'nizi ayarlamak üzere aşağıdaki adımları izleyin.

• Başlamak için eklenti ekler .affix-topöğenin en üst konumunda olduğunu belirtmek için. Bu noktada CSS konumlandırması gerekmez.

• Eklenmesini istediğiniz öğeyi kaydırmak, gerçek eklemeyi tetiklemelidir. Bu nerede.affix yerine geçer .affix-top ve setleri position: fixed; (Bootstrap'in kod CSS'si tarafından sağlanır).

• Bir alt ofset tanımlanmışsa, bunun yerine geçmesi gerekir .affix ile .affix-bottom. Uzaklıklar isteğe bağlı olduğundan, birini ayarlamak uygun CSS'yi ayarlamanızı gerektirir. Bu durumda ekleyinposition: absolute; gerektiğinde.

Seçenekler

Aşağıdaki tabloda listelendiği gibi veri öznitelikleri veya JavaScript aracılığıyla geçirilebilecek belirli seçenekler vardır -

Izgara nedir?

Grafik tasarımda ızgara, içeriği yapılandırmak için kullanılan bir dizi kesişen düz (dikey, yatay) çizgiden oluşan bir yapıdır (genellikle iki boyutlu). Baskı tasarımında düzen ve içerik yapısını tasarlamak için yaygın olarak kullanılır. Web tasarımında HTML ve CSS kullanarak hızlı ve etkili bir şekilde tutarlı bir mizanpaj oluşturmak çok etkili bir yöntemdir.

Bootstrap Grid Sisteminin Çalışması

Izgara sistemleri, içeriğinizi barındıran bir dizi satır ve sütun aracılığıyla sayfa düzenleri oluşturmak için kullanılır. Bootstrap ızgara sistemi şu şekilde çalışır -

• Satırlar bir .container uygun hizalama ve dolgu için sınıf.

• Yatay sütun grupları oluşturmak için satırları kullanın.

• İçerik sütunların içine yerleştirilmelidir ve yalnızca sütunlar satırların hemen alt öğeleri olabilir.

• Önceden tanımlanmış ızgara sınıfları gibi .row and .col-xs-4hızlı ızgara düzenleri oluşturmak için kullanılabilir. Daha fazla anlamsal düzen için LESS mixins de kullanılabilir.

• Sütunlar, dolgu yoluyla cilt payları (sütun içeriği arasındaki boşluklar) oluşturur. Bu dolgu, ilk ve son sütun için negatif kenar boşluğu ile satırlarda kaydırılır..rows.

• Izgara sütunları, yaymak istediğiniz on iki kullanılabilir sütunun sayısı belirlenerek oluşturulur. Örneğin, üç eşit sütun üç kullanır.col-xs-4.

Bootstrap, tablo oluşturmak için temiz bir düzen sağlar. Bootstrap tarafından desteklenen bazı tablo öğeleri şunlardır:

Form Düzeni

Bootstrap size aşağıdaki form düzeni türlerini sağlar -

• Dikey (varsayılan) form
• Satır içi form
• Yatay form

Dikey veya Temel Form

Temel form yapısı Bootstrap ile birlikte gelir; bireysel form kontrolleri otomatik olarak bazı genel stilleri alır. Temel bir form oluşturmak için aşağıdakileri yapın -

• Ana <form> öğesine bir rol formu ekleyin .

• .Form-group sınıfı ile bir <div> içindeki etiketleri ve denetimleri sarmalayın . Optimum aralık için bu gereklidir.

• Tüm metinsel <input>, <textarea> ve <select> öğelerine bir .form-control sınıfı ekleyin .

Satır İçi Form

Tüm öğelerin satır içi, sola hizalanmış ve etiketlerin yan yana olduğu bir form oluşturmak için <form> etiketine .form-inline sınıfını ekleyin .

Yatay Form

Yatay formlar diğerlerinden sadece işaret miktarı açısından değil, formun sunumunda da ayrılmaktadır. Yatay düzeni kullanan bir form oluşturmak için aşağıdakileri yapın -

• Ana <form> öğesine bir .form-horizontal sınıfı ekleyin .

• .Form-group sınıfı ile bir <div> içindeki etiketleri ve denetimleri sarmalayın .

• Etiketlere bir .control-label sınıfı ekleyin .

Bootstrap, aşağıdaki tabloda özetlenen, stil düğmeleri için bazı seçenekler sunar -

Bootstrap, görüntülere bazı basit stilleri uygulamak için kullanılabilecek üç sınıf sağlar -

• .img-rounded - görüntüye yuvarlatılmış köşeler vermek için border-radius: 6px ekler .

• .img-circle - border-radius: 500px ekleyerek tüm resmi yuvarlak hale getirir .

• .img-thumbnail - biraz dolgu ve gri bir kenarlık ekler:

Bootstrap, daha hızlı mobil uyumlu geliştirme için birkaç yardımcı sınıf sağlar. Bunlar, büyük, küçük ve orta büyüklükteki cihazlarla birlikte medya sorgusu yoluyla içeriği cihaza göre göstermek ve gizlemek için kullanılabilir.

Bunları idareli kullanın ve aynı sitenin tamamen farklı sürümlerini oluşturmaktan kaçının. Responsive utilities are currently only available for block and table toggling.

Bootstrap, gezinme öğelerini şekillendirmek için birkaç farklı seçenek sunar. Hepsi aynı işaretlemeyi ve .nav temel sınıfını paylaşır. Bootstrap ayrıca işaretleme ve durumları paylaşmak için bir yardımcı sınıf sağlar. Her stil arasında geçiş yapmak için değiştirici sınıflarını değiştirin.

Bootstrap, Blogları şekillendirmek için birkaç farklı seçenek sunar. Blog öğelerinden bazıları Yorum kutusu, blog gönderisi, blog alt bilgisi vb.

Materyal Tasarım nedir

Materyal tasarım, platformlar arasında görsel, hareket ve etkileşim tasarımı için kapsamlı bir kılavuzdur

Bootstrap, Gezinme kaydırıcısını şekillendirmek için birkaç farklı seçenek sunar. Bazı örnekler aşağıda gösterildiği gibidir -

Bootstrap, Time çizgisini şekillendirmek için birkaç farklı seçenek sunar. Aşağıda gösterildiği gibi bazı örnekler -

Uyarılar, kullanıcıya mesajların stilini belirlemek için bir yol sağlar. Tipik kullanıcı eylemleri için bağlamsal geribildirim mesajları sağlarlar. Aşağıda gösterilen bazı uyarı örnekleri -

Bootstrap, yönetici arayüzünü şekillendirmek için birkaç farklı seçenek sunar. Aşağıda gösterildiği gibi bazı yönetici arayüzleri -

Ajax, web sayfaları ve web sunucuları ile iletişim kurmak için kullanılır. Aşağıda gösterildiği gibi ajax ve önyükleme tabanlı bazı örnekler -

Bootstrap, kaydırıcı için birkaç farklı seçenek sunar. Aşağıda gösterildiği gibi sekmeli kaydırıcı -

Bootstrap, altyazılar için birkaç farklı seçenek sunar. Küçük Resim Başlığı Hover Efekti aşağıda gösterildiği gibi -

Bootstrap, harita için birkaç farklı seçenek sunar. örnek harita örneği aşağıda gösterildiği gibidir -

Bootstrap, takvimler için birkaç farklı seçenek sunar. örnek takvim örneği aşağıda gösterildiği gibidir -

Bootstrap, Sosyal simgeler için birkaç farklı seçenek sunar. Sosyal simgelerin örnek örnekleri aşağıda gösterildiği gibidir -

Bootstrap, yazı tipi olarak simgeler için birkaç farklı seçenek sunar. örnek simge örnekleri aşağıda gösterildiği gibidir -

Bootstrap, Bootstrap Elements'i şekillendirmek için birkaç farklı seçenek sunar.Aşağıda gösterildiği gibi bazı önyükleme öğeleri -