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.
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.
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.
| 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 |
.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> |
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>
<address>Etiketin nasıl kullanılabileceğine dair iki örnek :
Özniteliği olan kısaltmalar, titlehafif noktalı bir alt kenarlığa ve ü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 .
| eleman | kullanım | İsteğe bağlı |
|---|---|---|
<blockquote> |
Başka bir kaynaktan içerik alıntılamak için blok düzeyinde öğe |
.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 .—
- <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
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
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 .
<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>
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 .
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.
| 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 |
- <tablo>
- <kafa>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <vücut>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </tablo>
| İ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 |
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>
| # | İlk adı | Soy isim | Kullanıcı adı |
|---|---|---|---|
| 1 | İşaret | Otto | @mdo |
| 2 | Yakup | Thornton | @yağ |
| 3 | Larry | kuş |
Zebra çizgileri ekleyerek masalarınızda biraz süslü olun - sadece .table-stripedsınıfı ekleyin.
Not: Çizgili tablolar :nth-childCSS seçiciyi kullanır ve IE7-IE8'de mevcut değildir.
- <tablo sınıfı = "tablo tablo çizgili" >
- …
- </tablo>
| # | İlk adı | Soy isim | Kullanıcı adı |
|---|---|---|---|
| 1 | İşaret | Otto | @mdo |
| 2 | Yakup | Thornton | @yağ |
| 3 | Larry | kuş |
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>
| # | İlk adı | Soy isim | Kullanıcı adı |
|---|---|---|---|
| 1 | İşaret | Otto | @mdo |
| İşaret | Otto | @getbootstrap | |
| 2 | Yakup | Thornton | @yağ |
| 3 | Kuş Larry | ||
.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>
| # | İlk adı | Soy isim | Kullanıcı adı |
|---|---|---|---|
| 1 | İşaret | Otto | @mdo |
| 2 | Yakup | Thornton | @yağ |
| 3 | Kuş Larry | ||
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>
| Ad Soyad | |||
|---|---|---|---|
| # | İlk adı | Soy isim | Kullanıcı adı |
| 1 | İşaret | Otto | @mdo |
| 2 | Yakup | Thornton | @yağ |
| 3 | Kuş Larry | ||
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.
Bootstrap, dört tür form düzeni desteğiyle birlikte gelir:
Farklı form düzenleri türleri, işaretlemede bazı değişiklikler gerektirir, ancak denetimlerin kendisi aynı kalır ve aynı şekilde davranır.
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. Devre dışı bırakılmış kontroller için stiller de dahildir.
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 |
v2.0 ile form stilleri için daha hafif ve daha akıllı varsayılanlara sahibiz. Fazladan işaretleme yok, sadece kontrolleri oluşturun.
- <form sınıfı = "iyi" >
- <label> Etiket adı </label>
- <input type = "text" class = "span3" placeholder = "Bir şeyler yazın..." >
- <span class = "help-inline" > İlişkili yardım metni! </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>
- </form>
Varsayılan WebKit stillerini yansıtan .form-searchekstra yuvarlak arama alanları için eklemeniz yeterlidir.
- <form sınıfı = "iyi form arama" >
- <giriş türü = "metin" sınıfı = "giriş aracı arama sorgusu" >
- <button type = "submit" class = "btn" > Ara </button>
- </form>
Girişler, başlamak için blok düzeyindedir. .form-inlineve için .form-horizontalsatır içi blok kullanıyoruz.
- <form sınıfı = "iyi 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>
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
- <form sınıfı = "form-yatay" >
- <alan kümesi>
- <legend> Açıklama metni </legend>
- <div sınıfı = "kontrol grubu" >
- <label class = "kontrol etiketi" için = "input01" > Metin girişi </label>
- <div sınıfı = "kontroller" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Destekleyici yardım metni </p>
- </div>
- </div>
- </fieldset>
- </form>
Solda gösterilenler, desteklediğimiz tüm varsayılan form kontrolleridir. İşte madde işaretli liste:
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.
Bootstrap, tarayıcı destekli odaklanma ve disableddurumlar için stiller içerir. Varsayılan Webkit'i kaldırır ve yerine outlinea uygularız .box-shadow:focus
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>
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.
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 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 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">
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.
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:
- <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.
Ö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 .
Simgeler harikadır, ancak bunları nerede kullanabilirsiniz? İşte birkaç fikir:
Esasen, bir <i>etiket koyabileceğiniz her yere bir simge koyabilirsiniz.
Bunları düğmelerde, bir araç çubuğu için düğme gruplarında, gezinmede veya başa eklenen form girişlerinde kullanın.