Temel CSS

Yeni, tutarlı bir görünüm ve his sağlamak için, temel HTML öğelerinin stili ve genişletilebilir sınıflarla geliştirilmiştir.

Başlıklar ve gövde kopyası

tipografik ölçek

Tüm tipografik ızgara, değişkenler.less dosyamızdaki iki Less değişkenine dayanmaktadır: @baseFontSizeve @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 biraz matematiği kullanırız.

Örnek gövde metni

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.

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.

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

Vurgu, adres ve kısaltma

eleman kullanım İsteğe bağlı
<strong> Önemli bir metin parçasını vurgulamak için Hiçbiri
<em> Vurgulu bir metin parçasını vurgulamak için Hiçbiri
<abbr> Fareyle üzerine gelindiğinde genişletilmiş sürümü göstermek için kısaltmaları ve kısaltmaları sarar

titleGenişletilmiş metin için isteğe bağlı özniteliği dahil et

.initialismBüyük harfli kısaltmalar için sınıfı kullanın .
<address> En yakın atası veya tüm çalışma grubu için iletişim bilgileri için Tüm satırları şununla sonlandırarak biçimlendirmeyi koruyun<br>

vurgu kullanma

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae seçkin libero, bir pharetra augue.

Not: HTML5'te kullanmaktan çekinmeyin <b>, <i>ancak kullanımları biraz değişti. çoğunlukla ses, teknik terimler vb. için <b>ek bir önem taşımadan kelimeleri veya cümleleri vurgulamak içindir .<i>

Örnek adresler

<address>Etiketin nasıl kullanılabileceğine dair iki örnek :

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
S: (123) 456-7890
Tam Ad
[email protected]

Örnek kısaltmalar

Özniteliği olan kısaltmalar, titlehafif noktalı bir alt kenarlığa ve fareyle üzerine gelindiğinde bir yardım imlecine sahiptir. Bu, kullanıcılara fareyle üzerine gelindiğinde bir şeyin gösterileceğine dair ek gösterge sağlar.

initialismBiraz daha küçük bir metin boyutu vererek tipografik uyumu artırmak için sınıfı bir kısaltmaya ekleyin .

HTML , dilimlenmiş ekmekten sonraki en iyi şeydir.

Öznitelik kelimesinin kısaltması attr'dir .

blok alıntılar

eleman kullanım İsteğe bağlı
<blockquote> Başka bir kaynaktan içerik alıntılamak için blok düzeyinde öğe

citeKaynak URL için özellik ekle

Kayan seçenekler için kullanım .pull-leftve sınıflar.pull-right
<small> Kullanıcıya yönelik bir alıntı eklemek için isteğe bağlı öğe, tipik olarak çalışma başlığına sahip bir yazar <cite>Kaynağın başlığının veya adının etrafına yerleştirin

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

Kaynağınızı belirtmek için isteğe bağlı bir öğe ekleyin ve stil amaçları için ondan önce <small>bir kısa çizgi alırsınız .&mdash;

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bir ante venenatis tamsayı durumu. </p>
  3. <small> Ünlü biri </small>
  4. </blockquote>

Örnek blok alıntılar

Varsayılan blok alıntılar şu şekilde biçimlendirilir:

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

Body of work'te ünlü biri

Blok alıntınızı sağa kaydırmak için şunu ekleyin class="pull-right":

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

Body of work'te ünlü biri

Listeler

sırasız

<ul>

  • 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

tarzsız

<ul class="unstyled">

  • 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

sipariş edildi

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Massa'da tamsayı molestie lorem
  4. Pretium nisl aliquet'te facilisis
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor ilmi

Tanım

<dl>

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.

Yatay açıklama

<dl class="dl-horizontal">

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.

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

  1. Örneğin , <code> bölümü < / 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>
  1. <pre>
  2. <p>Örnek metin burada...</p>
  3. </pre>

Not:<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 .

Google Güzelleştir

Aynı <pre>öğeyi alın ve gelişmiş işleme için iki isteğe bağlı sınıf ekleyin.

  1. <p> Örnek metin burada... </p>
  1. <pre class = "güzel baskı
  2. keten" >
  3. <p>Örnek metin burada...</p>
  4. </pre>

Google-code-prettify'ı indirin ve nasıl kullanılacağını öğrenmek için benioku dosyasını görüntüleyin.

