تایپوگرافی
سرفصل های اساسی
تمام عناوین HTML،<h1>
through <h6>
, are available.
.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.
سرفصل 1
سرفصل 2
سرفصل 3
سرفصل 4
سرفصل 5
سرفصل 6
از کلاس های کاربردی گنجانده شده برای بازسازی متن عنوان ثانویه کوچک استفاده کنید
عنوان نمایش فانتزیWith faded secondary text
پیوندها
لینک ها پیش فرض دارندcolor
and underline applied. While links change on :hover
, they don’t change based on whether someone :visited
the link. They also receive no special :focus
styles.
پیوندهای نگهدارنده مکان - آنهایی که بدونhref
—are targeted with a more specific selector and have their color
and text-decoration
reset to their default values.
مسابقه
برای نقل قول بلوک های محتوا از منبع دیگری در سند شما. <blockquote class="blockquote">
around any HTML as the quote.
یک نقل قول شناخته شده، موجود در یک عنصر blockquote.
مشخصات HTML مستلزم آن است که انتساب blockquote خارج از آن قرار گیرد<blockquote>
. When providing attribution, wrap your <blockquote>
in a <figure>
and use a <figcaption>
or a block level element (e.g., <p>
) with the .blockquote-footer
class. Be sure to wrap the name of the source work in <cite>
as well.
در صورت نیاز از ابزارهای متنی برای تغییر تراز نقل قول خود استفاده کنید.
لیست ها
پیش فرض را حذف کنید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.
- این یک لیست است.
- کاملاً بدون استایل به نظر می رسد.
- از نظر ساختاری، هنوز یک لیست است.
- با این حال، این سبک فقط برای عناصر کودک فوری اعمال می شود.
- لیست های تو در تو:
- تحت تأثیر این سبک قرار نگرفته اند
- همچنان یک گلوله نشان خواهد داد
- و حاشیه چپ مناسب داشته باشد
- این ممکن است هنوز هم در برخی شرایط مفید باشد.
گلوله های یک لیست را بردارید و مقداری نور اعمال کنیدmargin
with a combination of two classes, .list-inline
and .list-inline-item
.
- این یک آیتم فهرست است.
- و یکی دیگر.
- اما آنها به صورت درون خطی نمایش داده می شوند.
اختصارات
پیاده سازی تلطیف شده از 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
to an abbreviation for a slightly smaller font-size.
attr
HTML
نمایش سرفصل ها
عناصر عنوان سنتی به گونهای طراحی شدهاند که بهترین عملکرد را در محتوای صفحه شما داشته باشند. display heading- یک سبک عنوان بزرگتر و کمی با نظر بیشتر.
نمایشگر 1
نمایش 2
نمایش 3
نمایشگر 4
نمایشگر 5
نمایشگر 6
رهبری
با اضافه کردن، یک پاراگراف را متمایز کنید.lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
سبک های متن درون خطی
یک ظاهر طراحی برای عناصر رایج HTML5 درون خطی.
می توانید از تگ علامت گذاری استفاده کنیدhighlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
این خط از متن به عنوان چاپ ظریف در نظر گرفته شده است.
این خط به صورت متن پررنگ ارائه می شود.
This line rendered as italicized text.
اگر می خواهید به متن خود استایل بدهید، باید از کلاس های زیر استفاده کنید:
.mark
will apply the same styles as<mark>
..small
will apply the same styles as<small>
..text-decoration-underline
will apply the same styles as<u>
..text-decoration-line-through
will apply the same styles as<s>
.
تراز فهرست توضیحات
با استفاده از کلاس های از پیش تعریف شده سیستم گرید ما (یا میکس های معنایی)، اصطلاحات و توضیحات را به صورت افقی تراز کنید. .text-truncate
class to truncate the text with an ellipsis.
- لیست های توضیحات
- لیست توضیحات برای تعریف اصطلاحات عالی است.
- مدت، اصطلاح
-
تعریف اصطلاح.
و چند متن دیگر برای تعریف مکاننما.
- یک اصطلاح دیگر
- این تعریف کوتاه است، بنابراین هیچ پاراگراف اضافی یا هیچ چیز دیگری وجود ندارد.
- اصطلاح کوتاه شده کوتاه شده است
- این می تواند زمانی مفید باشد که فضا کم باشد.
- لانه سازی
-
- لیست تعریف تو در تو
- من شنیدم که شما لیست های تعریف را دوست دارید.
خلاصه
به طور پیش فرضcursor
on summary is text
, so we reset that to pointer
to convey that the element can be interacted with by clicking on it.
Some details
اطلاعات بیشتر در مورد جزئیات
Even more details
در اینجا جزئیات بیشتری در مورد جزئیات وجود دارد.