Başlıklar

Tüm HTML başlıkları, <h1>aracılığıyla <h6>kullanılabilir.

h1. Başlık 1

h2. Başlık 2

h3. Başlık 3

h4. Başlık 4

h5. Başlık 5

h6. Başlık 6

Vücut kopya

Bootstrap'in genel varsayılanı font-size, 20 piksel ile 14 pikseldirline-height . Bu, ve tüm paragraflara uygulanır. Ek olarak, (paragraflar) satır yüksekliklerinin yarısı kadar bir alt kenar boşluğu alır (varsayılan olarak 10 piksel).<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ve magnis doğumdan uzak montes, nascetur ridiculus mus. Nullam kimliği dolor kimliği nibh ultricies vehicula.

Cum sociis natoque penatibus ve magnis doğumdan uzak montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id, eget metus'ta elit olmayan porta gravida. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Müşteri adayı kopyası

Ekleyerek bir paragrafın öne çıkmasını sağlayın .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est commodo luctus.

<p class = "kurşun" > ... </p>

Daha Az ile Oluşturuldu

Tipografik ölçek, değişkenler.less : @baseFontSizeve 'deki iki AZ değişkeni temel alır @baseLineHeight. Birincisi, baştan sona kullanılan temel yazı tipi boyutu ve ikincisi, temel satır yüksekliğidir. Tüm türümüzün ve daha fazlasının kenar boşluklarını, dolgularını ve satır yüksekliklerini oluşturmak için bu değişkenleri ve bazı basit matematiği kullanırız. Bunları özelleştirin ve Bootstrap uyarlanır.

Vurgu

Hafif stillerle HTML'nin varsayılan vurgu etiketlerini kullanın.

`<small>`

Satır içi veya metin bloklarının vurgusunu kaldırmak için küçük etiketi kullanın.

Bu metin satırı, ince baskı olarak ele alınmalıdır.

<p> <small> Bu metin satırı ince baskı olarak ele alınmalıdır. </küçük> </p>

Gözü pek

Daha ağır bir yazı tipi ağırlığına sahip bir metin parçacığını vurgulamak için.

Aşağıdaki metin parçası, kalın metin olarak işlenir .

<strong> kalın metin olarak işlendi </strong>

italik

Bir metin parçasını italik olarak vurgulamak için.

Aşağıdaki metin parçacığı, italik metin olarak işlenir .

<em> italik metin olarak işlendi </em>

Önüne bak!<b>HTML5'te kullanmaktan çekinmeyin <i>. çoğunlukla ses, teknik terimler vb. için <b>ek bir önem taşımadan kelimeleri veya cümleleri vurgulamak içindir .<i>

hizalama sınıfları

Metin hizalama sınıflarıyla metni bileşenlere kolayca yeniden hizalayın.

Sola hizalanmış metin.

Ortaya hizalanmış metin.

Sağa hizalanmış metin.

<p class = "metin-sol" > Sola hizalanmış metin. </p> 
<p class = "metin merkezi" > Ortaya hizalanmış metin. </p> 
<p class = "metin-sağ" > Sağa hizalanmış metin. </p>

Vurgu sınıfları

Bir avuç vurgu yardımcı sınıfıyla anlamı renkle iletin.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem maleuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class = "sessiz" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p sınıfı = "metin uyarısı" > Etiam porta sem maleuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla metus olmayan auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est noncommodo luctus, nisi erat porttitor ligula. </p>

Kısaltmalar

<abbr>Fareyle üzerine gelindiğinde genişletilmiş sürümü göstermek için kısaltmalar ve kısaltmalar için HTML öğesinin stilize uygulaması . Niteliği olan kısaltmaların, titlehafif noktalı bir alt kenarlığı ve üzerine gelindiğinde ek bağlam sağlayan bir yardım imleci vardır.

`<abbr>`

Bir kısaltmanın uzun süre üzerine gelindiğinde genişletilmiş metin için titleözniteliği ekleyin.

Öznitelik kelimesinin kısaltması attr'dir .

<abbr title = "özellik" > öznitelik </abbr>

`<abbr class="initialism">`

.initialismBiraz daha küçük yazı tipi boyutu için bir kısaltma ekleyin .

HTML , dilimlenmiş ekmekten sonraki en iyi şeydir.

<abbr title = "Köprü Metni Biçimlendirme Dili" sınıfı = "başlangıç" > HTML </abbr>

adresler

En yakın ata veya tüm çalışma grubu için iletişim bilgilerini sunun.

`<address>`

Tüm satırları ile sonlandırarak biçimlendirmeyi koruyun <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
S: (123) 456-7890

Tam Ad
[email protected]

<adres>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  San Francisco, CA 94107 <br>
  <abbr title = "Telefon" > S: </abbr> (123) 456-7890 
</adres>
 
<adres>
  <strong> Tam Ad </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</adres>

blok alıntılar

Belgenizdeki başka bir kaynaktan içerik bloklarını alıntılamak için.

Varsayılan blok alıntı

Alıntı olarak <blockquote>herhangi bir HTML'yi sarın . Düz alıntılar için bir <p>.

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bir ante tamsayı pozu.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bir ante tamsayı pozu. </p>
</blockquote>

