ٽائپوگرافي

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

هن صفحي تي

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

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

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

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

Bootstrap 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ڊسپلي عنوان ساس نقشي ذريعي ترتيب ڏنل آهن ۽ ٻه متغير، $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>. جڏهن انتساب مهيا ڪريو، توهان <blockquote>کي هڪ ۾ لپايو <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 شامل ڪري ٿو.

نستو

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

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;

ملائيندڙ

ٽائپوگرافي لاءِ ڪو به وقف ٿيل ميڪس نه آهي، پر بوٽ اسٽريپ استعمال ڪندو آهي Responsive Font Sizing (RFS) .