تایپۆگرافی

بەڵگەنامە و نموونە بۆ تایپۆگرافی Bootstrap، لەوانە ڕێکخستنە جیهانییەکان، سەردێڕەکان، دەقی جەستە، لیستەکان و زۆر شتی تر.

لەم پەیجەدا

رێکخستنە گشتیەکان

Bootstrap پیشاندانی بنەڕەتی جیهانی، تایپۆگرافی و شێوازی بەستەرەکان دادەنێت. کاتێک کۆنترۆڵی زیاتر پێویستە، سەیری پۆلەکانی سوودمەندی دەقی بکە .

ستاکی فۆنتێکی ڕەسەن بەکاربهێنە کە باشترین font-familyبۆ هەر سیستەمی کارپێکردن و ئامێرێک هەڵدەبژێرێت.
بۆ پێوەرێکی جۆری گشتگیرتر و دەستڕاگەیشتنتر، ئێمە ڕەگی پێشوەختەی وێبگەڕەکە بەکاردەهێنین font-size(بە شێوەیەکی گشتی 16px) بۆ ئەوەی سەردانکەران بتوانن بەپێی پێویست پێشوەختەی وێبگەڕەکەیان بەپێی پێویست خۆکارانە بکەن.
$font-family-base, $font-size-base, و تایبەتمەندییەکان بەکاربهێنە $line-height-baseوەک بنەمای تایپۆگرافیمان کە بۆ <body>.
ڕەنگی بەستەری جیهانی لە ڕێگەی $link-color.
بەکاری بهێنە $body-bgبۆ دانانی a 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لە ڕێگەی .h6پۆلەکانەوە هەروەها بەردەستە، بۆ کاتێک کە دەتەوێت لەگەڵ شێوازی فۆنتەکانی سەردێڕێکدا بگونجێت بەڵام ناتوانیت توخمە HTML ی پەیوەندیدار بەکاربهێنیت.

h1. سەردێڕی بووتستراپ

h2. سەردێڕی بووتستراپ

h3. سەردێڕی بووتستراپ

h4. سەردێڕی بووتستراپ

h5. سەردێڕی بووتستراپ

h6. سەردێڕی بووتستراپ

html

<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.

سەردێڕی پیشاندانی فەنتازی لەگەڵ دەقی لاوەکی کاڵبووەوە

html

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

سەردێڕەکان پیشان بدە

توخمەکانی سەردێڕی تەقلیدی بە شێوەیەک داڕێژراون کە باشترین کار لە گۆشتی ناوەڕۆکی لاپەڕەکەتدا بکەن. کاتێک پێویستت بە سەردێڕێکە بۆ ئەوەی جیاواز بێت، بیر لە بەکارهێنانی سەردێڕێکی پیشاندانی بکەرەوە — شێوازێکی سەردێڕێکی گەورەتر و کەمێک زیاتر بۆچوون.

پیشاندانی 1

پیشاندانی 2

پیشاندانی 3

پیشاندانی 4

پیشاندانی 5

پیشاندانی ٦

<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نەخشەی ساس و دوو گۆڕاوەوە ڕێکدەخرێن، $display-font-weightو $display-line-height.

سەردێڕەکانی پیشاندانی لە ڕێگەی دوو گۆڕاوەوە دەتوانرێت خۆکارانە دابنرێت، $display-font-familyو $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

سەرکردایەتی

بڕگەیەک بە زیادکردنی .lead.

ئەمە بڕگەیەکی سەرەکییە. لە پەرەگرافە ئاساییەکان جیاوازە.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

توخمەکانی دەقی ناو هێڵ

ستایلکردن بۆ توخمە باوەکانی HTML5ی ناو هێڵ.

دەتوانیت تاگی نیشانە بەکاربهێنیت بۆ...بەرجەستەکردندەق.

~~ئەم دێڕە دەقە مەبەست لێی ئەوەیە کە وەک دەقی سڕاوە مامەڵەی لەگەڵدا بکرێت.~~

~~ئەم دێڕە دەقە مەبەست لێی ئەوەیە کە چیتر ورد نەماوە مامەڵەی لەگەڵدا بکرێت.~~

ئەم دێڕە دەقە بۆ ئەوەیە وەک زیادکردنێک بۆ بەڵگەنامەکە مامەڵەی لەگەڵدا بکرێت.

ئەم دێڕە دەقە بەو شێوەیەی کە هێڵکاری کراوە ڕەندەر دەکات.

ئەم دێڕە دەقە بۆ ئەوەیە کە وەک چاپی ورد مامەڵەی لەگەڵدا بکرێت.

ئەم دێڕە وەک دەقی قەڵەمی ڕەندەر کراوە.

ئەم دێڕە وەک دەقی ئیتاڵیک ڕەندەر کراوە.

html

<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>

ئاگاداربە ئەو تاگانە بۆ مەبەستی ماناسازی بەکاربهێنرێن:

نوێنەرایەتی دەقێک دەکات کە بۆ مەبەستی ئاماژەکردن یان نووسین نیشانە کراوە یان تیشک خراوەتە سەر.
نوێنەرایەتی سەرنجی لاوەکی و چاپی بچووک دەکات، وەک مافی چاپکردن و دەقی یاسایی.
<s>نوێنەرایەتی ئەو توخمانە دەکات کە پەیوەندییان نەماوە یان وردیان نەماوە.
نوێنەرایەتی درێژایی دەقی ناو هێڵ دەکات کە پێویستە بە شێوەیەک ڕەندەر بکرێت کە ئاماژە بەوە بکات کە تێبینییەکی نادەقی هەیە.

ئەگەر دەتەوێت دەقەکەت ستایل بکەیت، پێویستە لەبری ئەوە ئەم پۆلانەی خوارەوە بەکاربهێنیت:

