سبد خرید

بستن سبد خرید

سبد خرید شما خالی است.

تعداد محصول: 0 کل قیمت: تومان0

تایپوگرافی در بوت استرپ 4

تایپوگرافی در بوت استرپ 4 در این قسمت از مجموعه آموزشی Bootstrap 4 می خواهیم به بررسی تایپوگرافی bootstrap ، متون و حالت های مختلف نمایش آن ها بپردازیم.


تایپوگرافی در بوت استرپ 4 ، در این قسمت از مجموعه آموزشی Bootstrap 4 می خواهیم به بررسی تایپوگرافی bootstrap ، متون و حالت های مختلف نمایش آن ها بپردازیم. اطلاعات کافی در این زمینه می تواند به شما کمک کند که وب سایت خود را به آسانی و با دقت بیشتری طراحی کنید.

تنظیمات پیش فرض

در بوت استرپ 4 متون، تنظیمات پیش فرض خاص خودشان را دارند. font-size برابر با 16 پیکسل و line-height برابر با 1.5 است. همچنین font-family برابر با توالی زیر است:

"Helvetica Neue", Helvetica, Arial, sans-serif

به علاوه، تمام عناصر <p> دارای margin-top: 0 و margin-bottom: 1rem (برابر 16 پیکسل) هستند.

تگ های heading

تگ های <h1> تا <h6> در بوت استرپ:

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

<div class="container">
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
</div>

 

این حالت عادیِ heading ها در بوت استرپ است اما چیزی به نام Display heading نیز وجود دارد که همان heading ها هستند با این تفاوت که اندازه ی فونت بزرگتری داشته اما وزن فونت کمتر است. این نوع heading ها با یکی از چهار کلاس display-1. و display-2. و display-3. و display-4. مشخص می شوند. به کد زیر توجه کنید:

<div class="container">
    <h1>نوع heading ها </h1>
    <h1 class="display-1">نمایش 1</h1>
    <h1 class="display-2">نمایش 2</h1>
    <h1 class="display-3">نمایش 3</h1>
    <h1 class="display-4">نمایش 4</h1>
</div>

 

عنصر <small>

در بوت استرپ 4 عنصری به نام <small> وجود دارد که وظیفه اش ایجاد متن خاصی در heading ها با سایزی کوچکتر است. به مثال زیر نگاه کنید:

<div class="container">
    <h1>باریکتر , متن دوم</h1>  
    <h1>h1 <small>متن دوم</small></h1>
    <h2>h2 <small>متن دوم</small></h2>
    <h3>h3 <small>متن دوم</small></h3>
    <h4>h4 <small>متن دوم</small></h4>
    <h5>h5 <small>متن دوم</small></h5>
    <h6>h6 <small>متن دوم</small></h6>
</div>

 

عنصر <mark>

بوت استرپ 4 عنصر <mark> را بر اساس سلیقه ی خود استایل دهی می کند؛ به پس زمینه ی آن رنگ زرد کمرنگ و کمی padding! شما می توانید این موضوع را در مثال زیر ببینید:

<div class="container">
    <h1>متن برجسته</h1>
    <p>برای <mark>برجسته</mark> متن از عنصر mark استفاده کنید.</p>
</div>

 

عنصر <abbr>

بوت استرپ 4 عنصر <abbr> را به صورت نقطه چین هایی زیر عنصر مربوطه تغییر می دهد. در این مثال دقت کنید:

<div class="container">
    <h1>abbr</h1>
    <p>عنصر abbr برای مشخص کردن مخفف اختصاری یا مخفف استفاده می شود:</p>
    <p><abbr title="سازمان بهداشت جهانی">چه کسی</abbr> در سال 1948 تاسیس شد.</p>
</div>

 

عنصر <code>

بوت استرپ 4 کد ها (عنصر <code>) را به این شکل استایل دهی می کند:

<div class="container">
    <h1>عنصر  کد</h1>
    <p>قطعه درون خطی از کد باید در عنصر کد جاسازی شده:</p>
    <p>عناصر HTML: <code>span</code>, <code>section</code>, و <code>div</code> یک بخش را در یک سند تعریف می کنند..</p>
</div>

پست های مشابه

29اسفند 1399

کار با تصاویر و رنگ ها در بوت استرپ ، رنگ ها در بوت استرپ (از نظر پیاده سازی) به دو دسته ی رنگ های متن و رنگ های پس زمینه تقسیم می شوند و تصاویر در بوت استرپ که در این آموزش به شما یاد خواهیم داد.

69

0

29اسفند 1399

مجموعه دکمه ها یا button group ها همانطور که از نامشان مشخص است، مجموعه ای از چند دکمه هستند که در کنار هم قرار می گیرند. برای ساخت این دکمه ها باید از کلاس btn-group. استفاده کنید. به مثال زیر دقت کنید …

100

0

29اسفند 1399

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

65

0

دیدگاه و پرسش