متن
سیدھ، ریپنگ، وزن، اور مزید کو کنٹرول کرنے کے لیے عام متن کی افادیت کے لیے دستاویزات اور مثالیں۔
متن کی سیدھ
متن کی صف بندی کی کلاسوں کے ساتھ اجزاء میں متن کو آسانی سے دوبارہ ترتیب دیں۔ آغاز، اختتام اور مرکز کی سیدھ کے لیے، ریسپانسیو کلاسز دستیاب ہیں جو گرڈ سسٹم کی طرح ویو پورٹ کی چوڑائی کے بریک پوائنٹس کا استعمال کرتی ہیں۔
تمام ویو پورٹ سائز پر منسلک متن شروع کریں۔
تمام ویو پورٹ سائزز پر بیچ میں منسلک متن۔
تمام ویو پورٹ سائزز پر اختتامی موافق متن۔
ویو پورٹ کے سائز کے SM (چھوٹے) یا اس سے بڑے پر منسلک متن شروع کریں۔
ویو پورٹ کے سائز کے ایم ڈی (میڈیم) یا اس سے زیادہ وسیع پر منسلک متن شروع کریں۔
ویو پورٹ کے سائز کے LG (بڑے) یا اس سے بڑے پر منسلک متن شروع کریں۔
ویو پورٹ کے سائز کے XL (اضافی بڑے) یا اس سے زیادہ وسیع پر منسلک متن شروع کریں۔
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>
ٹیکسٹ ریپنگ اور اوور فلو
.text-wrap
کلاس کے ساتھ متن لپیٹیں ۔
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
.text-nowrap
متن کو کلاس کے ساتھ لپیٹنے سے روکیں ۔
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
لفظ کا وقفہ
.text-break
سیٹ word-wrap: break-word
اور word-break: break-word
. _ ہم وسیع براؤزر سپورٹ کے لیے word-wrap
زیادہ عام کی بجائے استعمال کرتے ہیں، اور فلیکس کنٹینرز کے مسائل سے بچنے کے لیے فرسودہ کو شامل کرتے ہیں۔overflow-wrap
word-break: break-word
مممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممم
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
ہمارے RTL مرتب کردہ CSS سے ہٹا دیا گیا ہے۔
متن کی تبدیلی
متن کیپٹلائزیشن کلاسز کے ساتھ متن کو اجزاء میں تبدیل کریں۔
چھوٹے ہاتھ کا متن۔
بڑے حرف والا متن۔
CapiTaliZed متن۔
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
نوٹ کریں کہ کس طرح .text-capitalize
ہر لفظ کے پہلے حرف کو تبدیل کیا جاتا ہے، کسی دوسرے حروف کے کیس کو غیر متاثر چھوڑ کر۔
حرف کا سائز
font-size
متن کو جلدی سے تبدیل کریں۔ جبکہ ہماری ہیڈنگ کلاسز (مثلاً، .h1
– .h6
) لاگو ہوتی ہیں font-size
، font-weight
اور line-height
، یہ یوٹیلیٹیز صرف لاگو ہوتی ہیں font-size
۔ ان یوٹیلیٹیز کا سائز HTML کے ہیڈنگ عناصر سے میل کھاتا ہے، اس لیے جیسے جیسے تعداد بڑھتی ہے، ان کا سائز کم ہوتا جاتا ہے۔
.fs-1 متن
.fs-2 متن
.fs-3 متن
.fs-4 متن
.fs-5 متن
.fs-6 متن
<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>
Sass نقشے font-size
میں ترمیم کرکے اپنے دستیاب s کو حسب ضرورت بنائیں ۔$font-sizes
فونٹ کا وزن اور ترچھا
font-weight
ان یوٹیلیٹیز کے ساتھ یا font-style
متن کو جلدی سے تبدیل کریں۔ font-style
افادیت کو مختصراً کہا جاتا ہے .fst-*
اور font-weight
افادیت کو مختصراً کہا جاتا .fw-*
ہے۔
بولڈ ٹیکسٹ۔
زیادہ بولڈ ویٹ ٹیکسٹ (والدین عنصر کے نسبت)۔
عام وزن کا متن۔
ہلکے وزن کا متن۔
ہلکے وزن کا متن (والدین عنصر کے نسبت)۔
ترچھا متن۔
عام فونٹ کے انداز کے ساتھ متن
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>
لکیر کی اونچائی
.lh-*
افادیت کے ساتھ لائن کی اونچائی کو تبدیل کریں ۔
یہ ایک لمبا پیراگراف ہے جو یہ ظاہر کرنے کے لیے لکھا گیا ہے کہ کسی عنصر کی لائن کی اونچائی ہماری افادیت سے کیسے متاثر ہوتی ہے۔ کلاسز کا اطلاق خود عنصر یا بعض اوقات بنیادی عنصر پر ہوتا ہے۔ ان کلاسوں کو ہماری یوٹیلیٹی API کے ساتھ ضرورت کے مطابق اپنی مرضی کے مطابق بنایا جا سکتا ہے۔
یہ ایک لمبا پیراگراف ہے جو یہ ظاہر کرنے کے لیے لکھا گیا ہے کہ کسی عنصر کی لائن کی اونچائی ہماری افادیت سے کیسے متاثر ہوتی ہے۔ کلاسز کا اطلاق خود عنصر یا بعض اوقات بنیادی عنصر پر ہوتا ہے۔ ان کلاسوں کو ہماری یوٹیلیٹی API کے ساتھ ضرورت کے مطابق اپنی مرضی کے مطابق بنایا جا سکتا ہے۔
یہ ایک لمبا پیراگراف ہے جو یہ ظاہر کرنے کے لیے لکھا گیا ہے کہ کسی عنصر کی لائن کی اونچائی ہماری افادیت سے کیسے متاثر ہوتی ہے۔ کلاسز کا اطلاق خود عنصر یا بعض اوقات بنیادی عنصر پر ہوتا ہے۔ ان کلاسوں کو ہماری یوٹیلیٹی API کے ساتھ ضرورت کے مطابق اپنی مرضی کے مطابق بنایا جا سکتا ہے۔
یہ ایک لمبا پیراگراف ہے جو یہ ظاہر کرنے کے لیے لکھا گیا ہے کہ کسی عنصر کی لائن کی اونچائی ہماری افادیت سے کیسے متاثر ہوتی ہے۔ کلاسز کا اطلاق خود عنصر یا بعض اوقات بنیادی عنصر پر ہوتا ہے۔ ان کلاسوں کو ہماری یوٹیلیٹی API کے ساتھ ضرورت کے مطابق اپنی مرضی کے مطابق بنایا جا سکتا ہے۔
<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
مونو اسپیس
ایک انتخاب کو ہمارے مونو اسپیس فونٹ اسٹیک کے ساتھ تبدیل کریں .font-monospace
۔
یہ مونو اسپیس میں ہے۔
<p class="font-monospace">This is in monospace</p>
رنگ ری سیٹ کریں۔
کسی متن یا لنک کا رنگ کے ساتھ .text-reset
دوبارہ ترتیب دیں، تاکہ اسے اپنے والدین سے رنگ وراثت میں ملے۔
ری سیٹ لنک کے ساتھ خاموش متن ۔
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
متن کی سجاوٹ
متن کی سجاوٹ کی کلاسوں کے ساتھ اجزاء میں متن کو سجائیں۔
اس متن کے نیچے ایک لائن ہے۔
اس متن میں ایک لائن ہے جس سے گزر رہی ہے۔
اس لنک سے متن کی سجاوٹ ہٹا دی گئی ہے۔<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
سس
متغیرات
// stylelint-disable value-keyword-case
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base: var(--#{$variable-prefix}font-sans-serif);
$font-family-code: var(--#{$variable-prefix}font-monospace);
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root: null;
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-size-sm: $font-size-base * .875;
$font-size-lg: $font-size-base * 1.25;
$font-weight-lighter: lighter;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;
$font-weight-bolder: bolder;
$font-weight-base: $font-weight-normal;
$line-height-base: 1.5;
$line-height-sm: 1.25;
$line-height-lg: 2;
$h1-font-size: $font-size-base * 2.5;
$h2-font-size: $font-size-base * 2;
$h3-font-size: $font-size-base * 1.75;
$h4-font-size: $font-size-base * 1.5;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base;
نقشے
فونٹ سائز کی افادیتیں اس نقشے سے ہماری یوٹیلیٹیز API کے ساتھ مل کر تیار کی گئی ہیں۔
$font-sizes: (
1: $h1-font-size,
2: $h2-font-size,
3: $h3-font-size,
4: $h4-font-size,
5: $h5-font-size,
6: $h6-font-size
);
یوٹیلیٹیز API
فونٹ اور ٹیکسٹ کی افادیت کا اعلان ہماری یوٹیلیٹیز API میں scss/_utilities.scss
. یوٹیلیٹیز API کو استعمال کرنے کا طریقہ سیکھیں۔
"font-family": (
property: font-family,
class: font,
values: (monospace: var(--#{$variable-prefix}font-monospace))
),
"font-size": (
rfs: true,
property: font-size,
class: fs,
values: $font-sizes
),
"font-style": (
property: font-style,
class: fst,
values: italic normal
),
"font-weight": (
property: font-weight,
class: fw,
values: (
light: $font-weight-light,
lighter: $font-weight-lighter,
normal: $font-weight-normal,
bold: $font-weight-bold,
bolder: $font-weight-bolder
)
),
"line-height": (
property: line-height,
class: lh,
values: (
1: 1,
sm: $line-height-sm,
base: $line-height-base,
lg: $line-height-lg,
)
),
"text-align": (
responsive: true,
property: text-align,
class: text,
values: (
start: left,
end: right,
center: center,
)
),
"text-decoration": (
property: text-decoration,
values: none underline line-through
),
"text-transform": (
property: text-transform,
class: text,
values: lowercase uppercase capitalize
),
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
nowrap: nowrap,
)
),
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),