.markهەمان ستایلەکانی .
.smallهەمان ستایلەکانی .
.text-decoration-underlineهەمان ستایلەکانی .
.text-decoration-line-throughهەمان ستایلەکانی <s>.

لە کاتێکدا لە سەرەوە نیشان نەدراوە، ئازادانە بەکاری بهێنە و بە HTML5. مەبەست لێی تیشک خستنە سەر وشە یان دەستەواژەیە بەبێ ئەوەی گرنگییەکی زیاتر بگەیەنێت، لە کاتێکدا زیاتر بۆ دەنگ و زاراوە تەکنیکیەکان و هتد.

سوودمەندییەکانی دەق

گۆڕینی ڕێکخستنی دەق، گۆڕین، شێواز، کێش، بەرزی هێڵ، ڕازاندنەوە و ڕەنگ بە سوودمەندییەکانی دەق و سوودمەندییەکانی ڕەنگەکانمان .

کورتکراوەکان

جێبەجێکردنی ستایلدارانەی <abbr>توخمەکەی HTML بۆ کورتکراوە و کورتکراوەکان بۆ پیشاندانی وەشانی فراوانکراو لەسەر هۆڤەر. کورتکراوەکان هێڵی ژێرەوەی پێشوەختەیان هەیە و ئاماژەیەکی یارمەتی بەدەست دەهێنن بۆ دابینکردنی کۆنتێکستی زیادە لەسەر هۆڤەر و بۆ بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان.

زیاد بکە .initialismبۆ کورتکراوەیەک بۆ قەبارەی فۆنتێکی کەمێک بچووکتر.

attr

HTML

html

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

بلۆککۆتەکان

بۆ هێنانەوەی بلۆکەکانی ناوەڕۆک لە سەرچاوەیەکی ترەوە لەناو بەڵگەنامەکەتدا. <blockquote class="blockquote">هەر HTMLێک وەک وەرگێڕانەکە بە دەوریدا بپێچە .

وەرگێڕانێکی ناسراو، کە لە توخمێکی بلۆککۆتدا هەیە.

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

ناونانی سەرچاوەیەک

تایبەتمەندی HTML پێویستی بەوەیە کە ئیسباتکردنی blockquote لە دەرەوەی <blockquote>. <blockquote>لە کاتی دابینکردنی ئیسباتکردن، خۆت لە a بپێچە <figure>و <figcaption>توخمێکی ئاستی بلۆک یان (بۆ نموونە، ) لەگەڵ .blockquote-footerپۆلەکە بەکاربهێنە. دڵنیابە ناوی کاری سەرچاوەی تێدا بپێچە بە <cite>هەمان شێوە.

وەرگێڕانێکی ناسراو، کە لە توخمێکی بلۆککۆتدا هەیە.

html

<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>

ڕێکخستن

بەپێی پێویست سوودمەندییەکانی دەق بەکاربهێنە بۆ گۆڕینی ڕێکخستنی بلۆککۆتەکەت.

وەرگێڕانێکی ناسراو، کە لە توخمێکی بلۆککۆتدا هەیە.

html

<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>

وەرگێڕانێکی ناسراو، کە لە توخمێکی بلۆککۆتدا هەیە.

html

<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پەراوێزی پێشوەختە و چەپ لەسەر بابەتە لیستەکان لاببە (تەنها منداڵانی دەستبەجێ). ئەمە تەنها بۆ شتەکانی لیستی منداڵانی دەستبەجێ دەگونجێت , واتە پێویستە پۆلەکە زیاد بکەیت بۆ هەر لیستێکی هێلانەکراو بە هەمان شێوە.

ئەمە لیستێکە.
بە تەواوی بێ ستایل دەردەکەوێت.
لە ڕووی پێکهاتەییەوە، هێشتا لیستێکە.
بەڵام ئەم شێوازە تەنها بۆ توخمە منداڵە دەستبەجێکان دەگرێتەوە.
لیستە هێلانەکراوەکان:
- کاریگەری ئەم ستایلەیان لەسەر نییە
- هێشتا فیشەکێک پیشان دەدات
- و پەراوێزی چەپی گونجاویان هەبێت
ڕەنگە ئەمە لە هەندێک بارودۆخدا هێشتا بەسوود بێت.

html

<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.

ئەمە بڕگەیەکی لیستە.
وە یەکێکی تریش.
بەڵام لەناو هێڵدا پیشان دەدرێن.

html

<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پۆلێک زیاد بکەیت بۆ کورتکردنەوەی دەقەکە بە بیبلی.

لیستەکانی وەسف

لیستی وەسفەکان تەواو گونجاوە بۆ پێناسەکردنی زاراوەکان.

چەمک

پێناسە بۆ ئەو زاراوەیە.

وە هەندێک دەقی پێناسەی شوێنگرەوەی تر.

زاراوەیەکی تر

ئەم پێناسەیە کورتە، بۆیە هیچ پەرەگرافێکی زیادە و هیچ شتێک نییە.

زاراوەی کورتکراوە کورتکراوەتەوە

ئەمەش دەتوانێت سوودی هەبێت کاتێک شوێنەکە کەم بێت. لە کۆتاییدا بیبلیسێک زیاد دەکات.

هێلانەکردن

لیستی پێناسەی هێلانەکراو: بیستوومە حەزت لە لیستە پێناسەکانە. با لیستی پێناسەیەک لە ناو لیستی پێناسەکانتدا دابنێم.

html

<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>

قەبارەی فۆنتەکانی وەڵامدەرەوە

لە Bootstrap 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;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

میکسینەکان

هیچ میکسینێکی تایبەت بۆ تایپۆگرافی نییە، بەڵام Bootstrap Responsive Font Sizing (RFS) بەکاردەهێنێت .