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>

بلاڪ ڪوٽا

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

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
  • پريتيم نسل اليڪيٽ ۾ فيڪليس
  • نولا volutpat aliquam 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
  • ايجٽ 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طبقو شامل ڪري سگھو ٿا متن کي ڇنڊڇاڻ ڪرڻ لاءِ.

وضاحت جي فهرست
وضاحت جي فهرست اصطلاحن جي وضاحت لاءِ ڀرپور آهي.
Euismod

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

Donec id elit non mi porta gravida at eget metus.

مالسودا پورٽ
Etiam porta sem malesuada magna mollis euismod.
ترڪيب ٿيل اصطلاح ترڪيب آهي
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
نستو
Nested تعريف جي فهرست
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-sizes ۽ ميڊيا سوال جيڪي توهان چاهيو ٿا.

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