ټایپوګرافي

د بوټسټریپ ټایپوګرافي لپاره اسناد او مثالونه ، پشمول نړیوال تنظیمات ، سرلیکونه ، د بدن متن ، لیستونه او نور ډیر څه.

په دې پاڼه کې

نړیوال تنظیمات

بوټسټریپ بنسټیز نړیوال نندارتون، ټایپوګرافي، او د لینک سټایلونه ټاکي. کله چې ډیر کنټرول ته اړتیا وي، د متن د کارونې ټولګي وګورئ .

د اصلي فونټ سټیک وکاروئ چې غوره غوره کويfont-family چې د هر OS او وسیلې لپاره
د ډیر جامع او د لاسرسي وړ ډول پیمانه لپاره، موږ د براوزر ډیفالټ روټ کارووfont-size (معمولا 16px) کاروو نو لیدونکي کولی شي د اړتیا سره سم د خپل براوزر ډیفالټ دودیز کړي.
زموږ د ټایپوګرافیک اساس په توګه د $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د ټولګیو له لارې .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>

د سرلیکونو تنظیم کول

د بوټسټریپ 3 څخه د کوچني ثانوي سرلیک متن بیا جوړولو لپاره شامل شوي یوټیلټي کلاسونه وکاروئ.

په زړه پوري نمایش سرلیک د تیاره ثانوي متن سره

html

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

سرلیکونه ښکاره کړئ

د دودیز سرلیک عناصر ډیزاین شوي ترڅو ستاسو د پاڼې منځپانګې په غوښه کې غوره کار وکړي. کله چې تاسو د څرګندیدو لپاره سرلیک ته اړتیا لرئ، د ښودلو سرلیک کارولو ته پام وکړئ - یو لوی، یو څه ډیر د نظر لرونکي سرلیک سټایل.

ښکاره 1

ښودنه 2

ښودل 3

ښودنه 4

ښودنه 5

ښودنه 6

<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-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>په 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ټولګي اضافه کړئ ترڅو متن د ellipsis سره لنډ کړئ.

د توضیحاتو لیست

د توضیحاتو لیست د شرایطو تعریف کولو لپاره مناسب دی.

اصطلاح

د اصطلاح لپاره تعریف.

او ځینې نور ځای لرونکي تعریف متن.

بله اصطلاح

دا تعریف لنډ دی، نو هیڅ اضافي پراګراف یا هیڅ شی نشته.

ټرنکټ شوې اصطلاح پرې شوې ده

دا ګټور کیدی شي کله چې ځای تنگ وي. په پای کې یو ellipsis اضافه کوي.

ځړول

د نیست تعریف لیست: ما اوریدلي چې تاسو د تعریف لیستونه خوښوي. اجازه راکړئ ستاسو د تعریف لیست دننه د تعریف لیست دننه کړم.

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;

متنوع ټایپوګرافي عناصر دلته پوښل شوي او په ریبوټ کې هم وقف شوي متغیرونه لري.

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

مکسین

د ټایپوګرافي لپاره هیڅ وقف شوي مکسین شتون نلري ، مګر بوټسټریپ د ځواب ویونکي فونټ اندازه کولو (RFS) کاروي .