ٽائپوگرافي

بوٽ اسٽريپ ٽائپوگرافي لاءِ دستاويز ۽ مثال، بشمول عالمي سيٽنگون، هيڊنگس، باڊي ٽيڪسٽ، لسٽون، ۽ وڌيڪ.

گلوبل سيٽنگون

بوٽ اسٽراپ بنيادي عالمي ڊسپلي، ٽائپوگرافي، ۽ لنڪ اسلوب سيٽ ڪري ٿو. جڏهن وڌيڪ ڪنٽرول جي ضرورت آهي، چيڪ ڪريو ٽيڪسٽ يوٽيلٽي ڪلاس .

هڪ اصلي فونٽ اسٽيڪ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>

ترتيب ڏيڻ واري عنوان

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.

هي هڪ ليڊ پيراگراف آهي. اهو باقاعده پيراگراف کان ٻاهر بيٺل آهي.

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

بلاڪ ڪوٽا

توهان جي دستاويز ۾ ڪنهن ٻئي ذريعن کان مواد جي بلاڪ جي حوالن لاء. اقتباس جي طور تي ڪنهن به HTML<blockquote class="blockquote"> جي چوڌاري لفاف ڪريو.

هڪ مشهور اقتباس، هڪ بلاڪ ڪوٽ عنصر ۾ شامل آهي.

<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 شامل ڪري ٿو.

نستو

Nested تعريف جي فهرست: مون ٻڌو ته توهان کي تعريف جي فهرست پسند آهي. اچو ته توهان جي تعريف جي فهرست ۾ هڪ تعريف جي فهرست رکون.

<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ساس متغير کي تبديل ڪندي true۽ بوٽ اسٽراپ کي ٻيهر ترتيب ڏيڻ.

RFS کي سپورٽ ڪرڻ لاءِ ، اسان استعمال ڪندا آهيون ساس ميڪسين کي اسان جي عام font-sizeملڪيتن کي تبديل ڪرڻ لاءِ. جوابي فونٽ جي سائزن کي گڏ ڪيو ويندو ۽ ويوپورٽ يونٽن calc()جي ميلاپ سان گڏ جوابي اسڪيلنگ رويي کي فعال ڪرڻ لاءِ. RFSrem ۽ ان جي تشڪيل بابت وڌيڪ ڳولهي سگھجي ٿو ان جي GitHub مخزن تي .