سرتیتر های HTML پیش فرض

همه سرتیتر های HTML، <h1> تا <h6>، همگی آماده هستند. کلاس های .h1 تا .h6 هم همچنین برای اعمال استایل های سرتیتر ها به المان های دیگر آماده هستند.

پیش‌نمایش اندازه فونت
سرصفحه H6
1rem
سرصفحه H5
1.3rem

سرصفحه H4

1.47rem

سرصفحه H3

1.73rem

سرصفحه H2

2.13rem

سرصفحه H1

2.53rem

سرتیتر های نازک / ضخیم

همه سرتیتر های HTML در وزن های نازک و ضخیم آماده هستند. از .text-bold-300 برای سرتیتر های نازک و از .text-bold-700 برای سرتیتر های ضخیم به همراه تگ ها یا کلاس های سرتیتر استفاده کنید.

سرتیترهای نازک سرتیترهای ضخیم
سرتیتر 6
سرتیتر 6
سرتیتر 5
سرتیتر 5

سرتیتر 4

سرتیتر 4

سرتیتر 3

سرتیتر 3

سرتیتر 2

سرتیتر 2

سرتیتر 1

سرتیتر 1

سفارشی سازی سرتیتر ها پیش فرض

از کلاس های کاربردی ارائه شده برای ایجاد متن ثانویه کوچک سرتیتر استفاده کنید.

نمایش سرتیتر متن ثانویه
نمایش سرتیتر متن ثانویه

نمایش سرتیتر متن ثانویه

نمایش سرتیتر متن ثانویه

نمایش سرتیتر متن ثانویه

نمایش سرتیتر متن ثانویه

رنگ های سرتیتر ها

سرتیتر ها همچنین میتوانند با گزینه های رنگی مختلف تغییر کنند.
از .{colorName} به همراه المان های سرتیتر استفاده کنید.

نمایش سرتیتر
نمایش سرتیتر

نمایش سرتیتر

نمایش سرتیتر

نمایش سرتیتر

نمایش سرتیتر

نمایش سرتیتر ها

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

نمایش 1

نمایش 2

نمایش 3

نمایش 4

نقل قول ها

برای نقل قول کردن محتوا از یک منبع دیگر در صفحه خود <blockquote class="blockquote"> را دور هر HTML به عنوان نقل قول قرار دهید.


نقل قول ها پیش فرض

بلوک های نقل قول پایه تراز راست. از کلاس های کاربردی مانند .text-center / .text-right در صورت نیاز برای تغییر تراز بلوک نقل قول استفاده کنید.

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان

نامگذاری یک منبع پیش فرض

یک <footer class="blockquote-footer"> برای شناسایی منبع اضافه کنید. نام منبع را داخل <cite> قرار دهید.

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان

استیو جابز بنیان گذار شرکت اپل

استایل دهی بلوک نقل قول پیش فرض

یک .border-{left/right}-{color} .border-{left/right}-3 اضافه کنید، که color میتواند هر رنگی از پالت رنگ قالب مدیریت Frest باشد.

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون

استیو جابز بنیان گذار شرکت اپل

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون

استیو جابز بنیان گذار شرکت اپل

بلوک نقل قول با آواتار پیش فرض

بلوک نقل قول با آواتار که از رسانه ها استفاده میکند. میتوانید نوع تصویر، تراز خط و استایل آن را سفارشی سازی کنید.

Generic placeholder image
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان
استیو جابز بنیان گذار شرکت اپل

نمونه بلوک نقل قول با تصویر آواتار گرد

Generic placeholder image
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان
استیو جابز بنیان گذار شرکت اپل

لیست ها


لیست های بدون استایل

از کلاس .list-unstyled برای لیست های بدون استایل استفاده کنید. این کلاس list-style و فاصله راست پیش فرض را از آیتم های لیست حذف می کند (تنها در فرزندان مستقیم). این تنها به آیتم های لیست که فرزندان مستقیم هستند اعمال می شود.، به این معنی که برای لیست های تو در تو نیاز به افزودن کلاس به هر لیست داخلی دارید.

  • لورم ایپسوم متن ساختگی با تولید
  • لورم ایپسوم متن ساختگی با تولید
  • لورم ایپسوم متن ساختگی با تولید
  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با تولید
    • لورم ایپسوم متن ساختگی با
    • لورم ایپسوم متن ساختگی با
    • لورم ایپسوم متن ساختگی با تولید سادگی
    • لورم ایپسوم متن ساختگی با تولید
  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با
  • لورم ایپسوم متن ساختگی

