تایپوگرافی
مستندات و نمونههایی برای تایپوگرافی بوت استرپ، از جمله تنظیمات جهانی، سرفصلها، متن متن، فهرستها و موارد دیگر.
تنظیمات جهانی
بوت استرپ سبک های اصلی نمایش جهانی، تایپوگرافی و پیوند را تنظیم می کند. وقتی به کنترل بیشتری نیاز است، کلاسهای ابزار متنی را بررسی کنید .
- از یک پشته فونت بومی استفاده کنید که بهترین ها را
font-family
برای هر سیستم عامل و دستگاه انتخاب می کند. - برای یک مقیاس نوع جامع تر و در دسترس تر، از ریشه پیش فرض مرورگر
font-size
(معمولاً 16 پیکسل) استفاده می کنیم تا بازدیدکنندگان بتوانند پیش فرض های مرورگر خود را در صورت نیاز سفارشی کنند. - از صفات
$font-family-base
,$font-size-base
و$line-height-base
به عنوان پایه تایپوگرافی ما برای اعمال استفاده کنید<body>
. - رنگ پیوند سراسری را از طریق تنظیم کنید
$link-color
. - برای
$body-bg
تنظیم یکbackground-color
روی<body>
(#fff
به طور پیش فرض) استفاده کنید.
این سبک ها را می توان در داخل پیدا _reboot.scss
کرد و متغیرهای سراسری در تعریف شده اند _variables.scss
. حتما وارد $font-size-base
شوید rem
.
سرفصل ها
تمام عناوین HTML، <h1>
از طریق <h6>
، در دسترس هستند.
سرفصل | مثال |
---|---|
<h1></h1> |
h1. عنوان بوت استرپ |
<h2></h2> |
h2. عنوان بوت استرپ |
<h3></h3> |
h3. عنوان بوت استرپ |
<h4></h4> |
h4. عنوان بوت استرپ |
<h5></h5> |
h5. عنوان بوت استرپ |
<h6></h6> |
h6. عنوان بوت استرپ |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
.h1
کلاس های through .h6
نیز در دسترس هستند، برای زمانی که می خواهید سبک فونت یک عنوان را مطابقت دهید اما نمی توانید از عنصر HTML مرتبط استفاده کنید.
h1. عنوان بوت استرپ
h2. عنوان بوت استرپ
h3. عنوان بوت استرپ
h4. عنوان بوت استرپ
h5. عنوان بوت استرپ
h6. عنوان بوت استرپ
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
سفارشی کردن سرفصل ها
از کلاسهای کاربردی گنجانده شده برای بازآفرینی متن عنوان ثانویه کوچک از Bootstrap 3 استفاده کنید.
عنوان نمایش فانتزی با متن ثانویه محو شده
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
نمایش سرفصل ها
عناصر عنوان سنتی به گونهای طراحی شدهاند که بهترین عملکرد را در محتوای صفحه شما داشته باشند. هنگامی که نیاز به یک عنوان برای متمایز شدن دارید، استفاده از عنوان نمایش را در نظر بگیرید - یک سبک عنوان بزرگتر و کمی با نظر بیشتر.
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
عناوین نمایش از طریق $display-font-sizes
نقشه Sass و دو متغیر $display-font-weight
و $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
رهبری
یک پاراگراف را با اضافه کردن برجسته .lead
کنید.
این یک پاراگراف اصلی است. از پاراگراف های معمولی متمایز است.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
عناصر متن درون خطی
یک ظاهر طراحی برای عناصر رایج HTML5 درون خطی.
می توانید از تگ علامت گذاری استفاده کنیدبرجستهمتن
این خط متن به عنوان متن حذف شده در نظر گرفته می شود.
این خط از متن قرار است دیگر دقیق نباشد.
این خط متن قرار است به عنوان یک افزوده به سند تلقی شود.
این خط متن به صورت زیرخط دار ارائه می شود.
این خط از متن به عنوان چاپ ظریف در نظر گرفته شده است.
این خط به صورت متن پررنگ ارائه می شود.
این خط به صورت متن ایتالیک ارائه شده است.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
مراقب باشید که این برچسب ها باید برای اهداف معنایی استفاده شوند:
<mark>
متنی را نشان می دهد که برای ارجاع یا نشانه گذاری علامت گذاری یا برجسته شده است.<small>
نمایانگر نظرات جانبی و چاپ کوچک، مانند حق چاپ و متن قانونی است.<s>
عنصری را نشان می دهد که دیگر مرتبط نیست یا دقیق نیست.<u>
گستره ای از متن درون خطی را نشان می دهد که باید به گونه ای ارائه شود که نشان دهد حاشیه نویسی غیر متنی دارد.
اگر می خواهید به متن خود استایل بدهید، باید از کلاس های زیر استفاده کنید:
.mark
همان سبکها را اعمال خواهد کرد<mark>
..small
همان سبکها را اعمال خواهد کرد<small>
..text-decoration-underline
همان سبکها را اعمال خواهد کرد<u>
..text-decoration-line-through
همان سبکها را اعمال خواهد کرد<s>
.
در حالی که در بالا نشان داده نشده است، با خیال راحت از آن در HTML5 استفاده <b>
کنید . به معنای برجسته کردن کلمات یا عبارات بدون انتقال اهمیت اضافی است، در حالی که بیشتر برای صدا، اصطلاحات فنی و غیره است.<i>
<b>
<i>
ابزارهای متنی
تراز متن، تغییر شکل، سبک، وزن، ارتفاع خط، دکوراسیون و رنگ را با ابزارهای متن و ابزارهای رنگی ما تغییر دهید .
اختصارات
اجرای تلطیف شده <abbr>
عنصر HTML برای اختصارات و کلمات اختصاری برای نشان دادن نسخه گسترش یافته در حالت شناور. اختصارات دارای یک زیر خط پیشفرض هستند و نشانگر کمکی برای ارائه زمینه اضافی در شناور و کاربران فناوریهای کمکی به دست میآورند.
.initialism
برای اندازه فونت کمی کوچکتر به مخفف اضافه کنید.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
نقل قول های بلوکی
برای نقل قول بلوک های محتوا از منبع دیگری در سند شما. دور <blockquote class="blockquote">
هر HTML به عنوان نقل قول بپیچید.
یک نقل قول شناخته شده، موجود در یک عنصر blockquote.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
نام بردن از یک منبع
مشخصات HTML مستلزم آن است که انتساب blockquote خارج از <blockquote>
. <blockquote>
هنگام ارائه انتساب، خود را در a بپیچید <figure>
و از یک <figcaption>
یا یک عنصر سطح بلوک (به عنوان مثال، <p>
) با .blockquote-footer
کلاس استفاده کنید. حتماً نام کار منبع را <cite>
نیز بپیچید.
<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
هم ترازی
در صورت نیاز از ابزارهای متنی برای تغییر تراز نقل قول خود استفاده کنید.
<figure class="text-center">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
<figure class="text-end">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
لیست ها
بی استایل
حاشیه پیشفرض list-style
و حاشیه چپ را در موارد فهرست حذف کنید (فقط کودکان فوری). این فقط برای آیتمهای فهرست کودکان فوری اعمال میشود ، به این معنی که باید کلاس را برای لیستهای تودرتو نیز اضافه کنید.
- این یک لیست است.
- کاملاً بدون استایل به نظر می رسد.
- از نظر ساختاری، هنوز یک لیست است.
- با این حال، این سبک فقط برای عناصر کودک فوری اعمال می شود.
- لیست های تو در تو:
- تحت تأثیر این سبک قرار نگرفته اند
- همچنان یک گلوله نشان خواهد داد
- و حاشیه چپ مناسب داشته باشد
- این ممکن است هنوز هم در برخی شرایط مفید باشد.
<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul>
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>
درون خطی
گلوله های یک لیست را بردارید و مقداری نور margin
با ترکیب دو کلاس اعمال کنید .list-inline
و .list-inline-item
.
- این یک آیتم فهرست است.
- و یکی دیگر.
- اما آنها به صورت درون خطی نمایش داده می شوند.
<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>
تراز فهرست توضیحات
با استفاده از کلاس های از پیش تعریف شده (یا ترکیب های معنایی) اصطلاحات و توضیحات را به صورت افقی تراز کنید. برای مدت طولانی تر، می توانید به صورت اختیاری یک .text-truncate
کلاس برای کوتاه کردن متن با بیضی اضافه کنید.
- لیست های توضیحات
- لیست توضیحات برای تعریف اصطلاحات عالی است.
- مدت، اصطلاح
-
تعریف اصطلاح.
و چند متن دیگر برای تعریف مکاننما.
- یک اصطلاح دیگر
- این تعریف کوتاه است، بنابراین هیچ پاراگراف اضافی یا هیچ چیز دیگری وجود ندارد.
- اصطلاح کوتاه شده کوتاه شده است
- این می تواند زمانی مفید باشد که فضا کم باشد. در پایان یک بیضی اضافه می کند.
- لانه سازی
-
- لیست تعریف تو در تو
- من شنیدم که شما لیست های تعریف را دوست دارید. اجازه دهید یک لیست تعریف در لیست تعریف شما قرار دهم.
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>
<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
</dl>
اندازه فونت پاسخگو
در بوت استرپ 5، اندازه فونت های پاسخگو را به طور پیش فرض فعال کرده ایم، که به متن اجازه می دهد تا به طور طبیعی در اندازه دستگاه و درگاه دید مقیاس بندی شود. به صفحه RFS نگاهی بیندازید تا بدانید چگونه این کار می کند.
ساس
متغیرها
سرفصل ها دارای متغیرهای اختصاصی برای اندازه و فاصله هستند.
$headings-margin-bottom: $spacer * .5;
$headings-font-family: null;
$headings-font-style: null;
$headings-font-weight: 500;
$headings-line-height: 1.2;
$headings-color: null;
عناصر تایپوگرافی متفرقه که در اینجا و در Reboot پوشش داده شده اند نیز دارای متغیرهای اختصاصی هستند.
$lead-font-size: $font-size-base * 1.25;
$lead-font-weight: 300;
$small-font-size: .875em;
$sub-sup-font-size: .75em;
$text-muted: $gray-600;
$initialism-font-size: $small-font-size;
$blockquote-margin-y: $spacer;
$blockquote-font-size: $font-size-base * 1.25;
$blockquote-footer-color: $gray-600;
$blockquote-footer-font-size: $small-font-size;
$hr-margin-y: $spacer;
$hr-color: inherit;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
مخلوط ها
هیچ میکس اختصاصی برای تایپوگرافی وجود ندارد، اما Bootstrap از اندازه فونت پاسخگو (RFS) استفاده می کند.