Bootstrap's Varsayılan Ayarları
Bootstrap's genel varsayılan font-size 1.428 bir line-height ile 14px olduğunu.
Bu uygulanır <body>
ve tüm paragraflar.
Buna ek olarak, tüm <p>
elemanları yarısını bilgisayarlı çizgi yüksekliği eşittir bir alt kenar boşluğu var (10px by default) .
Bootstrap vs Tarayıcı Varsayılan
Bu bölümde, tarafından farklı biraz tarz olacaktır bazı HTML elemanları bakacağız Bootstrap tarayıcı varsayılan daha.
<h1> - <h6>
Varsayılan olarak, Önyükleme (HTML başlıkları stil olacak <h1>
için <h6>
) şu şekilde:
Örnek
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
Kendin dene " <small>
Bootstrap olarak HTML <small>
elementi herhangi bir pozisyondaki bir çakmak, ikincil metin oluşturmak için kullanılır:
Örnek
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
Kendin dene " <mark>
Bootstrap HTML stili olacak <mark>
şu şekilde eleman:
<abbr>
Bootstrap HTML stili olacak <abbr>
şu şekilde eleman:
<blockquote>
Bootstrap HTML stili olacak <blockquote>
şu şekilde eleman:
Örnek
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Kendin dene " Sağdaki alıntı göstermek için kullanmak .blockquote-reverse
sınıfını:
Örnek
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Kendin dene " <dl>
Bootstrap HTML stili olacak <dl>
şu şekilde eleman:
<code>
Bootstrap HTML stili olacak <code>
şu şekilde eleman:
Örnek
The following HTML elements: span
, section
, and div
defines a section in a document.
Kendin dene " <kbd>
Bootstrap HTML stili olacak <kbd>
şu şekilde eleman:
<pre>
Bootstrap HTML stili olacak <pre>
aşağıdaki şekilde eleman:
Örnek
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Kendin dene " Bağlamsal Renkler ve arka planlar
Bootstrap da sağlamak için de kullanılabilir bazı bağlamsal sınıfları vardır "meaning through colors" .
Metin renkleri için sınıfları şunlardır: .text-muted
, .text-primary
, .text-success
, .text-info
, .text-warning
ve .text-danger
:
Örnek
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Kendin dene " Arka plan renkleri için sınıfları şunlardır: .bg-primary
, .bg-success
, bg-info
, bg-warning
ve .bg-danger
:
Örnek
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Kendin dene " Daha Tipografi Sınıflar
Aşağıda Bootstrap sınıfları daha ileri stil HTML öğelerine eklenebilir:
Sınıf | Açıklama | Örnek |
---|---|---|
.lead | Bir paragraf öne yapar | Dene |
.small | Daha küçük metin belirtir (set to 85% of the size of the parent) | Dene |
.text-left | sola hizalanmış metni gösterir | Dene |
.text-center | hizalanmış metni gösterir | Dene |
.text-right | sağa hizalanmış metni gösterir | Dene |
.text-justify | haklı metni gösterir | Dene |
.text-nowrap | Hiçbir sarma metni gösterir | Dene |
.text-lowercase | küçük harfli metni gösterir | Dene |
.text-uppercase | Büyük harfli metni gösterir | Dene |
.text-capitalize | harflerin gösterir | Dene |
.initialism | Bir içindeki metni görüntüler <abbr> biraz daha küçük bir yazı tipi boyutu eleman | Dene |
.list-unstyled | Liste öğeleri varsayılan liste stili ve sol kenar boşluğu kaldırır (her ikisi üzerinde çalışır <ul> ve <ol> ). Bu sınıf yalnızca (herhangi yuvalanmış listelerden varsayılan liste stili kaldırmak yanı herhangi yuvalanmış listelerine bu sınıfı uygulamak için) acil çocuk liste öğeleri için geçerlidir | Dene |
.list-inline | tek bir satırda yerler tüm liste öğeleri | Dene |
.dl-horizontal | Açısından kadar hatları ( <dt> ) ve açıklamaları ( <dd> ) içinde <dl> elemanlar yan yana. Varsayılan gibi kapalı başlatır <dl> s, ancak tarayıcı penceresi genişlediğinde, bu yan-yana sıraya olacak | Dene |
.pre-scrollable | Bir yapar <pre> öğesi kaydırılabilir | Dene |
Tamamlayın Bootstrap Tipografi Referansı
Tüm tipografi elemanları / sınıfların tam referans için lütfen tüm gidin Bootstrap Tipografi Referans .
Ayrıca bizim bakmak Bootstrap Yardımcısı Sınıflar Referans bağlamsal sınıfları hakkında daha fazla bilgi için bkz.