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

در قسمت های پیشین دوره ی بوت استرپ به بررسی نحوه ی نصب بوت استرپ و تقسیم بندی بوت استرپ پرداختیم.

برای سهولت استفاده میتوانید بر روی لینک های زیر کلیک کنید تا به تیترمورد نظر در مقاله هدایت شوید:

• ساختار های پیش فرض bootstrap 4
• تگ های h1 تا h6
• بخش های نمایش
• تگ small
• تگ mark
• تگ abbr
• تگ blockqoute
• تگ dl
• تگ code
• تگ kbd
• تگ pre
• ویدیو قسمت سوم

ساختار های پیش فرض bootstrap 4

بوت استرپ به عنوان پیش فرض از سایز فونت (font-size) 16 پیکسل و ارتفاع خط (line-height) 1.5 استفاده میکند.

فونت های پیش فرض بوت استرپ “Helvetica Neue”, Helvetica, Arial, sans-serif می باشند.

علاوه بر این تمام تگ های p دارای المان css (margin-top:0px;) و المان (margin-bottom:1rem) یا 16 پیکسل می باشد.

تگ های h1 تا h6

تگ های h1 تا h6 با استایلی متفاوت تر وزن فونت زخیم تر ، سایز افزایش یافته در بوت استرپ :

  
h1 Bootstrap heading (2.5rem = 40px)
  
h2 Bootstrap heading (2rem = 32px)
  
h3 Bootstrap heading (1.75rem = 28px)
  
h4 Bootstrap heading (1.5rem = 24px)
  
h5 Bootstrap heading (1.25rem = 20px)
  
h6 Bootstrap heading (1rem = 16px)

بخش های نمایش

بخش های نمایش برای استفاده از سایز های بزرگتر استفاده خواهند شد ، بخش های نمایش از تگ های h1 تا h6 به نسبت بزرگتر هستند.

برای استفاده از بخش های نمایش باید از چهار کلاس .display-1 , .display-2 , .display-3 , .display-4 استفاده کرد.

Display 1
  
Display 2
  
Display 3
  
Display 4

تگ small

در بوت استرپ 4 از تگ small در دسته تایپوگرافی وقتی استفاده میشود که نیاز به متن ثانویه ای کوچکتر باشد:

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

تگ مارک مخصوص نشانه گذاری قسمتی از محتوای شماست که با رنگ زرد و مقداری فاصله است بصورت زیر :

Use the mark element to highlight text.

تگ abbr

این تگ مخصوص توضیحات بیشتر است که با نقطه چین زیر نوشته مشخص میشود:

The abbr element is used to mark up an abbreviation or acronym:
  
The WHO was founded in 1948.

تگ blockqoute

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

    
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.
    
  

تگ dl

بوت استرپ 4 تگ dl را در دسته تایپوگرافی بصورت زیر تعریف میکند:

    
Coffee
    
- black hot drink
    
Milk
    
- white cold drink
  

تگ code

تگ کد در بوت استرپ 4 بصورت زیر تعریف میشود :

  
Code Snippets
  
Inline snippets of code should be embedded in the code element:
  
The following HTML elements: span, section, and div defines a section in a document.

تگ kbd

تگ kbd در بوت استرپ 4 بصورت زیر تعریف شده است:

  
Keyboard Inputs
  
To indicate input that is typically entered via the keyboard, use the kbd element:
  
Use ctrl + p to open the Print dialog box.

تگ pre

تگ pre در بوت استرپ بصورت زیر است:

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

ویدیوی قسمت سوم

برای مطالعه موارد بیشتر میتوانید به سایت getbootstrap مراجعه کنید.

امیدوارم این اموزش برای شما عزیزان مفید واقع شده باشد.

موفق باشید.