آموزش تایپوگرافی در بوت استرپ با مثال

تایپوگرافی

Bootstrap با CSS

بوت استرپ از فونت های Helvetica Neue ، Helvetica ، Arial و Sans-Serif به عنوان font پیش فرض خود استفاده می کند. با استفاده از ویژگی تایپوگرافی Bootstrap ، ما می توانیم عنوان ها (heading) ، پاراگراف ها ، لیست ها و سایر عناصر درون خطی را ایجاد کنیم. اجازه دهید هر یک از این موارد را در بخش های زیر آموزش دهیم.

عناوین

تمام عناوین (h1 تا h6) در Bootstrap سبک بندی می شوند. این موضوع ، در مثال زیر نشان داده شده است:

<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 ، نتیجه زیر را تولید خواهد کرد :

زیر عناوین درون خطی

برای اضافه کردن یک زیر عنوان درونی خطی (inline) به هر بخش ، به سادگی ، تگ <small> را در اطراف هر یک از عناصر اضافه می کنیم و یا کلاس small. را اضافه می نماییم. با این کار ، ما متن کوچک تری را با یک رنگ روشن تر ، همانطور که در مثال زیر نشان داده شده است ، دریافت خواهیم کرد:

<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 ، خروجی زیر را نتیجه خواهد داد :

Lead Body Copy

برای افزودن قابلیت تأکید به یک پاراگراف ، کلاس  class = "lead"را اضافه می کنیم. این کار ، به ما یک اندازه فونت بزرگ تر ، وزن سبک تر و یک ارتفاع بلندتر خط را می دهد ، همان که در مثال زیر نشان داده شده است :

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

خروجی قطعه کد فوق ، به صورت زیر می باشد :

تأکید

تگ های تأکید (emphasis) پیش فرض HTML ، همانند <small> ، اندازه متن را به 85٪ اندازه والد تنظیم می کنند ، تگ <strong> ، در یک متن ، حالت تأکید با وزن فونت سنگین تر را ایجاد می کند و تگ <em> ، در یک متن با فونت ایتالیک ، حالت تأکید را ایجاد می کند.

Bootstrap چند کلاس ارائه می دهد که می توانند برای ایجاد تأکید در متن ها استفاده شوند ، همان طور که در مثال های زیر دیده می شود :

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

خروجی قطعه کد بالا ، به صورت زیر خواهد بود :

اختصار نویسی

عنصر HTML با تگ <abbr> ، امکان نشانه گذاری برای اختصارها یا مخفف ها ، مانند WWW یا HTTP را فراهم می کند. سبک های بوت استرپ عناصر <abbr> ، با خط روشن نقطه گذاری شده در پایین متن و هم چنین ، متن کامل عبارت اختصار شده به صورت شناور (همان متنی که آن را به صفت title در <abbr> اضافه می کنیم) نمایان می شوند. برای دریافت یک اندازه فونت کوچک تر، کلاس .initialism را به <abbr> اضافه می کنیم.

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

قطعه کد فوق ، نتیجه زیر را نشان می دهد :

آدرس ها

با استفاده از تگ <address> ، ما می توانیم اطلاعات تماس را در صفحه وب خود نمایش دهیم. از آنجا که تگ <address> به طور پیش فرض به صورت بلوکی نمایش داده می شود ، ما باید از تگ هایی برای افزودن خط فاصله برای متن محصور شده در تگ آدرس استفاده نماییم.

<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:#">mailto@somedomain.com</a>
</address>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

Blocquote ها

ما می توانیم از تگ <blockquote> پیش فرض در اطراف هر متن HTML استفاده کنیم. گزینه های دیگر عبارتند از : اضافه کردن یک تگ <small> برای شناسایی منبع نقل قول و تراز کردن سمت راست blockquote با استفاده از کلاس .pull-right . مثال زیر تمام این ویژگی ها را نشان می دهد :

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

خروجی قطعه کد بالا ، به صورت زیر می باشد :

لیست ها

Bootstrap از لیست های مرتب شده ، لیست های مرتب نشده و لیست های تعریف شده ، پشتیبانی می کند.

• لیست مرتب شده : یک لیست مرتب شده ، لیستی است که در یک ترتیب ردیفی قرار می گیرد و به صورت شماره گذاری شده ، نمایش داده می شود.
• لیست مرتب نشده : یک لیست مرتب نشده ، لیستی است که هیچ ترتیب خاصی ندارد و به طور سنتی ، با bullet ها سبک بندی شده است. اگر نخواهیم که bullet ها نمایان شوند ، می توانیم این سبک بندی را با استفاده از کلاس .list-unstyled حذف کنیم. هم چنین ، می توانیم تمام آیتم های لیست را با استفاده از کلاس.list-inline در یک خط ساده قرار دهیم.
• لیست های تعریف شده : در این نوع لیست ، هر آیتم لیست می تواند شامل عناصر <dt> و <dd> باشد. <dt> بیانگر عبارت definition term است ، و مانند یک فرهنگ لغت ، اصطلاحی (یا عبارت) است که تعریف شده است. به تبع آن ، <dd> تعریفی از <dt> است. ما می توانیم عبارات و توضیحات را در خط <dl> کنار هم با استفاده از کلاس dl-horizontal ایجاد کنیم.

مثال زیر هر یک از انواع لیست ها را نشان می دهد :

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

خروجی قطعه کد فوق ، به صورت زیر می باشد :