Tablo işaretlemesi

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<thead>
<caption> Tablonun ne içerdiğinin açıklaması veya özeti, özellikle ekran okuyucular için yararlıdır
  1. <tablo>
  2. <kafa>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <vücut>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </tablo>

Tablo seçenekleri

İsim Sınıf Tanım
Varsayılan Hiçbiri Stil yok, sadece sütunlar ve satırlar
Temel .table Sadece satırlar arasında yatay çizgiler
bordürlü .table-bordered Köşeleri yuvarlar ve dış kenarlık ekler
Zebra-şerit .table-striped Tek satırlara (1, 3, 5, vb.) açık gri arka plan rengi ekler
yoğun .table-condensed Tüm öğelerde dikey dolguyu 8 pikselden 4 piksele kadar yarıya tdindirirth

Örnek tablolar

1. Varsayılan tablo stilleri

Tablolar, okunabilirliği sağlamak ve yapıyı korumak için yalnızca birkaç kenarlıkla otomatik olarak biçimlendirilir. 2.0 ile .tablesınıf gereklidir.

  1. <tablo sınıfı = "tablo" >
  2. </tablo>
# İlk adı Soy isim Kullanıcı adı
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Larry kuş @twitter

2. Çizgili masa

Zebra çizgileri ekleyerek masalarınızda biraz hava yaratın; sadece .table-stripedsınıfı ekleyin.

Not: Çizgili tablolar :nth-childCSS seçiciyi kullanır ve IE7-IE8'de mevcut değildir.

  1. <tablo sınıfı = "tablo tablo çizgili" >
  2. </tablo>
# İlk adı Soy isim Kullanıcı adı
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Larry kuş @twitter

3. Kenarlı tablo

Estetik amaçlar için tüm masanın etrafına kenarlıklar ve yuvarlatılmış köşeler ekleyin.

  1. <tablo sınıfı = "tabloyla sınırlanmış tablo" >
  2. </tablo>
# İlk adı Soy isim Kullanıcı adı
1 İşaret Otto @mdo
İşaret Otto @getbootstrap
2 Yakup Thornton @yağ
3 Kuş Larry @twitter

4. Yoğunlaştırılmış tablo

.table-condensedTablo hücresi dolgusunu yarıya indirmek için sınıfı ekleyerek tablolarınızı daha kompakt hale getirin (8 pikselden 4 piksele).

  1. <tablo sınıfı = "tablo yoğunlaştırılmış" >
  2. </tablo>
# İlk adı Soy isim Kullanıcı adı
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter

5. Hepsini birleştirin!

Mevcut sınıflardan herhangi birini kullanarak farklı görünümler elde etmek için masa sınıflarından herhangi birini birleştirmekten çekinmeyin.

  1. <table class = "tablo tablo çizgili tablo kenarlıklı tablo yoğun" >
  2. ...
  3. </tablo>
Ad Soyad
# İlk adı Soy isim Kullanıcı adı
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter

Esnek HTML ve CSS

Bootstrap'teki formların en iyi yanı, işaretlemenizde nasıl oluşturursanız oluşturun, tüm girdilerinizin ve kontrollerinizin harika görünmesidir. Gereksiz HTML gerekli değildir, ancak ihtiyaç duyanlar için kalıpları sağlıyoruz.

Daha karmaşık düzenler, kolay şekillendirme ve olay bağlama için kısa ve öz ve ölçeklenebilir sınıflarla birlikte gelir, böylece her adımda ele alınırsınız.

Dört düzen dahil

Bootstrap, dört tür form düzeni desteğiyle birlikte gelir:

  • Dikey (varsayılan)
  • Arama
  • Çizgide
  • Yatay

Farklı form düzenleri türleri, işaretlemede bazı değişiklikler gerektirir, ancak denetimlerin kendisi aynı kalır ve aynı şekilde davranır.

Kontrol durumları ve daha fazlası

Bootstrap'in formları, girdi, textarea ve beklediğiniz seçim gibi tüm temel form kontrolleri için stiller içerir. Ancak, eklenen ve başına eklenen girdiler ve onay kutusu listeleri için destek gibi bir dizi özel bileşenle birlikte gelir.

Her form denetimi türü için hata, uyarı ve başarı gibi durumlar dahildir. Ayrıca, devre dışı bırakılmış kontroller için stiller dahildir.

Dört çeşit form

Bootstrap, yaygın web formlarının dört stili için basit biçimlendirme ve stiller sağlar.

