En son web geliştirme öğreticiler
 

Bootstrap Metin / Tipografi


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:

Örnek

Use the mark element to highlight text.

Kendin dene "

<abbr>

Bootstrap HTML stili olacak <abbr> şu şekilde eleman:

Örnek

The WHO was founded in 1948.

Kendin dene "

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

From WWF's website
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.

From WWF's website
Kendin dene "

<dl>

Bootstrap HTML stili olacak <dl> şu şekilde eleman:

Örnek

Coffee
- black hot drink
Milk
- white cold drink
Kendin dene "

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

Örnek

Use ctrl + p to open the Print dialog box.

Kendin dene "

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