باسلام . در این جلسه از اموزش های بوت استرپ به بررسی انواع تایپوگرافی خواهیم پرداخت.
در قسمت های پیشین دوره ی بوت استرپ به بررسی نحوه ی نصب بوت استرپ و تقسیم بندی بوت استرپ پرداختیم.
برای سهولت استفاده میتوانید بر روی لینک های زیر کلیک کنید تا به تیترمورد نظر در مقاله هدایت شوید:
- ساختار های پیش فرض 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 با استایلی متفاوت تر وزن فونت زخیم تر ، سایز افزایش یافته در بوت استرپ :
|
1 2 3 4 5 6 7 8 |
<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> |
بخش های نمایش
بخش های نمایش برای استفاده از سایز های بزرگتر استفاده خواهند شد ، بخش های نمایش از تگ های h1 تا h6 به نسبت بزرگتر هستند.
برای استفاده از بخش های نمایش باید از چهار کلاس .display-1 , .display-2 , .display-3 , .display-4 استفاده کرد.
|
1 2 3 4 |
<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> |
تگ small
در بوت استرپ 4 از تگ small در دسته تایپوگرافی وقتی استفاده میشود که نیاز به متن ثانویه ای کوچکتر باشد:
|
1 2 3 4 5 6 |
<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> |
تگ mark
تگ مارک مخصوص نشانه گذاری قسمتی از محتوای شماست که با رنگ زرد و مقداری فاصله است بصورت زیر :
|
1 |
<p>Use the mark element to <mark>highlight</mark> text.</p> |
تگ abbr
این تگ مخصوص توضیحات بیشتر است که با نقطه چین زیر نوشته مشخص میشود:
|
1 2 |
<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> |
تگ blockqoute
برای جداکردن نقل قول باید از کلاس blockqoute استفاده کرد به مثال زیر توجه کنید:
|
1 2 3 4 |
<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> |
تگ dl
بوت استرپ 4 تگ dl را در دسته تایپوگرافی بصورت زیر تعریف میکند:
|
1 2 3 4 5 6 |
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> |
تگ code
تگ کد در بوت استرپ 4 بصورت زیر تعریف میشود :
|
1 2 3 4 5 |
<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> |
تگ kbd
تگ kbd در بوت استرپ 4 بصورت زیر تعریف شده است:
|
1 2 3 4 5 |
<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> |
تگ pre
تگ pre در بوت استرپ بصورت زیر است:
|
1 2 3 4 5 |
<pre>Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks. |
ویدیوی قسمت سوم
برای مطالعه موارد بیشتر میتوانید به سایت getbootstrap مراجعه کنید.
امیدوارم این اموزش برای شما عزیزان مفید واقع شده باشد.
موفق باشید.
3 Comments
Join the discussion and tell us your opinion.
عالی .
سپاس از همراهی شما.
بسیار عالی ممنون