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

4 سال پیش

امتیاز دهید post

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

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش تایپوگرافی در بوت استرپ خواهیم پرداخت.

بوت استرپ از Helvetica Neue ، Helvetica ، Arial و sans-serif در پشته قلم پیش فرض خود استفاده می کند. با استفاده از ویژگی تایپوگرافی بوت استرپ می توانید عنوان ، پاراگراف ، لیست و سایر عناصر درون خطی را ایجاد کنید. بگذارید در بخشهای زیر هر یک از اینها را یاد بگیرید.

هدینگ

همه هدینگ ها HTML (h1 تا h6) در بوت استرپ سبک می شوند. یک مثال در زیر نشان داده شده است –

&lt;h1&gt;I'm Heading1 h1&lt;/h1&gt;
&lt;h2&gt;I'm Heading2 h2&lt;/h2&gt;
&lt;h3&gt;I'm Heading3 h3&lt;/h3&gt;
&lt;h4&gt;I'm Heading4 h4&lt;/h4&gt;
&lt;h5&gt;I'm Heading5 h5&lt;/h5&gt;
&lt;h6&gt;I'm Heading6 h6&lt;/h6&gt;

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

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

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

&lt;h1&gt;I'm Heading1 h1. &lt;small&gt;I'm secondary Heading1 h1&lt;/small&gt;&lt;/h1&gt; 
&lt;h2&gt;I'm Heading2 h2. &lt;small&gt;I'm secondary Heading2 h2&lt;/small&gt;&lt;/h2&gt;
&lt;h3&gt;I'm Heading3 h3. &lt;small&gt;I'm secondary Heading3 h3&lt;/small&gt;&lt;/h3&gt;
&lt;h4&gt;I'm Heading4 h4. &lt;small&gt;I'm secondary Heading4 h4&lt;/small&gt;&lt;/h4&gt;
&lt;h5&gt;I'm Heading5 h5. &lt;small&gt;I'm secondary Heading5 h5&lt;/small&gt;&lt;/h5&gt;
&lt;h6&gt;I'm Heading6 h6. &lt;small&gt;I'm secondary Heading1 h6&lt;/small&gt;&lt;/h6&gt;

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

Lead Body Copy

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

&lt;h2&gt;Lead Example&lt;/h2&gt;
&lt;p class = "lead"&gt;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.&lt;/p&gt;

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

تاکید

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

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

&lt;small&gt;This content is within tag&lt;/small&gt;&lt;br&gt;
&lt;strong&gt;This content is within tag&lt;/strong&gt;&lt;br&gt;
&lt;em&gt;This content is within tag and is rendered as italics&lt;/em&gt;&lt;br&gt;

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

<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> را با حاشیه نقطه ای سبک در پایین آن نشان می دهد و متن کامل را روی شناور نشان می دهد (به شرطی که آن متن را به ویژگی عنوان <abbr> اضافه کنید). برای بدست آوردن اندازه قلم کمی کوچکتر ، اولیه را به <abbr> اضافه کنید.

&lt;abbr title = "World Wide Web"&gt;WWW&lt;/abbr&gt;&lt;br&gt;
&lt;abbr title = "Real Simple Syndication" class = "initialism"&gt;RSS&lt;/abbr&gt;

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

آدرس ها

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

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

&lt;address&gt;
   &lt;strong&gt;Full Name&lt;/strong&gt;&lt;br&gt;
   &lt;a href = "mailto:#"&gt;mailto@somedomain.com&lt;/a&gt;
&lt;/address&gt;

<strong>Some Company, Inc.</strong><br>

007 street<br>

Some City, State XXXXX<br>

<abbr title = "Phone">P:</abbr> (123) 456-7890

</address>

<a href = "mailto:#">mailto@somedomain.com</a>

</address>

نقل قول ها

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

&lt;blockquote&gt;
   &lt;p&gt;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.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;blockquote&gt;
   This is a blockquote with a source title.
   &lt;small&gt;Someone famous in &lt;cite title = "Source Title"&gt;Source Title&lt;/cite&gt;&lt;/small&gt;
&lt;/blockquote&gt;

&lt;blockquote class = "pull-right"&gt;This is a blockquote aligned to the right.
   &lt;small&gt;Someone famous in &lt;cite title = "Source Title"&gt;Source Title&lt;/cite&gt;&lt;/small&gt;