İsim Sınıf Tanım
Dikey (varsayılan) .form-vertical (gerekli değil) Kontroller üzerinde yığılmış, sola hizalanmış etiketler
Çizgide .form-inline Kompakt stil için sola hizalanmış etiket ve satır içi blok kontrolleri
Arama .form-search Tipik bir arama estetiği için ekstra yuvarlak metin girişi
Yatay .form-horizontal Kontrollerle aynı satırda sola, sağa hizalanmış etiketleri kaydırın

Yalnızca form denetimleri kullanan örnek formlar , fazladan işaretleme yok

Temel biçim

Ekstra işaretleme olmadan akıllı ve hafif varsayılanlar.

Örnek blok düzeyinde yardım metni burada.

  1. <form sınıfı = "iyi" >
  2. <label> Etiket adı </label>
  3. <input type = "text" class = "span3" placeholder = "Bir şeyler yazın..." >
  4. <span class = "help-block" > Örnek blok düzeyinde yardım metni burada. </span>
  5. <etiket sınıfı = "onay kutusu" >
  6. <input type = "onay kutusu" > Beni kontrol et
  7. </etiket>
  8. <button type = "gönder" sınıfı = "btn" > Gönder </button>
  9. </form>

Arama Formu

Forma ekleyin .form-searchve ..search-queryinput

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

satır içi formu

.form-inlineForm denetimlerinin dikey hizalamasını ve aralığını hassaslaştırmak için ekleyin .

  1. <form sınıfı = "iyi form-inline" >
  2. <input type = "text" class = "input-small" yer tutucusu = "E-posta" >
  3. <input type = "password" class = "input-small" yer tutucusu = "Password" >
  4. <etiket sınıfı = "onay kutusu" >
  5. <input type = "onay kutusu" > Beni hatırla
  6. </etiket>
  7. <button type = "submit" class = "btn" > Oturum aç </button>
  8. </form>

yatay formlar

Sağda gösterilenler, desteklediğimiz tüm varsayılan form kontrolleridir. İşte madde işaretli liste:

  • metin girişleri (metin, şifre, e-posta vb.)
  • onay kutusu
  • radyo
  • seçme
  • çoklu seçim
  • dosya girişi
  • metin alanı

Serbest biçimli metne ek olarak, herhangi bir HTML5 metin tabanlı giriş bu şekilde görünür.

Örnek işaretleme

Yukarıdaki örnek form düzeni göz önüne alındığında, işte ilk giriş ve kontrol grubuyla ilişkili işaretleme. , .control-groupve sınıflarının tümü stil oluşturma için gereklidir .control-label..controls

  1. <form sınıfı = "form-yatay" >
  2. <alan kümesi>
  3. <legend> Açıklama metni </legend>
  4. <div sınıfı = "kontrol grubu" >
  5. <label class = "kontrol etiketi" için = "input01" > Metin girişi </label>
  6. <div sınıfı = "kontroller" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Destekleyici yardım metni </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Form kontrol durumları

Bootstrap, tarayıcı destekli odaklanma ve disableddurumlar için stiller içerir. Varsayılan Webkit'i kaldırırız ve yerine outlinea uygularız .box-shadow:focus


Form doğrulama

Ayrıca hatalar, uyarılar ve başarı için doğrulama stilleri içerir. Kullanmak için çevredeki hata sınıfını ekleyin .control-group.

  1. <alan kümesi
  2. sınıf = "kontrol grubu hatası" >
  3. </fieldset>
Burada biraz değer
Bir şeyler ters gitmiş olabilir
Lütfen hatayı düzeltin
Woohoo!
Woohoo!

Form denetimlerini genişletme

Girişleri başına ekle ve ekle

Eklenmiş veya başına metin eklenmiş giriş grupları, girişleriniz için daha fazla bağlam sağlamanın kolay bir yolunu sağlar. Harika örnekler, Twitter kullanıcı adları için @ işareti veya finans için $ içerir.


Onay kutuları ve radyolar

v1.4'e kadar, Bootstrap, bunları istiflemek için onay kutularının ve radyoların çevresinde ekstra işaretleme gerektiriyordu. <label class="checkbox">Şimdi, sarmalayanı tekrarlamak basit bir mesele <input type="checkbox">.

Satır içi onay kutuları ve radyolar da desteklenir. Sadece .inlineherhangi birine .checkboxveya ekleyin .radiove bitirdiniz.


Satır içi formlar ve ekleme/başa ekleme

