Bootstrap - Tipografi

Bootstrap, varsayılan yazı tipi yığınında Helvetica Neue, Helvetica, Arial ve sans-serif kullanır. Bootstrap'in tipografi özelliğini kullanarak başlıklar, paragraflar, listeler ve diğer satır içi öğeleri oluşturabilirsiniz. Bunların her birini aşağıdaki bölümlerde öğrenelim.

Başlıklar

Tüm HTML başlıkları (h1'den h6'ya) Bootstrap'te biçimlendirilmiştir. Aşağıda bir örnek gösterilmiştir -

<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>

Bootstrap ile yukarıdaki kod segmenti aşağıdaki sonucu üretecektir -

Satır İçi Alt Başlıklar

Başlıklardan herhangi birine satır içi bir alt başlık eklemek için, öğelerin herhangi birinin çevresine eklemeniz veya .small aşağıdaki örnekte gösterildiği gibi daha açık bir renkte daha küçük metin elde edersiniz -

<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1> 
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>

Bootstrap ile yukarıdaki kod segmenti aşağıdaki sonucu üretecektir -

Kurşun Gövde Kopyası

Bir paragrafa biraz vurgu eklemek için class = "lead" ekleyin. Bu size aşağıdaki örnekte olduğu gibi daha büyük bir yazı tipi boyutu, daha hafif bir ağırlık ve daha uzun bir satır yüksekliği sağlayacaktır -

<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating 
   the use of lead body copy. This is an example paragraph 
   demonstrating the use of lead body copy.This is an example 
   paragraph demonstrating the use of lead body copy.This is an 
   example paragraph demonstrating the use of lead body copy.
   This is an example paragraph demonstrating the use of lead body copy.</p>

Vurgu

HTML'nin gibi varsayılan vurgu etiketleri, metni üst öğenin boyutunun% 85'ine ayarlar, daha ağır yazı tipi ağırlıklı bir metni vurgular ve italik bir metni vurgular.

Bootstrap, aşağıdaki örnekte görüldüğü gibi metinlere vurgu yapmak için kullanılabilecek birkaç sınıf sunar -

<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>

<p class = "text-left">Left aligned text.</p>
<p class = "text-center">Center aligned text.</p>
<p class = "text-right">Right aligned text.</p>
<p class = "text-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>

Kısaltmalar

HTML <abbr> öğesi, WWW veya HTTP gibi kısaltmalar veya kısaltmalar için işaretleme sağlar. Bootstrap, alt kısımda hafif noktalı bir kenarlıkla <abbr> öğelerini stilize eder ve fareyle üzerine gelindiğinde tam metni gösterir (bu metni <abbr> başlık özniteliğine eklediğiniz sürece). Biraz daha küçük bir yazı tipi boyutu elde etmek için <abbr> 'ye .initialism ekleyin.

<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>

Adresler

<address> etiketini kullanarak iletişim bilgilerini web sayfanızda görüntüleyebilirsiniz. <address> varsayılan olarak görüntüleneceği için: block; kullanmanız gerekecek

Ekteki adres metnine satır sonları eklemek için etiketler.

<address>
   <strong>Some Company, Inc.</strong><br>
   007 street<br>
   Some City, State XXXXX<br>
   <abbr title = "Phone">P:</abbr> (123) 456-7890
</address>

<address>
   <strong>Full Name</strong><br>
   <a href = "mailto:#">[email protected]</a>
</address>

Blok alıntılar

Herhangi bir HTML metninin çevresinde varsayılan <blockquote> değerini kullanabilirsiniz. Diğer seçenekler arasında, teklifin kaynağını tanımlamak için bir etiketi eklemek ve .pull-right sınıfını kullanarak blok alıntıyı sağa hizalamak yer alır . Aşağıdaki örnek, tüm bu özellikleri göstermektedir -

<blockquote>
   <p>This is a default blockquote example. This is a default 
      blockquote example. This is a default blockquote 
      example.This is a default blockquote example. This is a 
      default blockquote example.</p>
</blockquote>

<blockquote>
   This is a blockquote with a source title.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

<blockquote class = "pull-right">This is a blockquote aligned to the right.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

Listeler

Bootstrap sıralı listeleri, sırasız listeleri ve tanım listelerini destekler.

Ordered lists - Sıralı bir liste, bir tür ardışık sıraya giren ve önünde sayılar bulunan bir listedir.
Unordered lists- Sırasız liste, belirli bir sıralaması olmayan ve geleneksel olarak madde işaretleriyle biçimlendirilmiş bir listedir. Madde işaretlerinin görünmesini istemiyorsanız, .list-unstyled sınıfını kullanarak stili kaldırabilirsiniz . Ayrıca tüm liste öğelerini sınıf .list-inline kullanarak tek bir satıra yerleştirebilirsiniz .
Definition lists- Bu tür bir listede, her liste öğesi hem <dt> hem de <dd> öğelerinden oluşabilir. <dt>, tanım terimi anlamına gelir ve bir sözlük gibi, bu tanımlanmakta olan terimdir (veya tümceciktir). Daha sonra <dd>, <dt> nin tanımıdır. <dl> içindeki terimleri ve açıklamaları dl-horizontal sınıfını kullanarak yan yana sıralayabilirsiniz .

Aşağıdaki örnek, bu türlerin her birini göstermektedir -

<h4>Example of Ordered List</h4>
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

<h4>Example of UnOrdered List</h4>

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Unstyled List</h4>

<ul class = "list-unstyled">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Inline List</h4>

<ul class = "list-inline">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Definition List</h4>

<dl>
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

<h4>Example of Horizontal Definition List</h4>

<dl class = "dl-horizontal">
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>