لیست های نا مرتب پیش فرض

لیستی از آیتم ها که در آن ها ترتیب اهمیتی ندارد. از کلاس .list-style-circle یا .list-style-square در لیست های نامرتب برای افزودن اشاره گر دایره یا مربع استفاده کنید.

  • لورم ایپسوم متن ساختگی با تولید
  • لورم ایپسوم متن ساختگی با تولید
  • لورم ایپسوم متن ساختگی با تولید
  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با تولید
    • لورم ایپسوم متن ساختگی با
    • لورم ایپسوم متن ساختگی با
    • لورم ایپسوم متن ساختگی با تولید سادگی
    • لورم ایپسوم متن ساختگی با تولید
  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با
  • لورم ایپسوم متن ساختگی

لیست های مرتب پیش فرض

لیستی از آیتم ها که در آن ها ترتیب اهمیت دارد. از <ol type="1|a|A|i|I">استفاده کنید، صفت type نوع نشانگر استفاده شده در لیست را مشخص می کند.

  1. لورم ایپسوم متن ساختگی با تولید
  2. لورم ایپسوم متن ساختگی با تولید
  3. لورم ایپسوم متن ساختگی با تولید
  4. لورم ایپسوم متن ساختگی با تولید سادگی
  5. لورم ایپسوم متن ساختگی با تولید
    1. لورم ایپسوم متن ساختگی با
    2. لورم ایپسوم متن ساختگی با
    3. لورم ایپسوم متن ساختگی با تولید سادگی
    4. لورم ایپسوم متن ساختگی با تولید
  6. لورم ایپسوم متن ساختگی با تولید سادگی
  7. لورم ایپسوم متن ساختگی با
  8. لورم ایپسوم متن ساختگی

لیست های دارای آیکن

لیستی از آیتم های دارای آیکن، از کلاس .list-style-icons استفاده کنید. میتوانید از هر آیکن از انواع آیکن های قالب مدیریتی Frest استفاده کنید.

  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با تولید
    • لورم ایپسوم متن ساختگی با
    • لورم ایپسوم متن ساختگی با تولید
  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با

لیست های خطی پیش فرض

نشانگر یک لیست را حذف کرده و مقداری margin را با ترکیب این دو کلاس اعمال کنید .list-inline و .list-inline-item.

از اعداد، حروف، آیکن ها و ... خطی برای لیست های خطی مرتب استفاده کنید.

  • شکلات
  • کیک
  • بستنی
  • 1. شکلات
  • 2. کیک
  • 3. بستنی
  • گوگل
  • توییتر
  • فیسبوک

تراز لیست توصیف

عبارت ها و توضیحات را به صورت افقی با استفاده از کلاس های از پیش تعریف شده توری تراز کنید. برای آیتم های طولانی میتوانید یک کلاس اختیاری .text-truncate برای خلاصه کردن متن با ... اضافه کنید.


لیست های توصیف افقی

لیست های توصیف
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
لورم ایپسوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
لورم ایپسوم متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از
لورم ایپسوم متن ساختگی با تولید
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
تو در تو
لورم ایپسوم متن ساختگی
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده

لیست های توصیف عمودی

لیست های توصیف
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
لورم ایپسوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
لورم ایپسوم متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از

لیست های توصیف افقی

لیست های توصیف با متن تراز چپ داخل تگ <dt> با استفاده از .text-right

لیست های توصیف
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
لورم ایپسوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
لورم ایپسوم متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از
لورم ایپسوم متن ساختگی با تولید
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
تو در تو
لورم ایپسوم متن ساختگی
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده

سفارشی سازی قالب

سفارشی سازی کنید و به صورت زنده مشاهده کنید.
طرح قالب

رنگ های فهرست

جمع کردن فهرست

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

نوع فوتر

سایه کارت

مخفی سازی دکمه اسکرول به بالا
ارتباط با ما
امروز

لورم ایپسوم متن ساختگی

7:45 ق.ظ

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

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم

7:50 ق.ظ

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ

8:01 ق.ظ