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: @baseFontSize
ve @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 | title Genişletilmiş metin için isteğe bağlı dahil et |
<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 :
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 .
eleman | kullanım | İsteğe bağlı |
---|---|---|
<blockquote> |
Başka bir kaynaktan içerik alıntılamak için blok düzeyinde öğe |
.pull-left ve 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>
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 td indirirth |
Tablolar, okunabilirliği sağlamak ve yapıyı korumak için yalnızca birkaç kenarlıkla otomatik olarak biçimlendirilir. 2.0 ile .table
sınıf gereklidir.
- <tablo sınıfı = "tablo" >
- …
- </tablo>
# | İlk adı | Soy isim | Dil |
---|---|---|---|
1 | İşaret | Otto | CSS |
2 | Yakup | Thornton | Javascript |
3 | Stu | göçük | HTML |
Zebra çizgileri ekleyerek masalarınızda biraz hava yaratın; sadece .table-striped
sınıfı ekleyin.
Not: Çizgili tablolar :nth-child
CSS seçiciyi kullanır ve IE7-IE8'de mevcut değildir.
- <tablo sınıfı = "tablo tablo çizgili" >
- …
- </tablo>
# | İlk adı | Soy isim | Dil |
---|---|---|---|
1 | İşaret | Otto | CSS |
2 | Yakup | Thornton | Javascript |
3 | Stu | göçük | HTML |
Estetik amaçlar için tüm masanın etrafına kenarlıklar ve yuvarlatılmış köşeler ekleyin.
- <tablo sınıfı = "tabloyla sınırlanmış tablo" >
- …
- </tablo>
# | İlk adı | Soy isim | Dil |
---|---|---|---|
1 | Mark Otto | CSS | |
2 | Yakup | Thornton | Javascript |
3 | Stu | göçük | |
3 | Brosef | stalin | HTML |
.table-condensed
Tablo hücresi dolgusunu yarıya indirmek için sınıfı ekleyerek tablolarınızı daha kompakt hale getirin (8 pikselden 4 piksele).
- <tablo sınıfı = "tablo yoğunlaştırılmış" >
- …
- </tablo>
# | İlk adı | Soy isim | Dil |
---|---|---|---|
1 | İşaret | Otto | CSS |
2 | Yakup | Thornton | Javascript |
3 | Stu | göçük | HTML |
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>
# | İlk adı | Soy isim | Dil |
---|---|---|---|
1 | İşaret | Otto | CSS |
2 | Yakup | Thornton | Javascript |
3 | Stu | göçük | HTML |
4 | Brosef | stalin | HTML |
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-search
ekstra yuvarlak arama alanları için eklemeniz yeterlidir.
- <form sınıfı = "iyi form arama" >
- <input type = "text" class = "giriş aracı arama sorgusu" >
- <düğmesi type = "gönder" sınıfı = "btn" > Ara </button>
- </form>
Girişler, başlamak için blok düzeyindedir. .form-inline
ve için .form-horizontal
satır içi blok kullanıyoruz.
- <biçim sınıfı = "iyi form-inline" >
- <giriş türü = "metin" sınıfı = "giriş-küçük" yer tutucusu = "E-posta" >
- <input type = "parola" sınıfı = "giriş-küçük" yer tutucusu = "Password" >
- <button type = "gönder" sınıfı = "btn" > Git </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-group
ve 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 disabled
durumlar için stiller içerir. Varsayılan Webkit'i kaldırırız ve yerine outline
a 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 .inline
herhangi birine .checkbox
veya ekleyin .radio
ve bitirdiniz.
Satır içi biçimde başa veya ekleme girişlerini kullanmak için, .add-on
ve 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">
:after
. Belgelerde, simgenin boyutunu vurgulamak için üzerine gelindiğinde açık kırmızı bir arka plan rengi gösteriyoruz.
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.
v2.0.1 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.
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.