Iconly/Curved/Arrow - Left 2Iconly/Curved/Arrow - CircleIconly/Curved/Arrow - SearchIconly/Curved/Arrow - cubeIconly/Curved/Arrow - checkIconly/Curved/Arrow - pieIconly/Curved/Arrow - plusIconly/Curved/Arrow - minusIconly/Curved/Arrow - heartIconly/Curved/Arrow - Arrow-downIconly/Curved/Arrow - WeatherIconly/Curved/Arrow - StarIconly/Curved/Home

تایپوگرافی

سرفصل‌ها

تمام سرفصل‌های HTML، از <h1> تا <h6> در دسترس هستند.

کد اندازه فونت سرفصل
<h1></h1>

2.5rem

سرفصل 1 (MEGA)

<h2></h2>

2rem

سرفصل 2 (XL)

<h3></h3>

1.75rem

سرفصل 3 (LARGE)

<h4></h4>

1.5rem

سرفصل 4 (MEDIUM)

<h5></h5>
1.25rem
سرفصل 5 (SMALL)
<h6></h6>
1rem
سرفصل 6

سرفصل‌های رنگی

تمام سرفصل‌های HTML، از <h1> تا <h6> موجود هستند.

کد سرفصل
<h1></h1>

سرفصل 1 زیرسرفصل

<h2></h2>

سرفصل 2 زیرسرفصل

<h3></h3>

سرفصل 3 زیرسرفصل

<h4></h4>

سرفصل 4 زیرسرفصل

<h5></h5>
سرفصل 5 زیرسرفصل
<h6></h6>
سرفصل 6 زیرسرفصل

وزن فونت

با استفاده از کلاس f-w-* می‌توانید وزن فونت را تغییر دهید.

می‌توانید وزن فونت پررنگ‌تر برای سرفصل 1 را با استفاده از f-w-700 تنظیم کنید

می‌توانید وزن فونت بولد برای سرفصل 2 را با استفاده از f-w-600 تنظیم کنید

می‌توانید وزن فونت متوسط برای سرفصل 3 را با استفاده از f-w-500 تنظیم کنید

می‌توانید وزن فونت معمولی برای سرفصل 4 را با استفاده از f-w-400 تنظیم کنید

می‌توانید وزن فونت سبک برای سرفصل 5 را با استفاده از f-w-300 تنظیم کنید

تایپوگرافی لیست‌ها

تمام لیست‌های تایپوگرافی:- <ul> ، <ol> و <dl>.

لیست نامرتب
  • کسی که به جنبه روشن مسائل نگاه می‌کند
  • کسی که کاری را به صورت غیرحرفه‌ای ولی برای لذت انجام می‌دهد
  • خط‌دستی که قابل خواندن نیست
  • کسی که به جنبه روشن مسائل نگاه می‌کند
  • مطالعه نوشته‌ها و اسناد قدیمی
  • ایجاد قابلیت‌های پیچیده‌تر برای یک صفحه وب جهت استفاده از زبان برنامه‌نویسی
  • حفظ ارتباط و برقراری ارتباط واضح نیز ضروری است. داشتن توانایی برای یک طراح
لیست مرتب
  1. کیت‌های رابط کاربری (UI Kits)
  2. رابط کاربری اضافی (Bonus Ui)
  3. انیمیشن‌ها
    1. تایپوگرافی (Typography)
    2. آواتارها (Avatars)
    3. شبکه‌بندی (Grid)
    4. برچسب‌ها و پِل‌ها (Tag & pills)
    5. هشدارها (Alert)
  4. منوی کشویی (Dropdown)
  5. تب‌ها (Tabs)
  6. آکاردئون (Accordion)
لیست توضیحات
راه شروع کار این است که حرف زدن را متوقف کرده و شروع به انجام دادن کنید.
-والت دیزنی
زندگی همان چیزی است که در حین برنامه‌ریزی برای دیگر چیزها اتفاق می‌افتد.
-جان لنون
هر کسی که خوشحال است دیگران را نیز خوشحال می‌کند.
-آن فرانک
زندگی یا ماجراجویی جسورانه است یا هیچ چیز.
-هلن کلر
هدف زندگی ما شاد بودن است.
-دالایی لاما

عنوان نمایشی

عناصر سنتی عنوان به گونه‌ای طراحی شده‌اند که در محتوای اصلی صفحه شما بهترین عملکرد را داشته باشند. وقتی نیاز دارید یک عنوان برجسته شود، می‌توانید از display heading استفاده کنید - یک سبک عنوان بزرگتر و کمی برجسته‌تر.

نمایش 1

نمایش 2

نمایش 3

نمایش 4

عناصر متنی درون خطی

استایل‌دهی برای عناصر رایج HTML5 درون خطی.

می‌توانید از تگ mark برای برجسته کردن متن استفاده کنید.

این خط از متن به عنوان متن حذف شده در نظر گرفته شده است.

این خط از متن دیگر دقیق نیست.

این خط از متن به صورت زیرخط دار نمایش داده می‌شود

این خط از متن به عنوان ریزنویس در نظر گرفته شده است.

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

این خط به صورت متن مورب نمایش داده شده است.

رنگ متن

می‌توانید با استفاده از کلاس txt-* رنگ متن را تغییر دهید.

این متن اصلی است. می‌توانید با افزودن .text-primary به آن برسید.

این متن ثانویه است. می‌توانید با افزودن .text-secondary به آن برسید.

این متن موفقیت است. می‌توانید با افزودن .text-success به آن برسید.

این متن اطلاعاتی است. می‌توانید با افزودن .text-info به آن برسید.

این متن هشدار است. می‌توانید با افزودن .text-warning به آن برسید.

این متن خطر است. می‌توانید با افزودن .text-danger به آن برسید.

این متن تاریک است. می‌توانید با افزودن .text-dark به آن برسید.

نقل قول‌ها (Blockquotes)

تگ <blockquote> بخشی را مشخص می‌کند که از منبع دیگری نقل شده است.

تنها سفر غیرممکن، سفری است که هرگز آغاز نمی‌کنید.

تونی رابینز

در این زندگی ما نمی‌توانیم کارهای بزرگ انجام دهیم. فقط می‌توانیم کارهای کوچک را با عشق بزرگ انجام دهیم.

مادر ترزا

در آفتاب زندگی کنید، دریا را شنا کنید، هوای وحشی را بنوشید.

رالف والدو امرسون