Source

ټایپوګرافي

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

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

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

  • د اصلي فونټ سټیک وکاروئ چې 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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis، est non commodo luctus.

<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 شاوخوا وپلټئ .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer 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>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer 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>

السلیک

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer 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>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer 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د لیست په توکو کې ډیفالټ او کیڼ حاشیه لرې کړئ (یوازې سمدستي ماشومان). دا یوازې د سمدستي ماشومانو لیست توکو باندې پلي کیږي ، پدې معنی چې تاسو به اړتیا ولرئ د هرډول لیست شوي لیستونو لپاره ټولګي هم اضافه کړئ.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • نولا ولتپت علیکم velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<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.

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

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

Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
ټرنکټ شوې اصطلاح ترنکټ شوې ده
Fusce dapibus، telus ac cursus commodo، tortor mauris condimentum nibh، ut fermentum massa justo sit amet risus.
ځړول
د نیست شوي تعریف لیست
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
<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تاسو یې غواړئ د رسنیو او رسنیو پوښتنې غوره کړئ.

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