Satır içi biçimde başa veya ekleme girişlerini kullanmak için, .add-onve inputöğelerini boşluk bırakmadan aynı satıra yerleştirdiğinizden emin olun.


Form yardım metni

Form girdilerinize yardım metni eklemek için , girdi öğesinden sonra satır içi yardım metnini <span class="help-inline">veya bir yardım metni bloğunu ekleyin.<p class="help-block">

.span*Giriş boyutları için ızgara sistemindeki aynı sınıfları kullanın .

Ayrıca, ızgarayla eşleşmeyen, duyarlı CSS stillerine uyum sağlamayan veya değişen kontrol türlerini hesaba katmayan statik sınıflar da kullanabilirsiniz (örneğin, inputvs. select).

@

İşte bazı yardım metni

.00
İşte daha fazla yardım metni
$ .00

Not: Etiketler, çok daha büyük tıklama alanları ve daha kullanışlı bir form için tüm seçenekleri çevreler.

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

Eylemler için düğmeler

Bir kural olarak, köprüler nesneler için kullanılırken düğmeler yalnızca eylemler için kullanılmalıdır. Örneğin, "İndir" bir düğme, "son etkinlik" bir bağlantı olmalıdır.

.btnDüğme stilleri, uygulanan sınıfla her şeye uygulanabilir. <a>Ancak, genellikle bunları yalnızca ve <button>öğelerine uygulamak isteyeceksiniz .

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

Çoklu boyutlar

Daha büyük veya daha küçük düğmeler mi istiyorsunuz? .btn-large, .btn-smallveya .btn-miniiki ek boyut için ekleyin .


Engelli durumu

Devre dışı bırakılan düğmeler için, .disabledsınıfı bağlantılara ve öğe disabledözniteliğini ekleyin.<button>

Birincil bağlantı Bağlantı

Önüne bak! .disabledBurada ortak sınıfa benzer bir yardımcı sınıf olarak kullanıyoruz .active, bu nedenle ön ek gerekmez.

Bir sınıf, birden çok etiket

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

Bağlantı
  1. <a class = "btn" href = "" > Bağlantı </a>
  2. <düğme sınıfı = "btn" türü = "gönder" >
  3. Buton
  4. </button>
  5. <giriş sınıfı = "btn" tipi = "düğme"
  6. değer = "Giriş" >
  7. <giriş sınıfı = "btn" türü = "gönder"
  8. değer = "Gönder" >

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

  • 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

Sprite olarak inşa edildi

Her simgeyi fazladan bir istek haline getirmek yerine, onları bir hareketli grafikte derledik—bir dosyada görüntüleri konumlandırmak için CSS kullanan bir grup görüntü background-position. Bu, Twitter.com'da kullandığımız yöntemin aynısı ve işimize yaradı.

Tüm simge sınıfları, .icon-diğer bileşenlerimiz gibi, uygun ad alanı ve kapsam belirleme için ön eke sahiptir. Bu, diğer araçlarla çakışmaların önlenmesine yardımcı olacaktır.

Glyphicons , burada belgelerde bir bağlantı ve kredi sağladığımız sürece, açık kaynak araç takımımızda bulunan Buçukluk setini kullanmamıza izin verdi. Lütfen projelerinizde de aynı şeyi yapmayı düşünün.

Nasıl kullanılır

Bootstrap, <i>tüm simgeler için bir etiket kullanır, ancak bunların vaka sınıfı yoktur, yalnızca paylaşılan bir önek vardır. Kullanmak için aşağıdaki kodu hemen hemen her yere yerleştirin:

  1. <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:

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

Simgeleriniz için seçebileceğiniz 140 sınıf var. Sadece <i>doğru sınıflara sahip bir etiket ekleyin ve hazırsınız. Tam listeyi sprites.less'ta veya tam burada bu belgede bulabilirsiniz.

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

Kullanım durumları

Simgeler harikadır, ancak bunları nerede kullanabilirsiniz? İşte birkaç fikir:

  • Kenar çubuğu gezinmeniz için görseller olarak
  • Tamamen simgeye dayalı bir gezinme için
  • Bir eylemin anlamını aktarmaya yardımcı olacak düğmeler için
  • Bir kullanıcının hedefinde bağlamı paylaşmak için bağlantılar içeren

Esasen, bir <i>etiket koyabileceğiniz her yere bir simge koyabilirsiniz.

Örnekler

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