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 ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

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 :

Örnek kısaltmalar

Kısaltmalar, büyük harfli metin ve hafif noktalı alt kenarlık ile biçimlendirilir. Ayrıca, fareyle üzerine gelindiğinde bir yardım imlecine sahiptirler, böylece kullanıcılar, fareyle üzerine gelindiğinde bir şeylerin gösterileceğine dair ekstra göstergeye sahip olurlar.

HTML , dilimlenmiş ekmekten sonraki en iyi şeydir.

Öznitelik kelimesinin kısaltması attr'dir .

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

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

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

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.

Çizgide

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

Ö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 . Düzgün işleme için herhangi bir işareti unicode karakterlerine çevirdiğinizden emin olun.

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

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

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

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.

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

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

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

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

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.

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

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

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

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

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

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

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

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

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.

<table class = "tablo tablo çizgili tablo kenarlıklı tablo yoğun" > 
  ...
</tablo>

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.

v2.0 ile form stilleri için daha hafif ve daha akıllı varsayılanlara sahibiz. Fazladan işaretleme yok, sadece kontrolleri oluşturun.

Varsayılan WebKit stillerini yansıtan .form-searchekstra yuvarlak arama alanları için eklemeniz yeterlidir.

Girişler, başlamak için blok düzeyindedir. .form-inlineve için .form-horizontalsatır içi blok kullanıyoruz.

Neler dahil

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

v2.0 ile yeni varsayılanlar

v1.4'e kadar, Bootstrap'in varsayılan form stilleri yatay düzeni kullandı. Bootstrap 2 ile, herhangi bir form için daha akıllı, daha ölçeklenebilir varsayılanlara sahip olmak için bu kısıtlamayı kaldırdık.

Yeniden tasarlanan tarayıcı durumları

Bootstrap, tarayıcı destekli odaklanma ve disableddurumlar için stiller içerir. Varsayılan Webkit'i kaldırırız ve outlineonun box-shadowyerine :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.

<alan kümesi
  sınıf = "kontrol grubu hatası" >
  …
</fieldset>

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

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.

Ankrajlar ve formlar için

Düğme stilleri, uygulanmış olan her şeye .btnuygulanabilir. <a>Ancak, genellikle bunları yalnızca ve <button>öğelerine uygulamak isteyeceksiniz .

Not:.btn Tüm düğmeler sınıfı içermelidir . Tutarlılık için düğme stilleri <button>ve öğelere uygulanmalıdır .<a>

Çoklu boyutlar

Daha büyük veya daha küçük düğmeler mi istiyorsunuz? ye!

Birincil eylem Eylem

Birincil eylem Eylem

Engelli durumu

Devre dışı bırakılan düğmeler .btn-disablediçin bağlantılar ve öğeler :disablediçin kullanın.<button>

Birincil eylem Eylem

Birincil eylem Eylem

Çapraz tarayıcı uyumluluğu

IE9'da, IE9 arka plan gradyanlarını köşelere kırpmadığı için tüm düğmelerdeki gradyanı yuvarlatılmış köşeler lehine bırakıyoruz.

İlgili, IE9, devre dışı bırakılmış buttonöğeleri çöpe atıyor, metni kötü bir metin gölgesiyle griye dönüştürüyor - ne yazık ki bunu düzeltemiyoruz.

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şenlerimize çok benzer şekilde, 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

v2.0.0 ile <i>tüm simgelerimiz için bir etiket kullanmayı seçtik, ancak bunların vaka sınıfı yok, yalnızca paylaşılan bir önek var. 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:

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

Simgeleriniz için seçebileceğiniz 120 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.

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.

Yenile Ödeme Silmek

Yorum Ayarlar Daha fazla bilgi