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

ایچ ٹی ایم ایل

<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. انٹیجر 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. انٹیجر 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. انٹیجر 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. انٹیجر 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
  • ماسا میں انٹیجر مولیسٹی لورم
  • پریٹیم نسل ایلیکیٹ میں فیسلیسس
  • nulla 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
  • پورٹٹیٹر 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
  • nulla volutpat
<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.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
تراشی ہوئی اصطلاح تراشی ہوئی ہے۔
Fusce dapibus, tellus 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>

قبول فونٹ سائز

بوٹسٹریپ v4.3 ریسپانسیو فونٹ سائزز کو فعال کرنے کے آپشن کے ساتھ بھیجتا ہے، جس سے ٹیکسٹ کو آلے اور ویو پورٹ سائز میں قدرتی طور پر زیادہ پیمانے کی اجازت ملتی ہے۔ RFS$enable-responsive-font-sizes کو Sass متغیر کو trueبوٹسٹریپ میں تبدیل کرکے اور دوبارہ مرتب کرکے فعال کیا جاسکتا ہے ۔

RFS کو سپورٹ کرنے کے لیے، ہم اپنی عام font-sizeخصوصیات کو تبدیل کرنے کے لیے ایک Sass mixin استعمال کرتے ہیں۔ ریسپانسیو فونٹ سائزز کو calc()فنکشنز میں ملایا جائے گا remاور ویو پورٹ یونٹس کے ساتھ ریسپانسیو اسکیلنگ برتاؤ کو فعال کیا جائے گا۔ RFS اور اس کی ترتیب کے بارے میں مزید اس کے GitHub ریپوزٹری پر پایا جا سکتا ہے ۔