نوع ٹائپ

بوٹسٹریپ ٹائپوگرافی کے لیے دستاویزات اور مثالیں، بشمول عالمی ترتیبات، عنوانات، باڈی ٹیکسٹ، فہرستیں، اور بہت کچھ۔

اس صفحہ پر

عالمی ترتیبات

بوٹسٹریپ بنیادی عالمی ڈسپلے، نوع ٹائپ، اور لنک اسٹائل سیٹ کرتا ہے۔ جب مزید کنٹرول کی ضرورت ہو، ٹیکسٹول یوٹیلیٹی کلاسز کو چیک کریں ۔

ایک مقامی فونٹ اسٹیک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>

سرخیوں کو حسب ضرورت بنانا

بوٹسٹریپ 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

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

ماخذ کا نام دینا

ایچ ٹی ایم ایل اسپیک کا تقاضا ہے کہ بلاک کوٹ انتساب کو کے باہر رکھا جائے <blockquote>۔ انتساب فراہم کرتے وقت، اپنے <blockquote>کو a میں لپیٹیں اور کلاس کے ساتھ <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طور پر متن کو بیضوی شکل کے ساتھ تراشنے کے لیے ایک کلاس شامل کر سکتے ہیں۔

تفصیل کی فہرستیں۔

وضاحت کی فہرست اصطلاحات کی وضاحت کے لیے بہترین ہے۔

مدت

اصطلاح کی تعریف۔

اور کچھ اور پلیس ہولڈر ڈیفینیشن ٹیکسٹ۔

ایک اور اصطلاح

یہ تعریف مختصر ہے، اس لیے کوئی اضافی پیراگراف یا کچھ نہیں۔

تراشی ہوئی اصطلاح تراشی ہوئی ہے۔

جب جگہ تنگ ہو تو یہ مفید ہو سکتا ہے۔ آخر میں بیضوی جوڑتا ہے۔

گھونسلہ

نیسٹڈ تعریف کی فہرست: میں نے سنا ہے کہ آپ تعریف کی فہرستیں پسند کرتے ہیں۔ مجھے آپ کی تعریف کی فہرست کے اندر ایک تعریف کی فہرست ڈالنے دو۔

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>

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

بوٹسٹریپ 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) استعمال کرتا ہے ۔