Blok alıntı seçenekleri

Standart bir blok alıntıdaki basit varyasyonlar için stil ve içerik değişiklikleri.

Bir kaynağı adlandırma

<small>Kaynağı tanımlamak için etiket ekleyin . Kaynak çalışmanın adını içine sarın <cite>.

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bir ante tamsayı pozu.
Kaynak Başlığında ünlü biri

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bir ante tamsayı pozu. </p>
  <small> Ünlü biri <cite title = "Source Title" > Source Title </cite></small> 
</blockquote>

alternatif ekranlar

.pull-rightKayan, sağa hizalanmış blok alıntı için kullanın .

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bir ante tamsayı pozu.
Kaynak Başlığında ünlü biri

<blockquote sınıfı = "sağa çekme" > 
  ...
</blockquote>

Listeler

sırasız

Sıralamanın açıkça önemli olmadığı öğelerin listesi .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Massa'da tamsayı molestie lorem
Pretium nisl aliquet'te facilisis
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor ilmi

<ul>
  <li> ... </li>
</ul>

sipariş edildi

Sıralamanın açıkça önemli olduğu öğelerin listesi .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Massa'da tamsayı molestie lorem
Pretium nisl aliquet'te facilisis
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor ilmi

<ol>
  <li> ... </li>
</ol>

tarzsız

Liste öğelerindeki varsayılan list-styleve sol dolguyu kaldırın (yalnızca acil çocuklar).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Massa'da tamsayı molestie lorem
Pretium nisl aliquet'te facilisis
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor ilmi

<ul class = "stilsiz" > 
  <li> ... </li>
</ul>

Çizgide

inline-blockTüm liste öğelerini hafif dolgulu tek bir satıra yerleştirin .

lorem ipsum
Phasellus iaculis
boş volutpat

<ul sınıfı = "satır içi" > 
  <li> ... </li>
</ul>

Tanım

İlişkili açıklamalarıyla birlikte terimlerin listesi.

Açıklama listeleri: Bir açıklama listesi, terimleri tanımlamak için mükemmeldir.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id, eget metus'ta elit olmayan porta gravida.
Malesuada limanı: Etiam porta sem maleuada magna mollis euismod.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Yatay açıklama

Terimleri ve açıklamaları <dl>yan yana sıralayın.

Açıklama listeleri: Bir açıklama listesi, terimleri tanımlamak için mükemmeldir.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id, eget metus'ta elit olmayan porta gravida.
Malesuada limanı: Etiam porta sem maleuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl sınıfı = "dl-yatay" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Önüne bak!Yatay açıklama listeleri, sol sütun düzeltmesine sığmayacak kadar uzun olan terimleri kısaltır text-overflow. Daha dar görünümlerde, varsayılan yığılmış düzene dönüşeceklerdir.

Çizgide

Satır içi kod parçacıklarını ile sarın <code>.

Örneğin, <section>satır içi olarak sarılmalıdır.

Örneğin , <code > & lt ; bölüm & gt ;</ code > satır içi olarak sarılmalıdır .

Temel blok

<pre>Birden çok kod satırı için kullanın . Doğru işleme için koddaki herhangi bir açılı ayraçtan kaçındığınızdan emin olun.

<p>Örnek metin burada...</p>

<pre>
  <p>Örnek metin burada...</p>
</pre>

Önüne bak!<pre>Etiketlerin içindeki kodu mümkün olduğunca sola yakın tuttuğunuzdan emin olun ; tüm sekmeleri işleyecektir.

.pre-scrollableİsteğe bağlı olarak, maksimum yüksekliği 350 piksel ayarlayacak ve bir y ekseni kaydırma çubuğu sağlayacak sınıfı ekleyebilirsiniz .

Varsayılan stiller

Temel stil için (hafif dolgu ve yalnızca yatay bölücüler) temel sınıfı .tableherhangi bir <table>.

#	İlk adı	Soy isim	Kullanıcı adı
1	İşaret	Otto	@mdo
2	Yakup	Thornton	@yağ
3	Larry	kuş	@twitter

<tablo sınıfı = "tablo" > 
  …
</tablo>

İsteğe bağlı sınıflar

Aşağıdaki sınıflardan herhangi birini .tabletemel sınıfa ekleyin.

`.table-striped`

<tbody>CSS seçici aracılığıyla herhangi bir tablo satırına zebra şeritleme ekler :nth-child(IE7-8'de mevcut değildir).

#	İlk adı	Soy isim	Kullanıcı adı
1	İşaret	Otto	@mdo
2	Yakup	Thornton	@yağ
3	Larry	kuş	@twitter

<tablo sınıfı = "tablo tablo çizgili" > 
  …
</tablo>

`.table-bordered`

Tabloya kenarlıklar ve yuvarlatılmış köşeler ekleyin.

#	İlk adı	Soy isim	Kullanıcı adı
1	İşaret	Otto	@mdo
1	İşaret	Otto	@getbootstrap
2	Yakup	Thornton	@yağ
3	Kuş Larry		@twitter

<tablo sınıfı = "tabloyla sınırlanmış tablo" > 
  …
</tablo>

`.table-hover`

içindeki tablo satırlarında fareyle üzerine gelme durumunu etkinleştirin <tbody>.

#	İlk adı	Soy isim	Kullanıcı adı
1	İşaret	Otto	@mdo
2	Yakup	Thornton	@yağ
3	Kuş Larry		@twitter

<table class = "table table-hover" > 
  …
</tablo>

`.table-condensed`

Hücre dolgusunu yarıya indirerek masaları daha kompakt hale getirir.

#	İlk adı	Soy isim	Kullanıcı adı
1	İşaret	Otto	@mdo
2	Yakup	Thornton	@yağ
3	Kuş Larry		@twitter

<tablo sınıfı = "tablo yoğunlaştırılmış" > 
  …
</tablo>

İsteğe bağlı satır sınıfları

Tablo satırlarını renklendirmek için bağlamsal sınıfları kullanın.

Sınıf	Tanım
`.success`	Başarılı veya olumlu bir eylemi gösterir.
`.error`	Tehlikeli veya potansiyel olarak olumsuz bir eylemi belirtir.
`.warning`	Dikkat edilmesi gerekebilecek bir uyarıyı belirtir.
`.info`	Varsayılan stillere alternatif olarak kullanılır.

#	Ürün	Ödeme Alındı	Durum
1	TB - Aylık	01/04/2012	Onaylı
2	TB - Aylık	02/04/2012	reddedildi
3	TB - Aylık	03/04/2012	Askıda olması
4	TB - Aylık	04/04/2012	Onaylamak için arayın

...
  < tr sınıfı = "başarı" >
    <td> 1 < /td>
    <td>TB - Aylık</ td >
    < td > 01/04/2012 < / td >
    <td>Onaylandı</ td >
  </ tr >
...

Desteklenen tablo işaretlemesi

Desteklenen tablo HTML öğelerinin listesi ve bunların nasıl kullanılması gerektiği.

Etiket	Tanım
`<table>`	Verileri tablo biçiminde görüntülemek için sarma öğesi
`<thead>`	`<tr>`Tablo sütunlarını etiketlemek için tablo başlığı satırları ( ) için kapsayıcı öğesi
`<tbody>`	`<tr>`Tablonun gövdesindeki tablo satırları ( ) için kapsayıcı öğesi
`<tr>`	Tek bir satırda görünen bir dizi tablo hücresi ( `<td>`veya ) için kapsayıcı öğesi`<th>`
`<td>`	Varsayılan tablo hücresi
`<th>`	Sütun (veya kapsam ve yerleşime bağlı olarak satır) etiketleri için özel tablo hücresi
`<caption>`	Tablonun ne içerdiğinin açıklaması veya özeti, özellikle ekran okuyucular için yararlıdır

<tablo>
  <caption> ... </caption>
  <kafa>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <vücut>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</tablo>

Varsayılan stiller

<form>Bireysel form kontrolleri stil alır, ancak biçimlendirmede veya büyük değişikliklerde gerekli herhangi bir temel sınıf olmadan . Form denetimlerinin üstünde yığılmış, sola hizalanmış etiketlerle sonuçlanır.

<form>
  <alan kümesi>
    <efsane> Efsane </efsane>
    <label> Etiket adı </label>
    <input type = "text" yer tutucu = "Bir şey yazın..." >  
    <span class = "help-block" > Örnek blok düzeyinde yardım metni burada. </span> 
    <etiket sınıfı = "onay kutusu" > 
      <input type = "onay kutusu" > Beni kontrol et 
    </etiket>
    <button type = "gönder" sınıfı = "btn" > Gönder </button>  
  </fieldset>
</form>

İsteğe bağlı düzenler

Bootstrap ile birlikte, yaygın kullanım durumları için isteğe bağlı üç form düzeni dahildir.

Arama Formu

Fazladan yuvarlatılmış bir metin girişi için forma .form-searchve forma ekleyin ..search-query<input>

<form sınıfı = "form arama" > 
  <input type = "text" class = "giriş aracı arama sorgusu" >  
  <button type = "gönder" sınıfı = "btn" > Ara </button>  
</form>

satır içi formu

.form-inlineKompakt bir düzen için sola hizalı etiketler ve satır içi blok denetimleri ekleyin .

<form sınıfı = "form-inline" > 
  <input type = "text" class = "input-small" yer tutucusu = "E-posta" >   
  <input type = "password" class = "input-small" yer tutucusu = "Password" >   
  <etiket sınıfı = "onay kutusu" > 
    <input type = "onay kutusu" > Beni hatırla 
  </etiket>
  <button type = "submit" class = "btn" > Oturum aç </button>  
</form>

yatay form

Etiketleri sağa hizalayın ve kontrollerle aynı satırda görünmelerini sağlamak için sola kaydırın. Varsayılan bir formdan en fazla biçimlendirme değişikliğini gerektirir:

.form-horizontalforma ekle
Etiketleri ve kontrolleri içe sarın.control-group
.control-labeletikete ekle
.controlsUygun hizalama için ilişkili kontrolleri sarın

<form sınıfı = "form-yatay" > 
  <div sınıfı = "kontrol grubu" > 
    <label class = "kontrol etiketi" için = "inputEmail" > E-posta </label>  
    <div sınıfı = "kontroller" > 
      <input type = "text" id = "inputEmail" yer tutucu = "E-posta" >   
    </div>
  </div>
  <div sınıfı = "kontrol grubu" > 
    <label class = "kontrol etiketi" için = "inputPassword" > Şifre </label>  
    <div sınıfı = "kontroller" > 
      <input type = "password" id = "inputPassword" yer tutucu = "Password" >   
    </div>
  </div>
  <div sınıfı = "kontrol grubu" > 
    <div sınıfı = "kontroller" > 
      <etiket sınıfı = "onay kutusu" > 
        <input type = "onay kutusu" > Beni hatırla 
      </etiket>
      <button type = "submit" class = "btn" > Oturum aç </button>  
    </div>
  </div>
</form>

Desteklenen form kontrolleri

Örnek form düzeninde desteklenen standart form kontrol örnekleri.

Girişler

En yaygın form denetimi, metin tabanlı giriş alanları. Tüm HTML5 türleri için destek içerir: metin, şifre, tarihsaat, tarih-saat-yerel, tarih, ay, saat, hafta, sayı, e-posta, url, arama, tel ve renk.

typeHer zaman belirtilen bir kullanımını gerektirir .

<input type = "metin" yer tutucusu = "Metin girişi" >

metin alanı

Birden çok metin satırını destekleyen form kontrolü. rowsÖzelliği gerektiği gibi değiştirin .

<textarea satırları = "3" ></textarea>

Onay kutuları ve radyolar

Onay kutuları bir listedeki bir veya birkaç seçeneği seçmek içindir, radyolar ise birçok seçenek arasından birini seçmek içindir.

Varsayılan (yığılmış)

<etiket sınıfı = "onay kutusu" > 
  <input type = "onay kutusu" değeri = "" >  
  Birinci seçenek şu ve bu—neden harika olduğunu eklediğinizden emin olun
</etiket>
 
<etiket sınıfı = "radyo" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1 " değeri = "option1" işaretlendi >     
  Birinci seçenek şu ve bu—neden harika olduğunu eklediğinizden emin olun
</etiket>
<etiket sınıfı = "radyo" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2 " değeri = "option2" >    
  İkinci seçenek başka bir şey olabilir ve onu seçmek birinci seçeneğin seçimini kaldırır
</etiket>

Satır içi onay kutuları

Sınıfı bir dizi onay kutusuna ekleyin .inlineveya aynı satırda görünen kontroller için radyolar.

<label class = "satır içi onay kutusu" > 
  <input type = "checkbox" id = "inlineCheckbox1" değer = "option1" > 1   
</etiket>
<label class = "satır içi onay kutusu" > 
  <input type = "checkbox" id = "inlineCheckbox2" değer = "option2" > 2   
</etiket>
<label class = "satır içi onay kutusu" > 
  <input type = "checkbox" id = "inlineCheckbox3" değer = "option3" > 3   
</etiket>

seçer

multiple="multiple"Birden çok seçeneği aynı anda göstermek için varsayılan seçeneği kullanın veya a öğesini belirtin .

<seç>
  <seçenek> 1 </seçenek>
  <seçenek> 2 </seçenek>
  <seçenek> 3 </seçenek>
  <seçenek> 4 </seçenek>
  <seçenek> 5 </seçenek>
</select>
 
< çoklu seç = "çoklu" > 
  <seçenek> 1 </seçenek>
  <seçenek> 2 </seçenek>
  <seçenek> 3 </seçenek>
  <seçenek> 4 </seçenek>
  <seçenek> 5 </seçenek>
</select>

Form denetimlerini genişletme

Bootstrap, mevcut tarayıcı kontrollerinin üzerine ek olarak, diğer faydalı form bileşenlerini de içerir.

Başa eklenen ve eklenen girdiler

Herhangi bir metin tabanlı girişten önce veya sonra metin veya düğmeler ekleyin. selectÖğelerin burada desteklenmediğini unutmayın .

Varsayılan seçenekler

.add-onBir girişe metin eklemek veya başına eklemek için an ve inputan'ı iki sınıftan biriyle sarın .

<div sınıfı = "girdi-başına" > 
  <span class = "eklenti" > @ </span> 
  <input class = "span2" id = "prependedInput " type = "text" yer tutucu = "Kullanıcı adı" >    
</div>
<div class = "giriş-ekleme" > 
  <input class = "span2" id = "appendedInput " type = "text" >   
  <span class = "eklenti" > .00 </span> 
</div>

kombine

.add-onBir girişi başına eklemek ve eklemek için hem sınıfları hem de iki örneğini kullanın .

<div class = "girdi-başa giriş-ekleme" > 
  <span class = "eklenti" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  <span class = "eklenti" > .00 </span> 
</div>

Metin yerine düğmeler

Bir girişe bir düğme (veya iki) eklemek için <span>metin içeren yerine a öğesini kullanın..btn

<div class = "giriş-ekleme" > 
  <input class = "span2" id = "appendedInputButton " type = "metin" >   
  <button class = "btn" type = "button" > Başla! </button>  
</div>

<div class = "giriş-ekleme" > 
  <input class = "span2" id = "appendedInputButtons " type = "text" >   
  <button class = "btn" type = "button" > Ara </button>  
  <button class = "btn" type = "button" > Seçenekler </button>  
</div>

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

<div class = "giriş-ekleme" > 
  <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  <div sınıfı = "btn grubu" > 
    <button class = "btn açılır-geçiş" data-toggle = "açılır menü" >  
      Eylem
      <span class = "şapka" ></span> 
    </button>
    <ul class = "açılır menü" > 
      ...
    </ul>
  </div>
</div>

<div sınıfı = "girdi-başına" > 
  <div sınıfı = "btn grubu" > 
    <button class = "btn açılır-geçiş" data-toggle = "açılır menü" >  
      Eylem
      <span class = "şapka" ></span> 
    </button>
    <ul class = "açılır menü" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton " type = "text" >   
</div>

<div class = "girdi-başa giriş-ekleme" > 
  <div sınıfı = "btn grubu" > 
    <button class = "btn açılır-geçiş" data-toggle = "açılır menü" >  
      Eylem
      <span class = "şapka" ></span> 
    </button>
    <ul class = "açılır menü" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  <div sınıfı = "btn grubu" > 
    <button class = "btn açılır-geçiş" data-toggle = "açılır menü" >  
      Eylem
      <span class = "şapka" ></span> 
    </button>
    <ul class = "açılır menü" > 
      ...
    </ul>
  </div>
</div>

Bölümlere ayrılmış açılır gruplar

<form>
  <div sınıfı = "girdi-başına" > 
    <div class = "btn-group" > ... </div> 
    <giriş türü = "metin" > 
  </div>
  <div class = "giriş-ekleme" > 
    <giriş türü = "metin" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Arama Formu

<form sınıfı = "form arama" > 
  <div class = "giriş-ekleme" > 
    <input type = "text" class = "span2 arama sorgusu" >  
    <button type = "gönder" sınıfı = "btn" > Ara </button>  
  </div>
  <div sınıfı = "girdi-başına" > 
    <button type = "gönder" sınıfı = "btn" > Ara </button>  
    <input type = "text" class = "span2 arama sorgusu" >  
  </div>
</form>

Kontrol boyutlandırma

Göreceli boyutlandırma sınıflarını kullanın .input-largeveya sınıfları kullanarak girdilerinizi ızgara sütun boyutlarıyla eşleştirin .span*.

Blok seviyesi girişleri

Herhangi bir <input>veya <textarea>öğenin blok düzeyinde bir öğe gibi davranmasını sağlayın.

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

göreli boyutlandırma

<input sınıfı = "input-mini" type = "text" yer tutucu = ".input-mini" >   
<input class = "input-small" type = "text" yer tutucu = ".input-small" >   
<input sınıfı = "input-medium" type = "text" yer tutucu = ".input-medium" >   
<input sınıfı = "input-large" type = "text" yer tutucu = ".input-large" >   
<input sınıfı = "input-xlarge" type = "text" yer tutucu = ".input-xlarge" >   
<input sınıfı = "input-xxlarge" type = "text" yer tutucu = ".input-xxlarge" >

Önüne bak!Gelecek sürümlerde, bu göreli girdi sınıflarının kullanımını düğme boyutlarımıza uyacak şekilde değiştireceğiz. Örneğin, .input-largebir girdinin dolgusunu ve yazı tipi boyutunu artıracaktır.

ızgara boyutlandırma

Izgara sütunlarının aynı boyutlarıyla eşleşen girdiler için .span1to kullanın ..span12

<input class = "span1" type = "text" yer tutucu = ".span1" >   
<input class = "span2" type = "text" yer tutucu = ".span2" >   
<input class = "span3" type = "text" yer tutucu = ".span3" >   
< sınıf seçin = "span1" > 
  ...
</select>
< sınıf seçin = "span2" > 
  ...
</select>
< sınıf seçin = "span3" > 
  ...
</select>

Satır başına birden çok ızgara girişi için, uygun boşluk için değiştirici sınıfını kullanın.controls-row . Boşluğu daraltmak için girdileri yüzdürür, uygun kenar boşluklarını ayarlar ve kayan noktayı temizler.

<div sınıfı = "kontroller" > 
  <input class = "span5" type = "text" yer tutucusu = ".span5" >   
</div>
<div class = "kontroller-satırını kontrol eder" > 
  <input class = "span4" type = "text" yer tutucu = ".span4" >   
  <input class = "span1" type = "text" yer tutucu = ".span1" >   
</div>
...

düzenlenemez girişler

Verileri, gerçek form işaretlemesini kullanmadan düzenlenemeyen bir formda sunun.

<span class = "input-xlarge uneditable-input" > Burada bir miktar değer </span>

Form eylemleri

Bir grup eylemle (düğmeler) bir formu sonlandırın. Bir içine yerleştirildiğinde .form-actions, düğmeler form kontrolleriyle aynı hizaya gelmek için otomatik olarak girintiler oluşturur.

<div class = "form-eylemler" > 
  <button type = "submit" class = "btn btn-birincil" > Değişiklikleri kaydet </button>  
  <button type = "button" class = "btn" > İptal </button>  
</div>

Yardım Metni

Form kontrolleri çevresinde görünen yardım metni için satır içi ve blok düzeyinde destek.

satır içi yardım

<input type = "text" ><span class = "help-inline" > Satır içi yardım metni </span>

Yardımı engelle

<input type = "text" ><span class = "help-block" > Yeni bir satıra ayrılan ve bir satırın ötesine geçebilen daha uzun bir yardım metni bloğu. </span>

Form kontrol durumları

Form kontrolleri ve etiketleri hakkında temel geri bildirim durumları ile kullanıcılara veya ziyaretçilere geri bildirim sağlayın.

Giriş odağı

outlineBazı form denetimlerinde varsayılan stilleri kaldırır ve box-shadowyerine a uygularız :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Bu odaklandı..." >

Geçersiz girişler

ile varsayılan tarayıcı işlevi aracılığıyla stil girişleri :invalid. a belirtin , alan isteğe bağlı değilse özniteliği typeekleyin ve (varsa) bir .requiredpattern

Bu, CSS sözde seçicileri için destek eksikliği nedeniyle Internet Explorer 7-9 sürümlerinde mevcut değildir.

<input class = "span3" type = "email" gerekli >

Devre dışı girişler

disabledKullanıcı girişini önlemek ve biraz farklı bir görünümü tetiklemek için bir girişe özniteliği ekleyin .

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Burada giriş devre dışı..." devre dışı >

Doğrulama durumları

Bootstrap, hata, uyarı, bilgi ve başarı mesajları için doğrulama stilleri içerir. Kullanmak için çevreye uygun sınıfı ekleyin .control-group.

<div class = "kontrol grubu uyarısı" > 
  <label class = "control-label" for = "inputWarning" > Uyarılı giriş </label>  
  <div sınıfı = "kontroller" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Bir şeyler ters gitmiş olabilir </span> 
  </div>
</div>
 
<div class = "kontrol grubu hatası" > 
  <label class = "control-label" for " inputError " > Hatalı giriş </label>  
  <div sınıfı = "kontroller" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Lütfen hatayı düzeltin </span> 
  </div>
</div>
 
<div class = "kontrol grubu bilgisi" > 
  <label class = "control-label" for = "inputInfo" > Bilgi içeren giriş </label>  
  <div sınıfı = "kontroller" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Kullanıcı adı zaten alınmış </span> 
  </div>
</div>
 
<div class = "kontrol grubu başarısı" > 
  <label class = "control-label" for = "inputSuccess" > Giriş başarılı </label>  
  <div sınıfı = "kontroller" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "yardım içi" > Woohoo! </span> 
  </div>
</div>

Varsayılan düğmeler

.btnDüğme stilleri, uygulanan sınıfla her şeye uygulanabilir. <a>Ancak, genellikle bunları en iyi işleme için yalnızca ve <button>öğelere uygulamak isteyeceksiniz .

Buton	sınıf=""	Tanım
	`btn`	Gradyanlı standart gri düğme
	`btn btn-primary`	Ekstra görsel ağırlık sağlar ve bir dizi düğmede birincil eylemi tanımlar
	`btn btn-info`	Varsayılan stillere alternatif olarak kullanılır
	`btn btn-success`	Başarılı veya olumlu bir eylemi gösterir
	`btn btn-warning`	Bu işlemle dikkatli olunması gerektiğini belirtir
	`btn btn-danger`	Tehlikeli veya potansiyel olarak olumsuz bir eylemi belirtir
	`btn btn-inverse`	Anlamsal bir eyleme veya kullanıma bağlı olmayan alternatif koyu gri düğme
	`btn btn-link`	Düğme davranışını korurken bir bağlantı gibi görünmesini sağlayarak bir düğmenin vurgusunu kaldırın

Çapraz tarayıcı uyumluluğu

IE9, yuvarlatılmış köşelerde arka plan gradyanlarını kırpmaz, bu yüzden onu kaldırırız. İlgili, IE9, devre dışı bırakılmış buttonöğeleri çöpe atarak, düzeltemeyeceğimiz kötü bir metin gölgesiyle metni gri hale getirir.

Düğme boyutları

Daha büyük veya daha küçük düğmeler mi istiyorsunuz? Ek boyutlar için .btn-large, .btn-smallveya ekleyin ..btn-mini

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Büyük düğme </button>  
  <button class = "btn btn-large" type = "button" > Büyük düğme </button>  
</p>
<p>
  <button class = "btn btn-birincil" type = "button" > Varsayılan düğme </button>  
  <button class = "btn" type = "button" > Varsayılan düğme </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Küçük düğme </button>  
  <button class = "btn btn-small" type = "button" > Küçük düğme </button>  
</p>
<p>
  <button class = "btn btn-mini btn-birincil" type = "button" > Mini düğme </button>  
  <button class = "btn btn-mini" type = "button" > Mini buton </button>  
</p>

Ekleyerek, bir ebeveynin tüm genişliğini kapsayan blok düzeyinde düğmeler oluşturun .btn-block.

<button class = "btn btn-large btn-block btn-birincil" type = "button" > Blok seviyesi düğmesi </button>  
<button class = "btn btn-large btn-block" type = "button" > Blok seviyesi düğmesi </button>

Engelli durumu

Düğmeleri %50 oranında azaltarak tıklanamaz görünmesini sağlayın.

çapa elemanı

.disabledSınıfı <a>düğmelere ekleyin .

Birincil bağlantı Bağlantı

<a href = "#" class = "btn btn-large btn-birincil devre dışı" > Birincil bağlantı </a>  
<a href = "#" class = "btn btn-large devre dışı" > Bağlantı </a>

Önüne bak!.disabledBurada ortak sınıfa benzer bir yardımcı sınıf olarak kullanıyoruz .active, bu nedenle ön ek gerekmez. Ayrıca bu sınıf sadece estetik amaçlıdır; buradaki bağlantıları devre dışı bırakmak için özel JavaScript kullanmanız gerekir.

Düğme öğesi

disabledÖzelliği <button>düğmelere ekleyin .

<button type = "button" class = "btn btn-large btn-birincil devre dışı" devre dışı = "devre dışı" > Birincil düğme </button>   
<button type = "button" class = "btn btn-large" devre dışı > Düğme </button>

Bir sınıf, birden çok etiket

.btnSınıfı bir <a>, <button>, veya <input>öğesinde kullanın .

<a class = "btn" href = "" > Bağlantı </a>  
<button class = "btn" type = "gönder" > Düğme </button>  
<giriş sınıfı = "btn" tipi = "düğme" değeri = "Giriş" >   
<input class = "btn" type = "gönder" değeri = "Gönder" >

En iyi uygulama olarak, tarayıcılar arası oluşturmanın eşleşmesini sağlamak için öğeyi bağlamınızla eşleştirmeye çalışın. Bir varsa , düğmeniz için inputbir kullanın .<input type="submit">

<img>Herhangi bir projede görüntüleri kolayca stillendirmek için bir öğeye sınıflar ekleyin .

<img kaynak = "..." class = "img-yuvarlak" >  
<img kaynak = "..." sınıf = "img-daire" >  
<img kaynak = "..." sınıf = "img-polaroid" >

Önüne bak! .img-roundedve destek .img-circleeksikliği nedeniyle IE7-8'de çalışmaz .border-radius

Simge glifleri

Glyphicons tarafından sağlanan, koyu gri (varsayılan) ve beyaz olarak sunulan hareketli grafik biçiminde 140 simge .

simge-cam
simge-müzik
simge arama
simge zarfı
simge-kalp
simge yıldızı
simge-yıldız-boş
simge kullanıcısı
simge filmi
simge-th-büyük
simge-th
simge listesi
simge-tamam
simge-kaldır
simge yakınlaştırma
simge-uzaklaştırma
simge kapatma
simge sinyali
simge-dişli
simge-çöp
simge-ev
simge dosyası
simge zamanı
simge yolu
simge-indir-alt
simge-indirme
simge yükleme
simge-gelen kutusu
simge-oynatma-daire
simge tekrarı
simge yenileme
simge-liste-alt
simge kilidi
simge-bayrak
simge-kulaklıklar
simge-ses-kapalı
simge sesi kısma
simge-ses açma
simge-qrcode
simge-barkod
simge etiketi
simge etiketleri
simge kitabı
simge-yer imi
simge-baskı
simge kamera
simge-yazı tipi
simge kalın
ikon-italik
simge-metin-yüksekliği
simge-metin-genişliği
simge-sola hizala
simge hizalama merkezi
simge-hizalama-sağa
simge hizala-yasla
simge listesi
simge girintisi-sol
simge girintisi-sağ
simge-facetime-video
simge-resim
simge-kalem
simge-harita-işaretleyici
simge ayarlama
simge tonu
simge düzenleme
simge paylaşımı
simge kontrolü
simge-hareket
simge-adım-geri
simge-hızlı-geri
simge-geri
simge oyunu
simge duraklatma
simge durdurma
simge-ileri
simge-hızlı ileri sar
simge-adım-ileri
simge çıkarma
simge-chevron-sol
simge-chevron-sağ
simge-artı-işareti
simge-eksi-işareti
simge-kaldır-işareti
simge-tamam-işareti
simge-soru-işareti
simge-bilgi-işareti
simge ekran görüntüsü
simge-kaldır-daire
simge-tamam-daire
simge-yasak-daire
simge-ok-sol
simge-ok-sağ
simge-yukarı-ok
simge-ok-aşağı
simge-paylaş-alt
simge-yeniden boyutlandır-dolu
simge-yeniden boyutlandır-küçük
simge artı
simge-eksi
simge-yıldız
simge-ünlem işareti
simge-hediye
simge yaprağı
simge-ateş
simge gözü açık
simge-göz-kapat
simge-uyarı-işareti
simge düzlemi
simge-takvim
simge-rastgele
simge-yorum
simge-mıknatıs
simge-yukarı
simge-chevron-aşağı
simge-retweet
simge-alışveriş-sepeti
simge-klasör-kapat
simge-klasör-açık
simge-yeniden boyutlandır-dikey
simge-yeniden boyutlandır-yatay
simge-hdd
simge-bullhorn
simge çanı
simge sertifikası
simge-başparmak-up
simge-beğen-aşağı
simge-el-sağ
simge-el-sol
simge-el-up
simge-el-aşağı
simge-daire-ok-sağ
simge-daire-ok-sol
simge-daire-yukarı ok
simge-daire-ok-aşağı
simge küresi
simge anahtarı
simge görevleri
simge filtresi
simge-evrak çantası
simge-tam ekran

Glifon ilişkilendirmesi

Glyphicons Halflings normalde ücretsiz olarak mevcut değildir, ancak Bootstrap ve Glyphicons yaratıcıları arasındaki bir düzenleme bunu geliştiriciler olarak size ücretsiz olarak mümkün kılmıştır. Teşekkür olarak, mümkün olduğunda Glyphicons'a isteğe bağlı bir bağlantı eklemenizi rica ediyoruz .

Nasıl kullanılır

Tüm simgeler <i>, ön ekli benzersiz bir sınıfa sahip bir etiket gerektirir icon-. Kullanmak için aşağıdaki kodu hemen hemen her yere yerleştirin:

<i class = "simge arama" ></i>

Ayrıca ters çevrilmiş (beyaz) simgeler için ekstra bir sınıfla hazır hale getirilmiş stiller de mevcuttur. Gezinme ve açılır bağlantılar için vurgulu ve etkin durumlarda bu sınıfı özellikle uygulayacağız.

<i class = "simge arama simgesi beyaz" ></i>

Önüne bak!<i>Düğmelerde veya gezinme bağlantılarında olduğu gibi metin dizelerinin yanında kullanırken, uygun boşluk için etiketten sonra bir boşluk bıraktığınızdan emin olun .

Simge örnekleri

Bunları düğmelerde, bir araç çubuğu için düğme gruplarında, gezinmede veya başa eklenen form girişlerinde kullanın.

Düğmeler

Düğme araç çubuğundaki düğme grubu

<div sınıfı = "btn-araç çubuğu" > 
  <div sınıfı = "btn grubu" > 
    <a class = "btn" href = "#" ><i class = "simge hizalama-sol" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

Bir düğme grubundaki açılır menü

kullanıcı

<div sınıfı = "btn grubu" > 
  <a class = "btn btn-birincil" href = "#" ><i class = "icon-user icon-white" ></i> Kullanıcı </a>   
  <a class = "btn btn-birincil açılır-geçiş" data-toggle = "açılır menü" href = "#" ><span class = "şapka" ></span></a>    
  <ul class = "açılır menü" > 
    <li><a href = "#" ><i class = "icon-kalem" ></i> Düzenle </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Sil </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Yasaklama </a></li>  
    <li sınıf = "bölücü" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Yönetici yap </a></li>  
  </ul>
</div>

Düğme boyutları

Yıldız Yıldız Yıldız

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Yıldız </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Yıldız </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Yıldız </a>

Navigasyon

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Ana Sayfa </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Kitaplık </a></li>  
  <li><a href = "#" ><i class = "icon-kalem" ></i> Uygulamalar </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Çeşitli </a></li>  
</ul>

Form alanları

<div sınıfı = "kontrol grubu" > 
  <label class = "kontrol etiketi" için = "inputIcon" > E-posta adresi </label>  
  <div sınıfı = "kontroller" > 
    <div sınıfı = "girdi-başına" > 
      <span class = "eklenti" ><i class = "simge zarfı" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

tipografi

Başlıklar

h1. Başlık 1

h2. Başlık 2

h3. Başlık 3

h4. Başlık 4

h5. Başlık 5

h6. Başlık 6

Vücut kopya

Müşteri adayı kopyası

Daha Az ile Oluşturuldu

Vurgu

<small>

Gözü pek

italik

hizalama sınıfları

Vurgu sınıfları

Kısaltmalar

<abbr>

<abbr class="initialism">

adresler

<address>

blok alıntılar

Varsayılan blok alıntı

Blok alıntı seçenekleri

Bir kaynağı adlandırma

alternatif ekranlar

Listeler

sırasız

sipariş edildi

tarzsız

Çizgide

Tanım

Yatay açıklama

kod

Çizgide

Temel blok

Tablolar

Varsayılan stiller

İsteğe bağlı sınıflar

.table-striped

.table-bordered

.table-hover

.table-condensed

İsteğe bağlı satır sınıfları

Desteklenen tablo işaretlemesi

Formlar

Varsayılan stiller

İsteğe bağlı düzenler

Arama Formu

satır içi formu

yatay form

Desteklenen form kontrolleri

Girişler

metin alanı

Onay kutuları ve radyolar

Varsayılan (yığılmış)

Satır içi onay kutuları

seçer

Form denetimlerini genişletme

Başa eklenen ve eklenen girdiler

Varsayılan seçenekler

kombine

Metin yerine düğmeler

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

Bölümlere ayrılmış açılır gruplar

Arama Formu

Kontrol boyutlandırma

Blok seviyesi girişleri

göreli boyutlandırma

ızgara boyutlandırma

düzenlenemez girişler

Form eylemleri

Yardım Metni

satır içi yardım

Yardımı engelle

Form kontrol durumları

Giriş odağı

Geçersiz girişler

Devre dışı girişler

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`