آموزش تایپوگرافی متن در Bootstrap

بازدید: 640 بازدید

اندازه پیش فرض و عمومی فونت bootstrap 4 از اندازه ی قلم 16px استفاده میکند و فاصله ی بین خطوط آن 1.5 است.

فونت نوشته پیش فرض در بوت استرپ (helvetica , helvetica neue , arial , sans serif) است.

علاوه بر این ، تمام عناصر تگ <p> دارای حاشیه از بالا 0 پیکسل و حاشیه از پایین تقریبا 16 پیکسل به صورت پیش فرض است.

سلام خدمت دوستداران عزیز وبسایت پرنیان طرح

در این آموزش بعضی از المان های html 5 را بررسی میکنیم که استایل آن ها در بوت استرپ از حالت پیش فرض آن متفاوت است.

<h1> تا <h6> :

عنوان های html در بوت استرپ 4 از h1 تا h6  با فونتی bold تر و ضخیم تر با حجم افزایش یافته استایل بندی میشود.

مثال زیر را ببینید.

[php]

<body>
<div class=”container”>
  <h1>h1 Bootstrap heading (2.5rem = 40px)</h1>
  <h2>h2 Bootstrap heading (2rem = 32px)</h2>
  <h3>h3 Bootstrap heading (1.75rem = 28px)</h3>
  <h4>h4 Bootstrap heading (1.5rem = 24px)</h4>
  <h5>h5 Bootstrap heading (1.25rem = 20px)</h5>
  <h6>h6 Bootstrap heading (1rem = 16px)</h6>
</div>
</body>

[/php]

عنوان های صفحه :

اندازه عنوان های صفحه از اندازه معمولی سایر فونت ها ، فونت بزرگتر و وزن سبک تر استفاده میگردد.

4 کلاس دارد که میتوان یکی را انتخاب کرد display 1 , display 2 , display 3 ,display 4.

به مثال زبر توجه کنید:

[php]

<body>
<div class=”container”>
  <h1>Display Headings</h1>
  <p>Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):</p>
  <h1 class=”display-1″>Display 1</h1>
  <h1 class=”display-2″>Display 2</h1>
  <h1 class=”display-3″>Display 3</h1>
  <h1 class=”display-4″>Display 4</h1>
</div>
</body>

[/php]

نتیجه مثال بالا را در این لینک ببینید.

تگ small :

در بوت استرپ 4 عنصر small برای ایجاد متن سبک تر و ثانویه در هر عنوان استفاده میشود.

در مثال زیر میتوانید نتیجه را ببینید:

[php]

<body>
<div class=”container”>
  <h1>Lighter, Secondary Text</h1>
  <p>The small element is used to create a lighter, secondary text in any heading:</p>
  <h1>h1 heading <small>secondary text</small></h1>
  <h2>h2 heading <small>secondary text</small></h2>
  <h3>h3 heading <small>secondary text</small></h3>
  <h4>h4 heading <small>secondary text</small></h4>
  <h5>h5 heading <small>secondary text</small></h5>
  <h6>h6 heading <small>secondary text</small></h6>
</div>
</body>

[/php]

نتیجه مثال بالا را در این لینک ببینید.

تگ mark :

بوت استرپ 4 با عنصر mark در html به پس زمینه رنگ زرد با حاشیه استایل میدهد.

یک نمونه مثال :

[php]

<body>
<div class=”container”>
  <h1>Highlight Text</h1>
  <p>Use the mark element to <mark>highlight</mark> text.</p>
</div>
</body>

[/php]

نتیجه را در این لینک ببینید.

تگ <abbr> :

عنصر abbr را در بوت استرپ 4 با حاشیه ی نقطه ای استایل دهی میکند.

یک نمونه مثال :

[php]

<body>
<div class=”container”>
  <h1>Abbreviations</h1>
  <p>The abbr element is used to mark up an abbreviation or acronym:</p>
  <p>The <abbr title=”World Health Organization”>WHO</abbr> was founded in 1948.</p>
</div>
</body>

[/php]

نتیجه را در این لینک ببینید.

تگ <blockquote> :

هنگام نقل قول بلوک های محتوا را از منبع های دیگر را به این کلاس اضافه کنید.

بوت استرپ 4 تگ block quote را اینگونه استایل دهی میکند.

[php]

<body>
<div class=”container”>
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class=”blockquote”>
    <p>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.</p>
    <footer class=”blockquote-footer”>From WWF’s website</footer>
  </blockquote>
</div>
</body>

[/php]

نتیجه را در این لینک مشاهده کنید.

تگ <dl> :

عنصر dl یک لیست توضیحات را نشان میدهد و در بوت استرپ 4 به صورت زیر استایل دهی میشود.

[php]

<body>
<div class=”container”>
  <h1>Description Lists</h1>
  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>
</div>
</body>

[/php]

نتیجه را در این لینک مشاهده کنید.

تگ <code> :

کدهایی که مینویسیم باید در این عنصر تعبیه شوند.

نمونه مثال :

[php]

<body>
<div class=”container”>
  <h1>Code Snippets</h1>
  <p>Inline snippets of code should be embedded in the code element:</p>
  <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
</div>
</body>
[/php]
نتیجه را اینجا امتحان کنید.

تگ <kbd> :

جهت نشان دادن ورودی از طریق صفحه کلید باید از این عنصر استفاده کنید.

[php]

<body>
<div class=”container”>
  <h1>Keyboard Inputs</h1>
  <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>
</body>

[/php]

نتیجه مثال را در این لینک مشاهده کنید.

تگ <pre> :

برای چندین خط کد از عنصر پیشین استفاده کنید.

در بوت استرپ این عنصر را به صورت زیر استایل دهی میکند.

[php]

<body>
<div class=”container”>
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>
</body>

[/php]

نتیجه مثال بالا را در این لینک ببینید.

در ادامه آموزش های این مبحث نیز همراه ما باشید.

دسته بندی آموزش bootstrap
اشتراک گذاری
مقالات مرتبط

دیدگاهتان را بنویسید

سبد خرید

هیچ محصولی در سبد خرید نیست.