&lt;/blockquote&gt;

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

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 از لیست های مرتب شده ، لیست های نامرتب و لیست های تعریف شده پشتیبانی می کند.

لیست های مرتب شده – لیست مرتب شده لیستی است که به نوعی به ترتیب مرتب می شود و با اعداد مقدمه می شود.

لیست های نامرتب – لیست غیر مرتب لیستی است که ترتیب خاصی ندارد و به طور سنتی با بولت ها مدل می شود. اگر نمی خواهید بولت ها ظاهر شوند ، می توانید با استفاده از کلاس .list-unstyled سبک را حذف کنید. همچنین می توانید با استفاده از کلاس .list-inline تمام موارد لیست را در یک خط قرار دهید.

لیست های تعریف – در این نوع لیست ، هر مورد از لیست می تواند از عناصر <dt> و <dd> تشکیل شود. <dt> مخفف عبارت تعریف است و مانند فرهنگ لغت ، این اصطلاح (یا عبارت) است که در حال تعریف است. متعاقباً ، <dd> تعریفی از <dt> است. با استفاده از کلاس dl-horizont می توانید اصطلاحات و توضیحات را در صف <dl> در کنار هم قرار دهید.

مثال زیر هر یک از این انواع را نشان می دهد –

&lt;h4&gt;Example of Ordered List&lt;/h4&gt;
&lt;ol&gt;
   &lt;li&gt;Item 1&lt;/li&gt;
   &lt;li&gt;Item 2&lt;/li&gt;
   &lt;li&gt;Item 3&lt;/li&gt;
   &lt;li&gt;Item 4&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;Example of UnOrdered List&lt;/h4&gt;

&lt;ul&gt;
   &lt;li&gt;Item 1&lt;/li&gt;
   &lt;li&gt;Item 2&lt;/li&gt;
   &lt;li&gt;Item 3&lt;/li&gt;
   &lt;li&gt;Item 4&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;Example of Unstyled List&lt;/h4&gt;

&lt;ul class = "list-unstyled"&gt;
   &lt;li&gt;Item 1&lt;/li&gt;
   &lt;li&gt;Item 2&lt;/li&gt;
   &lt;li&gt;Item 3&lt;/li&gt;
   &lt;li&gt;Item 4&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;Example of Inline List&lt;/h4&gt;

&lt;ul class = "list-inline"&gt;
   &lt;li&gt;Item 1&lt;/li&gt;
   &lt;li&gt;Item 2&lt;/li&gt;
   &lt;li&gt;Item 3&lt;/li&gt;
   &lt;li&gt;Item 4&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;Example of Definition List&lt;/h4&gt;

&lt;dl&gt;
   &lt;dt&gt;Description 1&lt;/dt&gt;
   &lt;dd&gt;Item 1&lt;/dd&gt;
   &lt;dt&gt;Description 2&lt;/dt&gt;
   &lt;dd&gt;Item 2&lt;/dd&gt;
&lt;/dl&gt;

&lt;h4&gt;Example of Horizontal Definition List&lt;/h4&gt;

&lt;dl class = "dl-horizontal"&gt;
   &lt;dt&gt;Description 1&lt;/dt&gt;
   &lt;dd&gt;Item 1&lt;/dd&gt;
   &lt;dt&gt;Description 2&lt;/dt&gt;
   &lt;dd&gt;Item 2&lt;/dd&gt;
&lt;/dl&gt;

<h4>Example of Ordered List</h4>

<ol>

</ol>

<h4>Example of UnOrdered List</h4>

<ul>

</ul>

<h4>Example of Unstyled List</h4>

</ul>

<h4>Example of Inline List</h4>

</ul>

<h4>Example of Definition List</h4>

<dl>

<dt>Description 1</dt>

<dt>Description 2</dt>

</dl>

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

<dt>Description 1</dt>

<dt>Description 2</dt>

</dl>

منبع.

لیبست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

نویسنده مطلب saber

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

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

هدینگ

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

Lead Body Copy

تاکید

مخفف ها

آدرس ها

نقل قول ها

لیست ها

لیبست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

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

هدینگ

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

Lead Body Copy

تاکید

مخفف ها

آدرس ها

نقل قول ها

لیست ها

لیبست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه