تایپوگرافی

  1. صفحه اصلی
  2. محتوا
  3. تایپوگرافی

تنظیمات جهانی

بوت استرپ سبک های اصلی نمایش جهانی، تایپوگرافی و پیوند را تنظیم می کند. textual utility classes.

  • استفاده از anative font stack that selects the best font-family for each OS and device.
  • استفاده کنید$font-family-base, $font-size-base, and $line-height-base attributes as our typographic base applied to the <body>.
  • رنگ پیوند سراسری را از طریق تنظیم کنید$link-color and apply link underlines only on :hover.
  • استفاده کنید$body-bg to set a background-color on the <body> (#fff by default).

سرفصل های HTMLDefault

تمام عناوین HTML،<h1> through <h6>, are available.

H1.

Semibold 2rem

H2.

Semibold 74rem

H3.

Semibold 1.51rem

H4.

Semibold 1.32rem
H5.
Semibold 1.14rem
H6.
Semibold 1rem

سر کلاس

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

H1.

Semibold 2rem

H2.

Semibold 74rem

H3.

Semibold 1.51rem

H4.

Semibold 1.32rem

H5.

Semibold 1.14rem

H6.

Semibold 1rem

سرفصل های نازک

H1.

H2.

H3.

H4.

H5.
H6.

سرفصل های سبک

H1.

H2.

H3.

H4.

H5.
H6.

عناوین پررنگ

H1.

H2.

H3.

H4.

H5.
H6.

سرفصل های سیاه

H1.

H2.

H3.

H4.

H5.
H6.

سفارشی کردن سرفصل هاDefault

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

نمایش عنوانSecondary text

نمایش عنوانSecondary text

نمایش عنوانSecondary text

نمایش عنوانSecondary text
نمایش عنوانSecondary text
نمایش عنوانSecondary text

رنگ های سرفصل

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

نمایش عنوان

نمایش عنوان

نمایش عنوان

نمایش عنوان
نمایش عنوان
نمایش عنوان

نمایش سرفصل ها

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

نمایشگر 1

نمایشگر 2

نمایش 3

نمایشگر 4

رهبری

با اضافه کردن، یک پاراگراف را متمایز کنید.lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

طراحی فقط آن چیزی نیست که به نظر می رسد و احساس می کند.

اختصارات

پیاده سازی تلطیف شده از HTML<abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.

اضافه کردن.initialism element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.

attr

HTML

نقل قول های بلوکی

برای نقل قول بلوک های محتوا از منبع دیگری در سند شما. <blockquote class="blockquote"> around any HTML as the quote.

نقل قول های بلوکیDefault

نقل قول های اصلی تراز چپ

طراحی فقط آن چیزی نیست که به نظر می رسد و احساس می کند.

نقل قول های بلوکیRight

اضافه کردن.blockquote-reverse for a blockquote with right-aligned content.

طراحی فقط آن چیزی نیست که به نظر می رسد و احساس می کند.

نام بردن از یک منبعDefault

a اضافه کنید<footer class="blockquote-footer"> for identifying the source. Wrap the name of the source work in <cite>.

ثروتمندترین مرد قبرستان بودن برای من مهم نیست.

Steve Jobs Entrepreneur

نام بردن از یک منبعRight

a اضافه کنید<footer class="blockquote-footer"> for identifying the source with .blockquote-reverse for a blockquote with right-aligned content.

ثروتمندترین مرد قبرستان بودن برای من مهم نیست.

Steve Jobs Entrepreneur

یک ظاهر طراحی بلوکDefault

a اضافه کنید.border-left-{color} .border-right-3 helper classes, where color can be any color from Chameleon Admin پالت رنگ.

گاهی اوقات وقتی نوآوری می کنید، اشتباه می کنید.

Steve Jobs Entrepreneur

گاهی اوقات وقتی نوآوری می کنید، اشتباه می کنید.

Steve Jobs Entrepreneur

یک ظاهر طراحی بلوکRight

a اضافه کنید.border-right-{color} .border-right-3 helper classes with .blockquote-reverse, where color can be any color from Chameleon Admin پالت رنگ.

گاهی اوقات وقتی نوآوری می کنید، اشتباه می کنید.

Steve Jobs Entrepreneur

گاهی اوقات وقتی نوآوری می کنید، اشتباه می کنید.

Steve Jobs Entrepreneur

لیست ها

برای نقل قول بلوک های محتوا از منبع دیگری در سند شما. <blockquote class="blockquote"> around any HTML as the quote.

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

از کلاس استفاده کنید.list-unstyled for Lists Unstyled. It remove the default list-style and left margin on list items (immediate children only). این فقط در مورد موارد فوری فهرست کودکان اعمال می شود, meaning you will need to add the class for any nested lists as well.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • عدد صحیح molestie lorem at massa
  • تسهیل در پرتیوم نیسل aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • زخم های پوروس سودال
    • Sem porttitor وستیبولوم laoreet
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

لیست های نامرتبDefault

فهرست مواردی که ترتیب آنها به صراحت اهمیت ندارد.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • عدد صحیح molestie lorem at massa
  • تسهیل در پرتیوم نیسل aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • زخم های پوروس سودال
    • Sem porttitor وستیبولوم laoreet
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

لیست های مرتب شدهDefault

فهرست مواردی که سفارش به صراحت در آنها اهمیت دارد.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. عدد صحیح molestie lorem at massa
  4. تسهیل در پرتیوم نیسل aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. زخم های پوروس سودال
    3. Sem porttitor وستیبولوم laoreet
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

لیست های نامرتبCircle

استفاده کنید.list-style-circle class in unordered list to add circle bullet points.

  • تسهیل در پرتیوم نیسل aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc

لیست های نامرتبSquare

استفاده کنید.list-style-square class in unordered list to add square bullet points.

  • تسهیل در پرتیوم نیسل aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc

لیست های مرتب شدهMixed

ترکیب کنید.list-style-square & .list-style-circle classes in unordered list to add square and circle bullet points.

  • تسهیل در پرتیوم نیسل aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc

لیست های مرتب شدهType

استفاده کنید<ol type="1|a|A|i|I">, The type attribute specifies the kind of marker to use in the list.

  1. تسهیل در پرتیوم نیسل aliquet
  2. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Ac tristique libero volutpat at
  3. Faucibus porta lacus fringilla vel
  4. Aenean sit amet erat nunc

لیست های مرتب شدهMixed

همچنین می توانید نوع لیست مرتب شده را با هم مخلوط کنید، مثال زیر ترکیب نوع I و i را نشان می دهد.

  1. تسهیل در پرتیوم نیسل aliquet
  2. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Ac tristique libero volutpat at
  3. Faucibus porta lacus fringilla vel
  4. Aenean sit amet erat nunc

نمادها را فهرست می کند

لیست اصطلاحات با نمادها، استفاده کنید.list-style-icons class. You can use any icon from Chameleon Admin icon types.

  • تسهیل در پرتیوم نیسل aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc

لیست های درون خطیDefault

گلوله های یک لیست را بردارید و مقداری نور اعمال کنیدmargin with a combination of two classes, .list-inline and .list-inline-item.

  • شکلات
  • کیک
  • بستنی

لیست های درون خطیOrdered

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

  • 1. شکلات
  • 2. کیک
  • 3. بستنی

لیست های درون خطیWith icons

همچنین می توانید از نمادهای Chameleon Admin در Inline Lists استفاده کنید.

  • یورو
  • پوند
  • دلار

تراز فهرست توضیحات

با استفاده از کلاس های از پیش تعریف شده سیستم گرید ما (یا میکس های معنایی)، اصطلاحات و توضیحات را به صورت افقی تراز کنید. .text-truncate class to truncate the text with an ellipsis.

لیست های توضیحاتHorizontal

لیست های توضیحات
لیست توضیحات برای تعریف اصطلاحات عالی است.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
اصطلاح کوتاه شده کوتاه شده است
Fusce dapibus، telus ac cursus commodo، Tortor Mauris Condimentum nibh، ut fermentum massa justo sit amet risus.
لانه سازی
لیست تعریف تو در تو
Aenean posuere, Tortor sed cursus feugiat, nunc augue blandit nunc.

لیست های توضیحاتVertical

لیست های توضیحات
لیست توضیحات برای تعریف اصطلاحات عالی است.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

لیست های توضیحاتHorizontal

لیست های توضیحات با متن تراز شده سمت راست<dt> tag using .text-right

لیست های توضیحات
لیست توضیحات برای تعریف اصطلاحات عالی است.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
اصطلاح کوتاه شده کوتاه شده است
Fusce dapibus، telus ac cursus commodo، Tortor Mauris Condimentum nibh، ut fermentum massa justo sit amet risus.
لانه سازی
لیست تعریف تو در تو
Aenean posuere, Tortor sed cursus feugiat, nunc augue blandit nunc.
گزینه های رنگ نوار نوار
گزینه های طرح بندی
پس زمینه منوی نوار کناری
تصویر پس زمینه نوار کناری
background image
background image
background image
background image
تم های بیشتر
Layout Builder را امتحان کنید