ټایپوګرافي

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

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

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

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

<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 څخه د کوچني ثانوي سرلیک متن بیا جوړولو لپاره شامل شوي یوټیلټي کلاسونه وکاروئ.

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

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

دا یو مخکښ پراګراف دی. دا د منظم پاراګرافونو څخه ولاړ دی.

<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ټولګي هم د ورته سټایلونو پلي کولو لپاره شتون لري <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 شاوخوا وپلټئ .

یو مشهور اقتباس، د بلاک کوټ عنصر کې شامل دی.

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

د سرچینې نوم ورکول

<footer class="blockquote-footer">د سرچینې پیژندلو لپاره یو اضافه کړئ . د سرچینې کار نوم په کې وتړئ <cite>.

یو مشهور اقتباس، د بلاک کوټ عنصر کې شامل دی.

یو څوک چې د سرچینې په سرلیک کې مشهور دی

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

السلیک

د اړتیا سره سم د متن اسانتیاوې وکاروئ ترڅو ستاسو د بلاک اقتباس سمون بدل کړئ.

یو مشهور اقتباس، د بلاک کوټ عنصر کې شامل دی.

یو څوک چې د سرچینې په سرلیک کې مشهور دی

<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

یو مشهور اقتباس، د بلاک کوټ عنصر کې شامل دی.

یو څوک چې د سرچینې په سرلیک کې مشهور دی

<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

لیستونه

بې سټایل

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

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

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

اصطلاح

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

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

بله اصطلاح

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

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

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

ځړول

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

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

د ځواب ویونکي فونټ اندازه

د v4.3.0 پورې، د ځواب ورکوونکي فونټ سایزونو فعالولو اختیار سره بوټسټریپ کښته کوي، متن ته اجازه ورکوي چې په طبیعي توګه د وسیلې او ویوپورټ اندازې په اوږدو کې اندازه کړي. RFS$enable-responsive-font-sizes د Sass متغیر بدلولو trueاو د بوټسټریپ بیا تنظیمولو سره فعال کیدی شي .

د RFS مالتړ لپاره ، موږ د خپل نورمال font-sizeملکیتونو ځای په ځای کولو لپاره د ساس مکسین کاروو. د ځواب ویونکي فونټ اندازې به د عکس العمل او ویوپورټ واحدونو calc()مخلوط سره په دندو کې تالیف شي remترڅو د ځواب ویونکي اندازه کولو چلند وړ کړي. د RFS او د دې ترتیب په اړه نور د دې GitHub ذخیره کې موندل کیدی شي .