تایپۆگرافی

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

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

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

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

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

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

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

پیشاندانی 1

پیشاندانی 2

پیشاندانی 3

پیشاندانی 4

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

سەرکردایەتی

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

Vivamus sagittis lacus vel augue laoreet ڕوترۆم فاوسیبوس دۆلۆر ئۆکتۆر. دویس مۆلیس، ئێست نا کۆمۆدۆ لوکتوس.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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پۆلەکان هەروەها بەردەستن بۆ جێبەجێکردنی هەمان ستایلەکان وەک <mark>و لە هەمان <small>کاتدا دوورکەوتنەوە لە هەر کاریگەرییەکی ماناسازی نەخوازراو کە تاگەکان دەیھێنن.

لە کاتێکدا لە سەرەوە نیشان نەدراوە، ئازادانە بەکاری بهێنە <b>و <i>بە HTML5. <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ێک وەک وەرگێڕانەکە بە دەوریدا بپێچە .

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت، کۆنسێکتێتور چەوری نوخبە. ژمارەیەکی تەواو posuere erat a ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

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

زیاد بکە <footer class="blockquote-footer">بۆ ناسینەوەی سەرچاوە. ناوی کارە سەرچاوەکە لە <cite>.

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت، کۆنسێکتێتور چەوری نوخبە. ژمارەیەکی تەواو posuere erat a ante.

کەسێکی بەناوبانگ لە ناونیشانی سەرچاوە

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ڕێکخستن

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

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت، کۆنسێکتێتور چەوری نوخبە. ژمارەیەکی تەواو posuere erat a ante.

کەسێکی بەناوبانگ لە ناونیشانی سەرچاوە

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت، کۆنسێکتێتور چەوری نوخبە. ژمارەیەکی تەواو posuere erat a ante.

کەسێکی بەناوبانگ لە ناونیشانی سەرچاوە

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

لیستەکان

بێ ستایل

list-styleپەراوێزی پێشوەختە و چەپ لەسەر بابەتە لیستەکان لاببە (تەنها منداڵانی دەستبەجێ). ئەمە تەنها بۆ شتەکانی لیستی منداڵانی دەستبەجێ دەگونجێت , واتە پێویستە پۆلەکە زیاد بکەیت بۆ هەر لیستێکی هێلانەکراو بە هەمان شێوە.

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت
Consectetur چەوری elit
ژمارەیەکی تەواو molestie lorem لە massa
ئاسانکاری لە پریتیۆم nisl aliquet
نولا ڤۆڵوتپات ئەلیکوام ڤێلیت
- فاسێلۆس ئیاکولیس نێکێ
- پوروس سۆدالێس ultricies
- Vestibulum laoreet پۆرتیتۆر سێم
- Ac tristique لیبێرۆ ڤۆڵوتپات لە
فاوسیبوس پۆرتا لاکوس فرینجیلا ڤێل
Aenean دانیشتن amet erat nunc
ئیگێت پۆرتیتۆر لۆرێم

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

لە هێڵ

فیشەکەکانی لیستێک دەربهێنە و هەندێک ڕووناکی بەکاربهێنە marginبە تێکەڵکردنی دوو پۆل، .list-inlineو .list-inline-item.

لۆرێم ئیپسوم
فاسێلۆس ئیاکولیس
نولا ڤۆڵوتپات

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

ڕێکخستنی لیستی وەسف

زاراوە و وەسفەکان بە شێوەی ئاسۆیی ڕێکبخە بە بەکارهێنانی پۆلە پێشوەختە پێناسەکراوەکانی سیستەمی تۆڕەکەمان (یان میکسینەکانی مانا). بۆ ماوەیەکی درێژتر دەتوانیت بە ئیختیاری .text-truncateپۆلێک زیاد بکەیت بۆ کورتکردنەوەی دەقەکە بە بیبلی.

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

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

یۆیسمۆد

ڤێستیبولوم id لیگولا پۆرتا فێلیس یۆیسمۆد سێمپێر ئیگێت لاسینیا ئۆدیۆ سێم nec elit.

Donec id elit non mi porta gravida لە ئیگێت مێتۆس.

مالێسوادا پۆرتا

ئیتیام پۆرتا سێم مالێسوادا ماگنا مۆلیس ئیویسمۆد.

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

فوس داپیبوس، تێلۆس ئەی کورسوس کۆمۆدۆ، تۆرتۆر ماوریس کۆندیمەنتۆم نیب، ئوت فێرمەنتۆم ماسا جوستۆ سیت ئەمێت ریسوس.

هێلانەکردن

لیستی پێناسەی هێلانەکراو: Aenean posuere، tortor sed cursus feugiat، نونک ئاوگ بلاندیت نونک.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

تایپۆگرافی وەڵامدەرەوە

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

لێرەدا نموونەیەک لە پراکتیکدا دەخەینەڕوو. هەر font-sizeپرسیارێکی s و میدیا کە ئارەزووی دەکەیت هەڵیبژێرە.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}