متن ها در بوت استرپ

در این فصل با کلاس هایی از بوت استرپ آشنا خواهیم شد که با استفاده از آنها میتوان متن ها در HTML را فرمت دهی کرد.


تظیمات پیشفرض بوت استرپ

مقدار پیشفرض صفت font-size برای بوت استرپ معادل 14 پیکسل و مقدار صفت line-height برابر با  1.428 است.

این مقادیر به عنصر <body> و همه ی پاراگراف های ( <p> ) صفحه اعمال میشود.

به علاوه همه ی عناصر <p> به صورت پیشفرض دارای مقدار 10 پیکسل برای صفت margin-bottom هستند.


بوت استرپ در مقایسه با پیشفرض های مرورگر

در این فصل ما نگاهی به بعضی از عناصر HTML خواهیم انداخت که در بوت استرپ کمی متفاوت تر از پیشفرض های مرورگر ،فرمت بندی خواهند شد.


<h1> تا <h6>

به صورت پیشفرض بوت استرپ هیدینگ های HTML را (<h1> تا <h6>) به طریقی که در زیر نشان داده شده است ، فرمت بندی میکند :

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)

<small>

در بوت استرپ عنصر <small> از HTML برای ایجاد متون ثانویه و شفاف تر در هیدینگ ها به صورتی که در زیر نشان داده شده است ، استفاده میشود :

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text

<mark>

بوت استرپ عنصر <mark> از HTML را به شکلی که در زیر آمده است فرمت بندی میکند :

Use the mark element to highlight text.


<abbr>

بوت استرپ عنصر <abbr> از HTML را به طریقی که در زیر آمده است فرمت بندی می کند :

The WHO was founded in 1948.


<blockquote>

بوت استرپ عنصر <blockquote> از HTML را به طریقی که در زیر آمده است فرمت بندی میکند :

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

برای نمایش نقل قول (<blockquote>) به صورت راست چین از کلاس blockquote-reverse. استفاده کنید :

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

<dl>

بوت استرپ عنصر <dl> از HTML را به طریقی که در زیر آمده است فرمت بندی میکند :

Coffee
- black hot drink
Milk
- white cold drink

<code>

بوت استرپ عنصر <code> از HTML را به طریقی که در زیر آمده است فرمت بندی میکند :

The following HTML elements: span, section, and div defines a section in a document.


<kbd>

بوت استرپ عنصر <kbd> از HTML را به طریقی که در زیر آمده است فرمت بندی میکند :

Use ctrl + p to open the Print dialog box.


<pre>

بوت استرپ عنصر <pre> از HTML را به طریقی که در زیر آمده است فرمت بندی میکند :

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

کلاس های رنگ و بگ گراند

بوت استرپ دارای کلاس هایی است که میتوان با استفاده از آنها متن را با رنگ های مختلف فرمت بندی کرد. کلاس ها برای رنگ متون عبارت اند از : 
text-muted, .text-primary, .text-success, .text-info, .text-warning و text-danger. :

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.

کلاس ها یی که از طریق آنها متون رنگ بگ گراند متون را مشخص کرد عبارت اند از : 
bg-primary, .bg-success, .bg-info, .bg-warning. و bg-danger.  :

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.


کلاس بیشتر برای فرمت دهی متون

کلاس های بوت استرپی که در جدول زیر نشان داده شده اند میتوانند برای فرمت بندی عناصر HTML استفاده شوند :
 

منتشر شده در ۸ آبان ۱۳۹۶ حمید رضا ملکی ۱۸۱۸ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید