بہتر، تیز، مضبوط ویب ڈویلپمنٹ کے لیے ہمارے نقطہ نظر سمیت، بوٹسٹریپ کے بنیادی ڈھانچے کے اہم ٹکڑوں کو کم کریں۔

HTML5 دستاویز کی قسم

بوٹسٹریپ کچھ HTML عناصر اور CSS خصوصیات کا استعمال کرتا ہے جو HTML5 doctype کے استعمال کی ضرورت ہوتی ہے۔ اسے اپنے تمام منصوبوں کے آغاز میں شامل کریں۔

<!DOCTYPE html>
<html lang="en">
  ...
</html>

پہلے موبائل

بوٹسٹریپ 2 کے ساتھ، ہم نے فریم ورک کے اہم پہلوؤں کے لیے اختیاری موبائل دوستانہ طرزیں شامل کیں۔ Bootstrap 3 کے ساتھ، ہم نے شروع سے ہی موبائل دوستانہ ہونے کے لیے پروجیکٹ کو دوبارہ لکھا ہے۔ اختیاری موبائل سٹائلز کو شامل کرنے کے بجائے، وہ بنیادی طور پر بیک کر رہے ہیں۔ درحقیقت، بوٹسٹریپ سب سے پہلے موبائل ہے ۔ موبائل فرسٹ اسٹائلز الگ فائلوں کی بجائے پوری لائبریری میں مل سکتے ہیں۔

مناسب رینڈرنگ اور ٹچ زومنگ کو یقینی بنانے کے لیے ویو پورٹ میٹا ٹیگ کو اپنے میں شامل کریں <head>۔

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=noآپ ویو پورٹ میٹا ٹیگ میں شامل کر کے موبائل آلات پر زومنگ کی صلاحیتوں کو غیر فعال کر سکتے ہیں ۔ یہ زومنگ کو غیر فعال کر دیتا ہے، یعنی صارفین صرف اسکرول کرنے کے قابل ہوتے ہیں، اور اس کے نتیجے میں آپ کی سائٹ کچھ زیادہ ہی مقامی ایپلیکیشن کی طرح محسوس ہوتی ہے۔ مجموعی طور پر، ہم ہر سائٹ پر اس کی سفارش نہیں کرتے ہیں، لہذا احتیاط برتیں!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

نوع ٹائپ اور لنکس

بوٹسٹریپ بنیادی عالمی ڈسپلے، نوع ٹائپ، اور لنک اسٹائل سیٹ کرتا ہے۔ خاص طور پر، ہم:

پر سیٹ کریں background-color: #fff;۔body
ہمارے ٹائپوگرافک بیس کے طور پر @font-family-base، @font-size-base، اور صفات کا استعمال کریں۔@line-height-base
عالمی لنک کا رنگ بذریعہ سیٹ کریں @link-colorاور صرف پر لنک انڈر لائنز لگائیں۔:hover

یہ شیلیوں کے اندر پایا جا سکتا ہے scaffolding.less.

Normalize.css

بہتر کراس براؤزر رینڈرنگ کے لیے، ہم Normalize.css استعمال کرتے ہیں، جو Nicolas Gallagher اور Jonathan Neal کا ایک پروجیکٹ ہے ۔

کنٹینرز

بوٹسٹریپ کو سائٹ کے مواد کو سمیٹنے اور ہمارے گرڈ سسٹم کو رکھنے کے لیے ایک پر مشتمل عنصر کی ضرورت ہوتی ہے۔ آپ اپنے منصوبوں میں استعمال کرنے کے لیے دو کنٹینرز میں سے ایک کا انتخاب کر سکتے ہیں۔ نوٹ کریں کہ، paddingاور مزید کی وجہ سے، کوئی بھی کنٹینر قابل نہیں ہے۔

.containerایک ذمہ دار مقررہ چوڑائی والے کنٹینر کے لیے استعمال کریں ۔

<div class="container">
  ...
</div>

.container-fluidاپنے ویو پورٹ کی پوری چوڑائی پر پھیلے ہوئے ایک مکمل چوڑائی والے کنٹینر کے لیے استعمال کریں ۔

<div class="container-fluid">
  ...
</div>

بوٹسٹریپ میں ایک ریسپانسیو، موبائل فرسٹ فلوئڈ گرڈ سسٹم شامل ہوتا ہے جو ڈیوائس یا ویو پورٹ کے سائز میں اضافے کے ساتھ 12 کالموں تک مناسب طور پر اسکیل کرتا ہے۔ اس میں آسان لے آؤٹ کے اختیارات کے لیے پہلے سے طے شدہ کلاسز کے ساتھ ساتھ مزید سیمنٹک لے آؤٹ بنانے کے لیے طاقتور مکسنز شامل ہیں۔

تعارف

گرڈ سسٹم کو قطاروں اور کالموں کی ایک سیریز کے ذریعے صفحہ کی ترتیب بنانے کے لیے استعمال کیا جاتا ہے جس میں آپ کا مواد موجود ہوتا ہے۔ یہاں یہ ہے کہ بوٹسٹریپ گرڈ سسٹم کیسے کام کرتا ہے:

مناسب سیدھ اور پیڈنگ کے لیے قطاروں کو .container(مقررہ چوڑائی) یا (پوری چوڑائی) کے اندر رکھنا چاہیے ۔.container-fluid
کالموں کے افقی گروپ بنانے کے لیے قطاریں استعمال کریں۔
مواد کو کالموں کے اندر رکھا جانا چاہیے، اور صرف کالم ہی قطاروں کے فوری بچے ہو سکتے ہیں۔
پہلے سے طے شدہ گرڈ کلاسز جیسے .rowاور .col-xs-4تیزی سے گرڈ لے آؤٹ بنانے کے لیے دستیاب ہیں۔ زیادہ سیمنٹک لے آؤٹ کے لیے کم مکسنس بھی استعمال کیے جا سکتے ہیں۔
کالم کے ذریعے گٹر (کالم کے مواد کے درمیان خلاء) بناتے ہیں padding۔ اس پیڈنگ کو s پر منفی مارجن کے ذریعے پہلے اور آخری کالم کے لیے قطاروں میں آفسیٹ کیا جاتا ہے .row۔
منفی حاشیہ یہی وجہ ہے کہ ذیل کی مثالیں ختم ہو گئی ہیں۔ یہ اس لیے ہے کہ گرڈ کالم کے اندر موجود مواد غیر گرڈ مواد کے ساتھ قطار میں کھڑا ہے۔
گرڈ کالم ان بارہ دستیاب کالموں کی تعداد بتا کر بنائے جاتے ہیں جن کو آپ پھیلانا چاہتے ہیں۔ مثال کے طور پر، تین مساوی کالم استعمال کریں گے three .col-xs-4۔
اگر ایک قطار میں 12 سے زیادہ کالم رکھے جائیں تو، اضافی کالموں کا ہر گروپ، ایک یونٹ کے طور پر، ایک نئی لائن پر لپیٹے گا۔
گرڈ کلاسز ان ڈیوائسز پر لاگو ہوتی ہیں جن کی اسکرین کی چوڑائی بریک پوائنٹ کے سائز سے زیادہ یا اس کے برابر ہوتی ہے، اور چھوٹے ڈیوائسز پر ہدف بنائے گئے گرڈ کلاسز کو اوور رائیڈ کرتے ہیں۔ لہذا، مثال کے طور پر کسی بھی کلاس کو کسی عنصر پر لاگو .col-md-*کرنا نہ صرف درمیانے آلات پر بلکہ بڑے آلات پر بھی اس کے اسٹائل کو متاثر کرے گا اگر کوئی .col-lg-*کلاس موجود نہیں ہے۔

ان اصولوں کو اپنے کوڈ پر لاگو کرنے کے لیے مثالیں دیکھیں۔

میڈیا کے سوالات

ہم اپنے گرڈ سسٹم میں کلیدی بریک پوائنٹس بنانے کے لیے اپنی کم فائلوں میں درج ذیل میڈیا سوالات کا استعمال کرتے ہیں۔

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

ہم کبھی کبھار میڈیا کے ان استفسارات کو وسعت دیتے ہیں max-widthتاکہ سی ایس ایس کو آلات کے ایک تنگ سیٹ تک محدود کیا جا سکے۔

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

گرڈ کے اختیارات

دیکھیں کہ بوٹسٹریپ گرڈ سسٹم کے پہلو کس طرح ایک آسان ٹیبل کے ساتھ متعدد آلات پر کام کرتے ہیں۔

	اضافی چھوٹے آلات فونز (<768px)	چھوٹے آلات کی گولیاں (≥768px)	میڈیم ڈیوائسز ڈیسک ٹاپس (≥992px)	بڑے آلات کے ڈیسک ٹاپس (≥1200px)
گرڈ سلوک	ہر وقت افقی	شروع کرنے کے لیے سکڑ گیا، بریک پوائنٹس کے اوپر افقی
کنٹینر کی چوڑائی	کوئی نہیں (خودکار)	750px	970px	1170px
کلاس کا سابقہ	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
کالموں کا #	12
کالم کی چوڑائی	آٹو	~62px	~81px	~97px
گٹر کی چوڑائی	30px (کالم کے ہر طرف 15px)
نیسٹیبل	جی ہاں
آفسیٹس	جی ہاں
کالم ترتیب دینا	جی ہاں

مثال: اسٹیکڈ سے افقی

گرڈ کلاسز کے ایک سیٹ کا استعمال کرتے ہوئے .col-md-*، آپ ایک بنیادی گرڈ سسٹم بنا سکتے ہیں جو ڈیسک ٹاپ (میڈیم) ڈیوائسز پر افقی ہونے سے پہلے موبائل ڈیوائسز اور ٹیبلیٹ ڈیوائسز (اضافی چھوٹے سے چھوٹے رینج) پر اسٹیک کیا جاتا ہے۔ کسی بھی میں گرڈ کالم رکھیں .row۔

col-md-1

col-md-8

col-md-4

col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

مثال: سیال کنٹینر

.containerکسی بھی فکسڈ چوڑائی والے گرڈ لے آؤٹ کو اپنے بیرونی حصے کو میں تبدیل کرکے پوری چوڑائی لے آؤٹ میں تبدیل کریں .container-fluid۔

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

مثال: موبائل اور ڈیسک ٹاپ

کیا آپ نہیں چاہتے کہ آپ کے کالم صرف چھوٹے آلات میں اسٹیک ہوں؟ .col-xs-* .col-md-*اپنے کالموں میں شامل کرکے اضافی چھوٹی اور درمیانی ڈیوائس گرڈ کلاسز کا استعمال کریں۔ یہ سب کیسے کام کرتا ہے اس کے بہتر خیال کے لیے نیچے دی گئی مثال دیکھیں۔

col-xs-12 .col-md-8

col-xs-6 .col-md-4

col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

مثال: موبائل، ٹیبلیٹ، ڈیسک ٹاپ

ٹیبلیٹ .col-sm-*کلاسز کے ساتھ اور بھی زیادہ متحرک اور طاقتور لے آؤٹ بنا کر پچھلی مثال پر بنائیں۔

col-xs-12 .col-sm-6 .col-md-8

col-xs-6 .col-md-4

col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

مثال: کالم لپیٹنا

اگر ایک قطار میں 12 سے زیادہ کالم رکھے جائیں تو، اضافی کالموں کا ہر گروپ، ایک یونٹ کے طور پر، ایک نئی لائن پر لپیٹے گا۔

col-xs-9

.col-xs-4
چونکہ 9 + 4 = 13 > 12، یہ 4 کالم وسیع div ایک متصل یونٹ کے طور پر ایک نئی لائن پر لپیٹ جاتا ہے۔

.col-xs-6
بعد کے کالم نئی لائن کے ساتھ جاری رہتے ہیں۔

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

ریسپانسیو کالم ری سیٹ

دستیاب گرڈز کے چار درجات کے ساتھ آپ کو مسائل کا سامنا کرنا پڑے گا جہاں، مخصوص بریک پوائنٹس پر، آپ کے کالم بالکل ٹھیک نہیں ہوتے کیونکہ ایک دوسرے سے لمبا ہوتا ہے۔ اسے ٹھیک کرنے کے لیے، a .clearfixاور ہماری ریسپانسیو یوٹیلیٹی کلاسز کا مجموعہ استعمال کریں ۔

col-xs-6 .col-sm-3
اپنے ویو پورٹ کا سائز تبدیل کریں یا مثال کے طور پر اسے اپنے فون پر چیک کریں۔

col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

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

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

کالموں کو آف سیٹ کرنا

.col-md-offset-*کلاسز کا استعمال کرتے ہوئے کالموں کو دائیں طرف منتقل کریں ۔ یہ کلاسیں کالم کے بائیں مارجن کو *کالموں کے حساب سے بڑھاتی ہیں۔ مثال کے طور پر، چار کالموں پر .col-md-offset-4منتقل ہوتا ہے ۔.col-md-4

col-md-4

col-md-4 .col-md-offset-4

col-md-3 .col-md-offset-3

col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

.col-*-offset-0آپ کلاسز کے ساتھ نچلے گرڈ ٹائر سے آفسیٹس کو بھی اوور رائیڈ کر سکتے ہیں ۔

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

نیسٹنگ کالم

اپنے مواد کو ڈیفالٹ گرڈ کے ساتھ نیسٹ کرنے کے لیے، موجودہ کالم کے اندر ایک نیا .rowاور کالموں کا سیٹ شامل کریں ۔ نیسٹڈ قطاروں میں کالموں کا ایک سیٹ شامل ہونا چاہئے جس میں 12 یا اس سے کم کا اضافہ ہوتا ہے (یہ ضروری نہیں ہے کہ آپ تمام 12 دستیاب کالم استعمال کریں)۔.col-sm-*.col-sm-*

سطح 1: .col-sm-9

لیول 2: .col-xs-8 .col-sm-6

لیول 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

کالم ترتیب دینا

آسانی سے ہمارے بلٹ ان گرڈ کالموں کی ترتیب .col-md-push-*اور .col-md-pull-*ترمیم کرنے والے کلاسز کے ساتھ تبدیل کریں۔

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pul-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

کم مکس اور متغیر

تیز ترتیب کے لیے پہلے سے تیار کردہ گرڈ کلاسز کے علاوہ ، بوٹسٹریپ میں آپ کے اپنے سادہ، سیمنٹک لے آؤٹ کو تیزی سے پیدا کرنے کے لیے کم متغیرات اور مکسز شامل ہیں۔

متغیرات

متغیر کالموں کی تعداد، گٹر کی چوڑائی، اور میڈیا کے استفسار کے نقطہ کا تعین کرتے ہیں جس پر تیرتے ہوئے کالم شروع کیے جائیں۔ ہم ان کا استعمال اوپر بیان کردہ پہلے سے طے شدہ گرڈ کلاسز کے ساتھ ساتھ ذیل میں درج حسب ضرورت مکسنس کے لیے بھی کرتے ہیں۔

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

مکسنس

مکسینز کو گرڈ متغیر کے ساتھ مل کر استعمال کیا جاتا ہے تاکہ انفرادی گرڈ کالموں کے لیے سیمنٹک سی ایس ایس تیار کیا جا سکے۔

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

استعمال کی مثال

آپ متغیرات کو اپنی مرضی کے مطابق اقدار میں تبدیل کر سکتے ہیں، یا صرف ان کی ڈیفالٹ اقدار کے ساتھ مکسنس استعمال کر سکتے ہیں۔ یہاں ایک دو کالم لے آؤٹ بنانے کے لیے پہلے سے طے شدہ ترتیبات کو استعمال کرنے کی ایک مثال ہے جس کے درمیان وقفہ ہے۔

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

عنوانات

تمام HTML عنوانات، <h1>بذریعہ <h6>، دستیاب ہیں۔ .h1کلاسز کے ذریعے .h6بھی دستیاب ہیں، جب آپ کسی سرخی کے فونٹ اسٹائل سے مماثل ہونا چاہتے ہیں لیکن پھر بھی آپ کا متن ان لائن ڈسپلے کرنا چاہتے ہیں۔

h1. بوٹسٹریپ کی سرخی	سیمی بولڈ 36px
h2. بوٹسٹریپ کی سرخی	سیمی بولڈ 30px
h3. بوٹسٹریپ کی سرخی	سیمی بولڈ 24px
h4. بوٹسٹریپ کی سرخی	سیمی بولڈ 18px
h5. بوٹسٹریپ کی سرخی	سیمی بولڈ 14px
h6. بوٹسٹریپ کی سرخی	سیمی بولڈ 12px

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

<small>عام ٹیگ یا .smallکلاس کے ساتھ کسی بھی سرخی میں ہلکا، ثانوی متن بنائیں ۔

h1. بوٹسٹریپ کی سرخی ثانوی متن

h2. بوٹسٹریپ کی سرخی ثانوی متن

h3. بوٹسٹریپ کی سرخی ثانوی متن

h4. بوٹسٹریپ کی سرخی ثانوی متن

h5. بوٹسٹریپ کی سرخی ثانوی متن

h6. بوٹسٹریپ کی سرخی ثانوی متن

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

باڈی کاپی

بوٹسٹریپ کا عالمی ڈیفالٹ 14pxfont-size ہے ، 1.428 کے ساتھ ۔ اس کا اطلاق اور تمام پیراگراف پر ہوتا ہے۔ اس کے علاوہ، (پیراگراف) کو ان کی کمپیوٹیڈ لائن کی اونچائی (10px بذریعہ ڈیفالٹ) کا نچلا مارجن ملتا ہے۔line-height<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id Nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, Nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

لیڈ باڈی کاپی

شامل کر کے ایک پیراگراف کو نمایاں بنائیں .lead۔

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

کم کے ساتھ بنایا گیا۔

ٹائپوگرافک پیمانہ variables.less میں دو کم متغیرات پر مبنی ہے : @font-size-baseاور @line-height-base. پہلا بنیادی فونٹ سائز ہے جو بھر میں استعمال ہوتا ہے اور دوسرا بیس لائن کی اونچائی ہے۔ ہم ان متغیرات اور کچھ آسان ریاضی کا استعمال کرتے ہوئے اپنی تمام قسم کے مارجن، پیڈنگز، اور لائن ہائٹس کو تخلیق کرتے ہیں۔ انہیں اپنی مرضی کے مطابق بنائیں اور بوٹسٹریپ موافقت کریں۔

ان لائن ٹیکسٹ عناصر

نشان زد متن

کسی دوسرے سیاق و سباق میں متن کی مطابقت کی وجہ سے اسے نمایاں کرنے کے لیے، <mark>ٹیگ کا استعمال کریں۔

آپ مارک ٹیگ کو استعمال کر سکتے ہیں۔نمایاں کریںمتن

You can use the mark tag to <mark>highlight</mark> text.

حذف شدہ متن

حذف شدہ متن کے بلاکس کی نشاندہی کرنے کے لیے <del>ٹیگ کا استعمال کریں۔

~~متن کی اس لائن کا مطلب حذف شدہ متن کے طور پر سمجھا جانا ہے۔~~

<del>This line of text is meant to be treated as deleted text.</del>

سٹرائیک تھرو ٹیکسٹ

متن کے ایسے بلاکس کی نشاندہی کرنے کے لیے جو اب متعلقہ نہیں ہیں <s>ٹیگ کا استعمال کریں۔

~~متن کی اس سطر کو اب درست نہیں سمجھا جانا ہے۔~~

<s>This line of text is meant to be treated as no longer accurate.</s>

داخل کردہ متن

دستاویز میں اضافے کی نشاندہی کرنے کے لیے <ins>ٹیگ کا استعمال کریں۔

متن کی اس سطر کو دستاویز میں اضافے کے طور پر سمجھا جانا ہے۔

<ins>This line of text is meant to be treated as an addition to the document.</ins>

خط کشیدہ متن

متن کو انڈر لائن کرنے کے لیے <u>ٹیگ کا استعمال کریں۔

متن کی یہ لائن انڈر لائن کی طرح رینڈر ہوگی۔

<u>This line of text will render as underlined</u>

ہلکے وزن والے اسٹائل کے ساتھ HTML کے پہلے سے طے شدہ زور والے ٹیگز کا استعمال کریں۔

چھوٹا متن

متن کے ان لائن یا بلاکس پر زور نہ دینے <small>کے لیے، والدین کے سائز کے 85% پر ٹیکسٹ سیٹ کرنے کے لیے ٹیگ کا استعمال کریں۔ سرخی والے عناصر font-sizeنیسٹڈ <small>عناصر کے لیے خود حاصل کرتے ہیں۔

آپ متبادل طور .smallپر کسی کی جگہ ان لائن عنصر استعمال کر سکتے ہیں <small>۔

متن کی اس سطر کو ٹھیک پرنٹ کے طور پر سمجھا جانا ہے۔

<small>This line of text is meant to be treated as fine print.</small>

بولڈ

بھاری فونٹ ویٹ کے ساتھ متن کے ٹکڑوں پر زور دینے کے لیے۔

متن کا مندرجہ ذیل ٹکڑا بولڈ ٹیکسٹ کے طور پر پیش کیا گیا ہے ۔

<strong>rendered as bold text</strong>

ترچھا

ترچھے کے ساتھ متن کے ٹکڑوں پر زور دینے کے لیے۔

متن کا مندرجہ ذیل ٹکڑا ترچھا متن کے طور پر پیش کیا گیا ہے ۔

<em>rendered as italicized text</em>

متبادل عناصر

بلا جھجھک <b>اور <i>HTML5 میں استعمال کریں۔ <b>اضافی اہمیت کے بغیر الفاظ یا جملے کو نمایاں کرنا ہے جبکہ <i>زیادہ تر آواز، تکنیکی اصطلاحات وغیرہ کے لیے ہے۔

صف بندی کی کلاسز

متن کی صف بندی کی کلاسوں کے ساتھ اجزاء میں متن کو آسانی سے دوبارہ ترتیب دیں۔

بائیں جانب موافق متن۔

بیچ میں منسلک متن۔

دائیں موافق متن۔

جائز متن۔

کوئی ریپ ٹیکسٹ نہیں۔

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

تبدیلی کی کلاسز

متن کیپٹلائزیشن کلاسز کے ساتھ متن کو اجزاء میں تبدیل کریں۔

چھوٹے ہاتھ کا متن۔

بڑے ہاتھ کا متن۔

بڑے بڑے متن۔

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

مخففات

<abbr>ہوور پر توسیع شدہ ورژن کو دکھانے کے لیے مخففات اور مخففات کے لیے HTML کے عنصر کا اسٹائلائزڈ نفاذ ۔ انتساب کے ساتھ مخففات میں titleہلکے نقطے والے نیچے کی سرحد اور ہوور پر ایک مدد کرسر ہوتا ہے، ہوور پر اضافی سیاق و سباق فراہم کرتا ہے اور معاون ٹیکنالوجیز کے صارفین کو۔

بنیادی مخفف

لفظ وصف کا مخفف attr ہے۔

<abbr title="attribute">attr</abbr>

ابتداء پسندی

.initialismقدرے چھوٹے فونٹ سائز کے لیے مخفف میں شامل کریں ۔

کٹی ہوئی روٹی کے بعد ایچ ٹی ایم ایل بہترین چیز ہے۔

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

پتے

قریبی آباؤ اجداد یا کام کے پورے جسم کے لیے رابطے کی معلومات پیش کریں۔ تمام لائنوں کو کے ساتھ ختم کرکے فارمیٹنگ کو محفوظ رکھیں <br>۔

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

پورا نام
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

بلاک کوٹس

آپ کی دستاویز کے اندر کسی دوسرے ماخذ سے مواد کے بلاکس کا حوالہ دینے کے لیے۔

پہلے سے طے شدہ بلاک کوٹ

<blockquote>کسی بھی HTML کو اقتباس کے طور پر لپیٹ دیں ۔ براہ راست اقتباسات کے لیے، ہم تجویز کرتے ہیں a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. انٹیجر posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

بلاک کوٹ کے اختیارات

ایک معیار پر سادہ تغیرات کے لیے انداز اور مواد کی تبدیلیاں <blockquote>۔

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

<footer>ماخذ کی شناخت کے لیے ایک شامل کریں ۔ ماخذ کے کام کا نام اس میں لپیٹیں <cite>۔

Lorem ipsum dolor sit amet, consectetur adipiscing elit. انٹیجر posuere erat a ante.

ماخذ کے عنوان میں مشہور کوئی

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

متبادل ڈسپلے

.blockquote-reverseدائیں منسلک مواد کے ساتھ بلاک کوٹ کے لیے شامل کریں ۔

Lorem ipsum dolor sit amet, consectetur adipiscing elit. انٹیجر posuere erat a ante.

ماخذ کے عنوان میں مشہور کوئی

<blockquote class="blockquote-reverse">
  ...
</blockquote>

فہرستیں

بے ترتیب

آئٹمز کی ایک فہرست جس میں ترتیب واضح طور پر اہمیت نہیں رکھتی۔

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
Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

حکم دیا

آئٹمز کی فہرست جس میں ترتیب واضح طور پر اہمیت رکھتی ہے۔

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ماسا میں انٹیجر مولیسٹی لورم
پریٹیم نسل ایلیکیٹ میں فیسلیسس
nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

بے انداز

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
Eget porttitor lorem

<ul class="list-unstyled">
  <li>...</li>
</ul>

لائن میں

فہرست کے تمام آئٹمز کو ایک لائن پر رکھیں display: inline-block;اور کچھ ہلکی پیڈنگ کے ساتھ۔

Lorem ipsum
Phasellus iaculis
nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

تفصیل

ان کی متعلقہ وضاحتوں کے ساتھ شرائط کی فہرست۔

تفصیل کی فہرستیں۔: وضاحت کی فہرست اصطلاحات کی وضاحت کے لیے بہترین ہے۔
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.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

افقی تفصیل

شرائط اور وضاحتیں ساتھ ساتھ <dl>لائن میں بنائیں۔ ڈیفالٹ s کی طرح اسٹیک آف شروع ہوتا ہے <dl>، لیکن جب navbar پھیلتا ہے، تو یہ کریں۔

تفصیل کی فہرستیں۔: وضاحت کی فہرست اصطلاحات کی وضاحت کے لیے بہترین ہے۔
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.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, Tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

خودکار تراشنا

افقی تفصیل کی فہرستیں ایسی اصطلاحات کو تراشیں گی جو بائیں کالم میں کے ساتھ فٹ ہونے کے لیے بہت لمبی ہیں text-overflow۔ تنگ ویو پورٹ میں، وہ ڈیفالٹ اسٹیکڈ لے آؤٹ میں تبدیل ہو جائیں گے۔

لائن میں

کوڈ کے ان لائن ٹکڑوں کو کے ساتھ لپیٹیں <code>۔

مثال کے طور پر، <section>ان لائن کے طور پر لپیٹ ہونا چاہئے.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

صارف کا ان پٹ

<kbd>ان پٹ کی نشاندہی کرنے کے لیے استعمال کریں جو عام طور پر کی بورڈ کے ذریعے داخل کیا جاتا ہے۔

cdڈائریکٹریز کو تبدیل کرنے کے لیے، ڈائرکٹری کے نام کے بعد ٹائپ کریں۔
سیٹنگز میں ترمیم کرنے کے لیے، دبائیں۔ ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

بنیادی بلاک

<pre>کوڈ کی متعدد لائنوں کے لیے استعمال کریں ۔ مناسب رینڈرنگ کے لیے کوڈ میں کسی بھی زاویہ بریکٹ سے بچنا یقینی بنائیں۔

<p> نمونہ متن یہاں...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

آپ اختیاری طور پر شامل کر سکتے ہیں۔.pre-scrollable کلاس شامل کر سکتے ہیں، جو 350px کی زیادہ سے زیادہ اونچائی سیٹ کرے گا اور ایک y-axis اسکرول بار فراہم کرے گا۔

متغیرات

متغیرات کی نشاندہی کرنے کے لیے <var>ٹیگ کا استعمال کریں۔

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

نمونہ آؤٹ پٹ

کسی پروگرام سے بلاکس نمونہ آؤٹ پٹ کی نشاندہی کرنے کے لیے <samp>ٹیگ کا استعمال کریں۔

اس متن کو کمپیوٹر پروگرام سے نمونہ آؤٹ پٹ کے طور پر سمجھا جانا ہے۔

<samp>This text is meant to be treated as sample output from a computer program.</samp>

بنیادی مثال

.tableبنیادی اسٹائل کے لیے — ہلکی پیڈنگ اور صرف افقی ڈیوائیڈرز — کسی بھی میں بیس کلاس شامل کریں <table>۔ یہ بہت بے کار معلوم ہو سکتا ہے، لیکن دوسرے پلگ ان جیسے کیلنڈرز اور ڈیٹ چننے والوں کے لیے جدولوں کے وسیع پیمانے پر استعمال کو دیکھتے ہوئے، ہم نے اپنی مرضی کے مطابق ٹیبل کے انداز کو الگ کرنے کا انتخاب کیا ہے۔

اختیاری ٹیبل کیپشن۔
#	پہلا نام	آخری نام	صارف نام
1	نشان	اوٹو	@mdo
2	جیکب	تھورنٹن	چربی
3	لیری	پرندہ	ٹویٹر

<table class="table">
  ...
</table>

دھاری دار قطاریں۔

.table-stripedکے اندر کسی بھی ٹیبل قطار میں زیبرا سٹرپنگ شامل کرنے کے لیے استعمال کریں <tbody>۔

کراس براؤزر مطابقت

دھاری دار میزیں :nth-childسی ایس ایس سلیکٹر کے ذریعے اسٹائل کی جاتی ہیں، جو کہ انٹرنیٹ ایکسپلورر 8 میں دستیاب نہیں ہے۔

#	پہلا نام	آخری نام	صارف نام
1	نشان	اوٹو	@mdo
2	جیکب	تھورنٹن	چربی
3	لیری	پرندہ	ٹویٹر

<table class="table table-striped">
  ...
</table>

بارڈر والی میز

.table-borderedٹیبل اور سیل کے تمام اطراف میں بارڈرز کے لیے شامل کریں ۔

#	پہلا نام	آخری نام	صارف نام
1	نشان	اوٹو	@mdo
2	جیکب	تھورنٹن	چربی
3	لیری	پرندہ	ٹویٹر

<table class="table table-bordered">
  ...
</table>

ہوور قطاریں

.table-hoverایک کے اندر ٹیبل کی قطاروں پر ہوور حالت کو فعال کرنے کے لیے شامل کریں <tbody>۔

#	پہلا نام	آخری نام	صارف نام
1	نشان	اوٹو	@mdo
2	جیکب	تھورنٹن	چربی
3	لیری	پرندہ	ٹویٹر

<table class="table table-hover">
  ...
</table>

گاڑھا میز

.table-condensedسیل پیڈنگ کو نصف میں کاٹ کر ٹیبلز کو مزید کمپیکٹ بنانے کے لیے شامل کریں ۔

#	پہلا نام	آخری نام	صارف نام
1	نشان	اوٹو	@mdo
2	جیکب	تھورنٹن	چربی
3	لیری دی برڈ		ٹویٹر

<table class="table table-condensed">
  ...
</table>

سیاق و سباق کی کلاسز

ٹیبل کی قطاروں یا انفرادی سیلز کو رنگنے کے لیے سیاق و سباق کی کلاسز کا استعمال کریں۔

کلاس	تفصیل
`.active`	ہوور رنگ کو کسی خاص قطار یا سیل پر لاگو کرتا ہے۔
`.success`	ایک کامیاب یا مثبت عمل کی نشاندہی کرتا ہے۔
`.info`	غیر جانبدار معلوماتی تبدیلی یا عمل کی نشاندہی کرتا ہے۔
`.warning`	ایک انتباہ کی نشاندہی کرتا ہے جس پر توجہ دینے کی ضرورت ہو سکتی ہے۔
`.danger`	خطرناک یا ممکنہ طور پر منفی عمل کی نشاندہی کرتا ہے۔

#	کالم کی سرخی	کالم کی سرخی	کالم کی سرخی
1	کالم کا مواد	کالم کا مواد	کالم کا مواد
2	کالم کا مواد	کالم کا مواد	کالم کا مواد
3	کالم کا مواد	کالم کا مواد	کالم کا مواد
4	کالم کا مواد	کالم کا مواد	کالم کا مواد
5	کالم کا مواد	کالم کا مواد	کالم کا مواد
6	کالم کا مواد	کالم کا مواد	کالم کا مواد
7	کالم کا مواد	کالم کا مواد	کالم کا مواد
8	کالم کا مواد	کالم کا مواد	کالم کا مواد
9	کالم کا مواد	کالم کا مواد	کالم کا مواد

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

معاون ٹکنالوجی کے معنی پہنچانا

ٹیبل کی قطار یا انفرادی سیل میں معنی شامل کرنے کے لیے رنگ کا استعمال صرف ایک بصری اشارہ فراہم کرتا ہے، جو معاون ٹیکنالوجیز کے صارفین کو نہیں پہنچایا جائے گا - جیسے اسکرین ریڈرز۔ اس بات کو یقینی بنائیں کہ رنگ سے ظاہر کی گئی معلومات یا تو خود مواد سے واضح ہے (متعلقہ ٹیبل قطار/سیل میں دکھائی دینے والا متن)، یا متبادل ذرائع سے شامل کیا گیا ہے، جیسے کہ .sr-onlyکلاس کے ساتھ چھپا ہوا اضافی متن۔

ذمہ دار میزیں

چھوٹے آلات (768px سے کم) پر افقی طور پر اسکرول کرنے کے لیے کسی .tableکو بھی لپیٹ کر ریسپانسیو ٹیبلز بنائیں ۔ .table-responsive768px چوڑائی سے بڑی کسی بھی چیز پر دیکھتے وقت، آپ کو ان ٹیبلز میں کوئی فرق نظر نہیں آئے گا۔

عمودی تراشنا/ تراشنا

ریسپانسیو ٹیبلز کا استعمال کرتے ہیں overflow-y: hidden، جو ٹیبل کے نیچے یا اوپری کناروں سے باہر جانے والے کسی بھی مواد کو کلپ کر دیتی ہے۔ خاص طور پر، یہ ڈراپ ڈاؤن مینو اور دوسرے فریق ثالث ویجٹ کو کلپ کر سکتا ہے۔

فائر فاکس اور فیلڈ سیٹس

فائر فاکس میں کچھ عجیب فیلڈ سیٹ اسٹائل ہے جس میں شامل widthہے جو ریسپانسیو ٹیبل میں مداخلت کرتا ہے۔ اسے فائر فاکس کے مخصوص ہیک کے بغیر اوور رائڈ نہیں کیا جا سکتا جو ہم بوٹسٹریپ میں فراہم نہیں کرتے ہیں۔

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

مزید معلومات کے لیے، یہ Stack Overflow جواب پڑھیں ۔

#	ٹیبل کی سرخی	ٹیبل کی سرخی	ٹیبل کی سرخی	ٹیبل کی سرخی	ٹیبل کی سرخی	ٹیبل کی سرخی
1	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل
2	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل
3	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل

#	ٹیبل کی سرخی	ٹیبل کی سرخی	ٹیبل کی سرخی	ٹیبل کی سرخی	ٹیبل کی سرخی	ٹیبل کی سرخی
1	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل
2	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل
3	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

بنیادی مثال

انفرادی فارم کنٹرولز خود بخود کچھ عالمی اسٹائل حاصل کرتے ہیں۔ تمام متنی <input>, <textarea>اور <select>اس کے ساتھ عناصر بطور ڈیفالٹ .form-controlپر سیٹ ہیں ۔ زیادہ سے زیادہ وقفہ کاری کے لیے width: 100%;لیبلز اور کنٹرولز کو لپیٹیں ۔.form-group

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

فارم گروپس کو ان پٹ گروپس کے ساتھ نہ ملائیں۔

فارم گروپس کو براہ راست ان پٹ گروپس کے ساتھ نہ ملائیں ۔ اس کے بجائے، فارم گروپ کے اندر ان پٹ گروپ کو گھوںسلا کریں۔

ان لائن فارم

بائیں سے منسلک اور ان لائن بلاک کنٹرولز کے لیے اپنے فارم میں شامل کریں .form-inline(جس کا ہونا ضروری نہیں ہے )۔ یہ صرف ویو پورٹس کے اندر موجود فارمز پر لاگو ہوتا ہے جو کم از کم 768px چوڑے ہوں۔<form>

حسب ضرورت چوڑائی کی ضرورت ہو سکتی ہے۔

بوٹسٹریپ میں ان پٹ اور سلیکٹس بطور width: 100%;ڈیفالٹ لاگو ہوتے ہیں۔ ان لائن فارمز کے اندر، ہم اسے دوبارہ ترتیب دیتے ہیں width: auto;تاکہ متعدد کنٹرول ایک ہی لائن پر رہ سکیں۔ آپ کے لے آؤٹ پر منحصر ہے، اضافی حسب ضرورت چوڑائی کی ضرورت ہو سکتی ہے۔

ہمیشہ لیبلز شامل کریں۔

اگر آپ ہر ان پٹ کے لیے لیبل شامل نہیں کرتے ہیں تو اسکرین ریڈرز کو آپ کے فارمز میں پریشانی ہوگی۔ ان ان لائن فارمز کے لیے، آپ .sr-onlyکلاس کا استعمال کرتے ہوئے لیبلز کو چھپا سکتے ہیں۔ معاون ٹیکنالوجیز کے لیے لیبل فراہم کرنے کے مزید متبادل طریقے ہیں، جیسے کہ aria-label، aria-labelledbyیا titleوصف۔ اگر ان میں سے کوئی بھی موجود نہیں ہے تو، اسکرین ریڈرز placeholderاگر موجود ہو تو اس وصف کو استعمال کرنے کا سہارا لے سکتے ہیں، لیکن یاد رکھیں کہ placeholderلیبلنگ کے دیگر طریقوں کے متبادل کے طور پر استعمال کی سفارش نہیں کی جاتی ہے۔

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

افقی شکل

فارم میں شامل کر کے لیبلز اور فارم کنٹرولز کے گروپس کو افقی ترتیب میں سیدھ میں لانے کے لیے بوٹسٹریپ کی پہلے سے طے شدہ گرڈ کلاسز کا استعمال کریں .form-horizontal(جس کا ہونا ضروری نہیں ہے <form>)۔ ایسا کرنے .form-groupسے s کو گرڈ قطاروں کی طرح برتاؤ کرنے میں تبدیلی آتی ہے، لہذا اس کی ضرورت نہیں ہے .row۔

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

تائید شدہ کنٹرولز

معیاری فارم کنٹرولز کی مثالیں مثال کے فارم لے آؤٹ میں معاون ہیں۔

ان پٹ

سب سے عام فارم کنٹرول، ٹیکسٹ پر مبنی ان پٹ فیلڈز۔ تمام HTML5 اقسام کے لیے تعاون پر مشتمل ہے: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

قسم کا اعلان درکار ہے۔

ان پٹ کو مکمل طور پر اسٹائل کیا جائے گا اگر ان typeکا صحیح طریقے سے اعلان کیا جائے۔

<input type="text" class="form-control" placeholder="Text input">

ان پٹ گروپس

متن پر مبنی کسی بھی متن سے پہلے اور/یا بعد میں مربوط متن یا بٹن شامل کرنے کے لیے <input>، ان پٹ گروپ کا جزو چیک کریں ۔

ٹیکسٹیریا

فارم کنٹرول جو متن کی متعدد لائنوں کو سپورٹ کرتا ہے۔ rowsضرورت کے مطابق خصوصیت کو تبدیل کریں ۔

<textarea class="form-control" rows="3"></textarea>

چیک باکس اور ریڈیو

چیک باکسز ایک فہرست میں سے ایک یا کئی اختیارات کو منتخب کرنے کے لیے ہیں، جبکہ ریڈیو بہت سے اختیارات میں سے ایک اختیار کو منتخب کرنے کے لیے ہیں۔

غیر فعال چیک باکسز اور ریڈیوز کی حمایت کی جاتی ہے، لیکن والدین کے ہوور پر "غیر اجازت یافتہ" کرسر فراہم کرنے کے لیے ، آپ کو کلاس کو والدین میں <label>شامل کرنے کی ضرورت ہوگی ، , یا ۔.disabled.radio.radio-inline.checkbox.checkbox-inline

ڈیفالٹ (اسٹیکڈ)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

ان لائن چیک باکسز اور ریڈیوز

ایک ہی لائن پر ظاہر ہونے والے کنٹرولز کے لیے چیک باکسز یا ریڈیوز کی ایک سیریز پر .checkbox-inlineیا کلاسز کا استعمال کریں ۔.radio-inline

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

لیبل ٹیکسٹ کے بغیر چیک باکسز اور ریڈیوز

اگر آپ کے اندر کوئی متن نہیں ہے تو <label>، ان پٹ کو اسی طرح رکھا جاتا ہے جیسا کہ آپ کی توقع تھی۔ فی الحال صرف غیر ان لائن چیک باکسز اور ریڈیوز پر کام کرتا ہے۔ aria-labelمعاون ٹیکنالوجیز (مثال کے طور پر، استعمال کرتے ہوئے ) کے لیے ابھی بھی لیبل کی کچھ شکل فراہم کرنا یاد رکھیں ۔

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

منتخب کرتا ہے۔

border-radiusنوٹ کریں کہ بہت سے مقامی منتخب مینیو — یعنی سفاری اور کروم میں — کے گول کونے ہوتے ہیں جن میں خصوصیات کے ذریعے ترمیم نہیں کی جا سکتی ۔

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

انتساب کے <select>ساتھ کنٹرولز کے لیے multiple، متعدد اختیارات بطور ڈیفالٹ دکھائے جاتے ہیں۔

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

جامد کنٹرول

جب آپ کو فارم کے اندر فارم کے لیبل کے آگے سادہ متن رکھنے کی ضرورت ہو، تو .form-control-staticکلاس کو a پر استعمال کریں <p>۔

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

فوکس اسٹیٹ

outlineہم کچھ فارم کنٹرولز پر ڈیفالٹ اسٹائلز کو ہٹاتے ہیں اور box-shadowاس کی جگہ پر ایک لاگو کرتے ہیں :focus۔

ڈیمو `:focus`ریاست

مندرجہ بالا مثال کا ان پٹ ہماری دستاویزات میں اپنی مرضی کے انداز کا استعمال کرتا ہے تاکہ :focusایک .form-control.

معذور ریاست

disabledصارف کے تعاملات کو روکنے کے لیے ان پٹ پر بولین وصف شامل کریں ۔ غیر فعال ان پٹ ہلکے دکھائی دیتے ہیں اور ایک not-allowedکرسر شامل کرتے ہیں۔

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

غیر فعال فیلڈ سیٹس

ایک ساتھ تمام کنٹرولز کو غیر فعال disabledکرنے کے لیے a میں وصف شامل کریں ۔<fieldset><fieldset>

کی لنک کی فعالیت کے بارے میں انتباہ`<a>`

پہلے سے طے شدہ طور پر، براؤزرز ایک کے اندر موجود تمام مقامی فارم کنٹرولز ( <input>، <select>اور <button>عناصر) <fieldset disabled>کو غیر فعال سمجھیں گے، ان پر کی بورڈ اور ماؤس کے تعامل کو روکیں گے۔ تاہم، اگر آپ کے فارم میں <a ... class="btn btn-*">عناصر بھی شامل ہیں، تو ان کو صرف ایک انداز دیا جائے گا pointer-events: none۔ جیسا کہ بٹنوں کے لیے غیر فعال حالت کے بارے میں سیکشن میں بتایا گیا ہے (اور خاص طور پر اینکر عناصر کے لیے ذیلی حصے میں)، یہ CSS پراپرٹی ابھی تک معیاری نہیں ہے اور Opera 18 اور اس سے نیچے، یا Internet Explorer 11 میں مکمل طور پر تعاون یافتہ نہیں ہے، اور جیت گئی ہے۔ کی بورڈ کے صارفین کو ان لنکس کو فوکس کرنے یا فعال کرنے سے نہیں روکتا۔ اس لیے محفوظ رہنے کے لیے، ایسے لنکس کو غیر فعال کرنے کے لیے حسب ضرورت جاوا اسکرپٹ کا استعمال کریں۔

کراس براؤزر مطابقت

جبکہ بوٹسٹریپ ان اسٹائلز کو تمام براؤزرز میں لاگو کرے گا، انٹرنیٹ ایکسپلورر 11 اور اس سے نیچے والے disabledانتساب کو مکمل طور پر سپورٹ نہیں کرتے <fieldset>۔ ان براؤزرز میں فیلڈ سیٹ کو غیر فعال کرنے کے لیے حسب ضرورت جاوا اسکرپٹ استعمال کریں۔

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

صرف پڑھنے کی حالت

readonlyان پٹ کی قدر میں ترمیم کو روکنے کے لیے ان پٹ پر بولین وصف شامل کریں ۔ صرف پڑھنے کے ان پٹ ہلکے دکھائی دیتے ہیں (بالکل غیر فعال ان پٹس کی طرح)، لیکن معیاری کرسر کو برقرار رکھتے ہیں۔

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

مدد کا متن

فارم کنٹرولز کے لیے بلاک سطح کی مدد کا متن۔

مدد کے متن کو فارم کنٹرولز کے ساتھ منسلک کرنا

مدد کا متن واضح طور پر اس فارم کنٹرول کے ساتھ منسلک ہونا چاہیے جس کا تعلق aria-describedbyانتساب کے استعمال سے ہے۔ یہ اس بات کو یقینی بنائے گا کہ معاون ٹیکنالوجیز - جیسے اسکرین ریڈرز - اس مدد کے متن کا اعلان کریں گے جب صارف توجہ مرکوز کرے گا یا کنٹرول میں داخل ہوگا۔

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

توثیق ریاستیں۔

بوٹسٹریپ میں غلطی، وارننگ، اور فارم کنٹرولز پر کامیابی کی حالتوں کے لیے توثیق کے انداز شامل ہیں۔ استعمال کرنے کے لیے، شامل کریں .has-warning، .has-errorیا .has-successپیرنٹ عنصر میں۔ کوئی بھی .control-label, .form-controlاور .help-blockاس عنصر کے اندر توثیق کی طرزیں موصول ہوں گی۔

معاون ٹیکنالوجیز اور کلر بلائنڈ صارفین تک توثیق کی حالت پہنچانا

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

یقینی بنائیں کہ ریاست کا متبادل اشارہ بھی فراہم کیا گیا ہے۔ مثال کے طور پر، آپ فارم کنٹرول کے <label>متن میں ہی ریاست کے بارے میں اشارہ شامل کر سکتے ہیں (جیسا کہ درج ذیل کوڈ کی مثال میں ہے)، ایک Glyphicon.sr-only شامل کریں ( کلاس کا استعمال کرتے ہوئے مناسب متبادل متن کے ساتھ - Glyphicon کی مثالیں دیکھیں )، یا فراہم کر کے اضافی مدد ٹیکسٹ بلاک. خاص طور پر معاون ٹیکنالوجیز کے لیے، غلط فارم کنٹرولز کو بھی ایک aria-invalid="true"انتساب تفویض کیا جا سکتا ہے۔

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

اختیاری شبیہیں کے ساتھ

آپ اختیاری فیڈ بیک آئیکنز بھی شامل کر سکتے ہیں .has-feedbackاور دائیں آئیکن کے ساتھ۔

تاثرات کے آئیکن صرف متنی <input class="form-control">عناصر کے ساتھ کام کرتے ہیں۔

شبیہیں، لیبلز، اور ان پٹ گروپس

فیڈ بیک آئیکنز کی دستی پوزیشننگ بغیر لیبل کے ان پٹ کے لیے اور دائیں جانب ایڈ آن والے ان پٹ گروپس کے لیے ضروری ہے۔ آپ کو قابل رسائی وجوہات کی بنا پر تمام ان پٹس کے لیبل فراہم کرنے کی بھرپور حوصلہ افزائی کی جاتی ہے۔ اگر آپ لیبلز کو ظاہر ہونے سے روکنا چاہتے ہیں تو انہیں .sr-onlyکلاس کے ساتھ چھپائیں۔ اگر آپ کو لیبل کے بغیر کرنا topہے تو تاثرات کے آئیکن کی قدر کو ایڈجسٹ کریں۔ ان پٹ گروپس کے لیے، rightاپنے ایڈون کی چوڑائی کے لحاظ سے ویلیو کو مناسب پکسل ویلیو میں ایڈجسٹ کریں۔

آئیکن کے معنی کو معاون ٹیکنالوجیز تک پہنچانا

اس بات کو یقینی بنانے کے لیے کہ معاون ٹیکنالوجیز - جیسے اسکرین ریڈرز - ایک آئیکن کے معنی کو صحیح طریقے سے بیان کریں، اضافی چھپے ہوئے متن کو .sr-onlyکلاس کے ساتھ شامل کیا جانا چاہیے اور واضح طور پر اس فارم کنٹرول کے ساتھ منسلک ہونا چاہیے جو اس کے استعمال سے متعلق ہے aria-describedby۔ متبادل کے طور پر، اس بات کو یقینی بنائیں کہ معنی (مثال کے طور پر، حقیقت یہ ہے کہ کسی مخصوص ٹیکسٹ انٹری فیلڈ کے لیے ایک انتباہ ہے) کسی اور شکل میں پہنچایا گیا ہے، جیسے <label>کہ فارم کنٹرول سے وابستہ اصل کے متن کو تبدیل کرنا۔

اگرچہ مندرجہ ذیل مثالیں پہلے ہی <label>متن میں اپنے متعلقہ فارم کنٹرولز کی توثیق کی حالت کا ذکر کرتی ہیں، اوپر کی تکنیک ( .sr-onlyمتن کا استعمال کرتے ہوئے اور aria-describedby) کو مثالی مقاصد کے لیے شامل کیا گیا ہے۔

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

افقی اور ان لائن شکلوں میں اختیاری شبیہیں

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

چھپی ہوئی کے ساتھ اختیاری شبیہیں`.sr-only`پوشیدہ لیبل

اگر آپ .sr-onlyفارم کنٹرول کو چھپانے کے لیے کلاس کا استعمال کرتے ہیں <label>(لیبلنگ کے دیگر اختیارات، جیسے کہ وصف کو استعمال کرنے کے بجائے aria-label)، بوٹسٹریپ آئیکن کے شامل ہونے کے بعد اس کی پوزیشن کو خود بخود ایڈجسٹ کر دے گا۔

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

کنٹرول سائزنگ

جیسے کلاسز کا استعمال کرتے ہوئے اونچائیاں سیٹ کریں .input-lg، اور گرڈ کالم کلاسز جیسے استعمال کرتے ہوئے چوڑائی سیٹ کریں۔.col-lg-* ۔

اونچائی کا سائز

لمبے یا چھوٹے فارم کنٹرولز بنائیں جو بٹن کے سائز سے مماثل ہوں۔

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

افقی فارم گروپ کے سائز

جلدی سے سائز کے لیبلز اور فارم کنٹرولز کو .form-horizontalشامل کرکے .form-group-lgیا .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

کالم کا سائز

مطلوبہ چوڑائی کو آسانی سے نافذ کرنے کے لیے گرڈ کالم، یا کسی بھی حسب ضرورت پیرنٹ عنصر میں ان پٹس کو لپیٹیں۔

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

بٹن ٹیگز

بٹن کلاسز کو کسی <a>, <button>یا <input>عنصر پر استعمال کریں۔

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

سیاق و سباق سے متعلق مخصوص استعمال

جب کہ بٹن کلاسز کو <a>اور عناصر پر استعمال کیا جا سکتا ہے، ہمارے nav اور navbar اجزاء کے اندر <button>صرف عناصر کی حمایت کی جاتی ہے۔<button>

بٹن کے طور پر کام کرنے والے لنکس

اگر <a>عناصر کو بٹن کے طور پر کام کرنے کے لیے استعمال کیا جاتا ہے - موجودہ صفحہ کے اندر موجود کسی دوسرے دستاویز یا سیکشن پر جانے کے بجائے، صفحہ کے اندر کی فعالیت کو متحرک کرنا - انہیں بھی ایک مناسب دیا جانا چاہیے role="button"۔

کراس براؤزر رینڈرنگ

ایک بہترین عمل کے طور پر، ہم <button>جب بھی ممکن ہو عنصر کو استعمال کرنے کا مشورہ دیتے ہیں تاکہ مماثل کراس براؤزر رینڈرنگ کو یقینی بنایا جا سکے۔

دوسری چیزوں کے علاوہ، Firefox <30 میں ایک بگ ہےline-height جو ہمیں -based بٹنوں کو سیٹ کرنے سے روکتا ہے <input>، جس کی وجہ سے وہ Firefox کے دوسرے بٹنوں کی اونچائی سے بالکل مماثل نہیں ہیں۔

اختیارات

فوری طور پر اسٹائل والا بٹن بنانے کے لیے دستیاب بٹن کلاسوں میں سے کسی کا استعمال کریں۔

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

معاون ٹکنالوجی کے معنی پہنچانا

بٹن میں معنی شامل کرنے کے لیے رنگ کا استعمال صرف ایک بصری اشارہ فراہم کرتا ہے، جو کہ معاون ٹیکنالوجیز - جیسے کہ اسکرین ریڈرز کے صارفین تک نہیں پہنچایا جائے گا۔ اس بات کو یقینی بنائیں کہ رنگ سے ظاہر کی گئی معلومات یا تو خود مواد (بٹن کا مرئی متن) سے واضح ہے، یا متبادل ذرائع سے شامل کی گئی ہے، جیسے کہ .sr-onlyکلاس کے ساتھ چھپا ہوا اضافی متن۔

سائز

فینسی بڑے یا چھوٹے بٹن؟ شامل کریں .btn-lg، .btn-smیا .btn-xsاضافی سائز کے لیے۔

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

بلاک لیول کے بٹن بنائیں — جو کہ والدین کی پوری چوڑائی پر محیط ہوں— شامل کر .btn-blockکے۔

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

فعال حالت

فعال ہونے پر بٹن دبائے ہوئے دکھائی دیں گے (گہرے پس منظر، گہرے بارڈر اور انسیٹ شیڈو کے ساتھ)۔ عناصر کے <button>لیے، یہ بذریعہ کیا جاتا ہے :active۔ عناصر کے <a>لیے، یہ .active. تاہم، اگر آپ کو فعال حالت کو پروگرام کے لحاظ سے نقل کرنے کی ضرورت ہو تو آپ s (اور وصف شامل کریں ) .activeپر استعمال کر سکتے ہیں۔<button>aria-pressed="true"

بٹن عنصر

شامل کرنے کی ضرورت نہیں :activeکیونکہ یہ ایک چھدم کلاس ہے، لیکن اگر آپ کو ایک ہی ظاہری شکل پر مجبور کرنے کی ضرورت ہے تو آگے بڑھیں اور شامل کریں .active۔

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

اینکر عنصر

.activeکلاس کو <a>بٹنوں میں شامل کریں ۔

بنیادی لنک لنک

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

معذور ریاست

بٹنوں کو کے ساتھ واپس دھندلا کر کے ان کو ناقابل کلک بنائیں opacity۔

بٹن عنصر

بٹنوں میں disabledوصف شامل کریں ۔<button>

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

کراس براؤزر مطابقت

اگر آپ disabledانتساب کو a میں شامل کرتے ہیں تو <button>Internet Explorer 9 اور نیچے متن کو ایک گندے ٹیکسٹ شیڈو کے ساتھ خاکستری رنگ دے گا جسے ہم ٹھیک نہیں کر سکتے۔

اینکر عنصر

.disabledکلاس کو <a>بٹنوں میں شامل کریں ۔

بنیادی لنک لنک

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

ہم .disabledیہاں یوٹیلیٹی کلاس کے طور پر استعمال کرتے ہیں، عام .activeکلاس کی طرح، لہذا کسی سابقہ کی ضرورت نہیں ہے۔

لنک کی فعالیت کا انتباہ

یہ کلاس s pointer-events: noneکے لنک فنکشنلٹی کو غیر فعال کرنے کی کوشش کرنے کے لیے استعمال کرتی ہے، لیکن یہ سی ایس ایس پراپرٹی ابھی تک معیاری نہیں ہے اور اوپرا 18 اور اس سے نیچے، یا <a>انٹرنیٹ ایکسپلورر 11 میں مکمل طور پر تعاون یافتہ نہیں ہے۔ pointer-events: noneنیویگیشن بدستور متاثر نہیں ہوا، اس کا مطلب یہ ہے کہ نظر آنے والے کی بورڈ استعمال کرنے والے اور معاون ٹیکنالوجی کے صارفین اب بھی ان لنکس کو ایکٹیویٹ کر سکیں گے۔ اس لیے محفوظ رہنے کے لیے، ایسے لنکس کو غیر فعال کرنے کے لیے حسب ضرورت جاوا اسکرپٹ کا استعمال کریں۔

قبول تصاویر

.img-responsiveبوٹسٹریپ 3 میں امیجز کو کلاس کے اضافے کے ذریعے ریسپانسیو فرینڈلی بنایا جا سکتا ہے ۔ یہ اور تصویر پر لاگو ہوتا ہے max-width: 100%;تاکہ یہ بنیادی عنصر پر اچھی طرح سے ترازو کرے۔height: auto;display: block;

.img-responsiveکلاس کا استعمال کرنے والی تصاویر کو سینٹر کرنے کے لیے ، .center-blockکے بجائے استعمال کریں .text-center۔ استعمال کے بارے میں مزید تفصیلات کے لیے مددگار کلاسز کا سیکشن دیکھیں.center-block ۔

SVG تصاویر اور IE 8-10

انٹرنیٹ ایکسپلورر 8-10 میں، ایس وی جی امیجز کے ساتھ .img-responsiveغیر متناسب سائز ہیں۔ اسے ٹھیک کرنے کے لیے، width: 100% \9;جہاں ضروری ہو شامل کریں۔ بوٹسٹریپ خود بخود اس کا اطلاق نہیں کرتا ہے کیونکہ یہ تصویر کے دوسرے فارمیٹس میں پیچیدگیاں پیدا کرتا ہے۔

<img src="..." class="img-responsive" alt="Responsive image">

تصویری شکلیں

<img>کسی بھی پروجیکٹ میں تصاویر کو آسانی سے اسٹائل کرنے کے لیے کسی عنصر میں کلاسز شامل کریں ۔

کراس براؤزر مطابقت

ذہن میں رکھیں کہ Internet Explorer 8 میں گول کونوں کے لیے سپورٹ کا فقدان ہے۔

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

سیاق و سباق کے رنگ

مٹھی بھر زور افادیت کی کلاسوں کے ساتھ رنگ کے ذریعے معنی بیان کریں۔ یہ لنکس پر بھی لاگو ہوسکتے ہیں اور ہمارے پہلے سے طے شدہ لنک اسٹائل کی طرح ہوور پر سیاہ ہوجائیں گے۔

Fusce dapibus، tellus ac cursus commodo، tortor mauris nibh.

Nullam id dolor id Nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

مخصوصیت سے نمٹنا

بعض اوقات کسی دوسرے سلیکٹر کی مخصوصیت کی وجہ سے زور دینے والی کلاسز کا اطلاق نہیں کیا جا سکتا۔ <span>زیادہ تر معاملات میں، ایک کافی حل یہ ہے کہ آپ اپنے متن کو کلاس کے ساتھ لپیٹ دیں ۔

معاون ٹکنالوجی کے معنی پہنچانا

معنی کو شامل کرنے کے لیے رنگ کا استعمال صرف ایک بصری اشارہ فراہم کرتا ہے، جو کہ معاون ٹیکنالوجیز - جیسے کہ اسکرین ریڈرز کے صارفین تک نہیں پہنچایا جائے گا۔ اس بات کو یقینی بنائیں کہ رنگ سے ظاہر کی گئی معلومات یا تو خود مواد سے واضح ہے (متعلق رنگ صرف اس معنی کو تقویت دینے کے لیے استعمال کیے جاتے ہیں جو ٹیکسٹ/مارک اپ میں پہلے سے موجود ہے)، یا متبادل ذرائع سے شامل کیا گیا ہے، جیسے کہ .sr-onlyکلاس کے ساتھ چھپا ہوا اضافی متن .

سیاق و سباق کے پس منظر

سیاق و سباق کے متن کے رنگ کی کلاسوں کی طرح، آسانی سے کسی عنصر کے پس منظر کو کسی بھی متعلقہ کلاس میں سیٹ کریں۔ متن کی کلاسوں کی طرح اینکر کے اجزاء ہوور پر سیاہ ہو جائیں گے۔

Nullam id dolor id Nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

مخصوصیت سے نمٹنا

بعض اوقات سیاق و سباق کے پس منظر کی کلاسیں دوسرے سلیکٹر کی مخصوصیت کی وجہ سے لاگو نہیں کی جا سکتیں۔ کچھ معاملات میں، ایک کافی حل یہ ہے کہ آپ اپنے عنصر کے مواد کو <div>کلاس کے ساتھ لپیٹ دیں۔

معاون ٹکنالوجی کے معنی پہنچانا

سیاق و سباق کے رنگوں کی طرح ، اس بات کو یقینی بنائیں کہ رنگ کے ذریعے بیان کیا گیا کوئی بھی مفہوم اس فارمیٹ میں بھی پہنچایا جائے جو خالصتاً پریزنٹیشنل نہ ہو۔

آئیکن بند کریں۔

موڈلز اور الرٹس جیسے مواد کو مسترد کرنے کے لیے عام قریبی آئیکن کا استعمال کریں۔

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

کیریٹس

ڈراپ ڈاؤن فعالیت اور سمت کی نشاندہی کرنے کے لیے کیریٹس کا استعمال کریں۔ نوٹ کریں کہ ڈیفالٹ کیریٹ ڈراپ اپ مینو میں خود بخود الٹ جائے گا ۔

<span class="caret"></span>

فوری فلوٹس

کسی عنصر کو کلاس کے ساتھ بائیں یا دائیں فلوٹ کریں۔ !importantمخصوص مسائل سے بچنے کے لیے شامل کیا گیا ہے۔ کلاسز کو مکس کے طور پر بھی استعمال کیا جا سکتا ہے۔

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

سینٹر مواد بلاکس

ایک عنصر کو سیٹ کریں display: blockاور درمیان میں بذریعہ margin. مکس اور کلاس کے طور پر دستیاب ہے۔

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

کلیئر فکس

پیرنٹ عنصر میںfloat شامل کرکے s کو آسانی سے صاف کریں۔ مائیکرو کلیئر فکس کو استعمال کرتا ہے جیسا کہ نکولس گالاگھر نے مقبول کیا ہے ۔ مکس کے طور پر بھی استعمال کیا جا سکتا ہے۔.clearfix

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

مواد دکھانا اور چھپانا۔

کلاسز کے استعمال کے ساتھ کسی عنصر کو دکھانے یا چھپانے پر مجبور کریں ( بشمول اسکرین ریڈرز کے لیے )۔ یہ کلاسیں مخصوصیت کے تنازعات سے بچنے کے لیے استعمال کرتی ہیں، بالکل اسی طرح جیسے فوری فلوٹس ۔ وہ صرف بلاک لیول ٹوگلنگ کے لیے دستیاب ہیں۔ انہیں مکس کے طور پر بھی استعمال کیا جا سکتا ہے۔.show.hidden!important

.hideدستیاب ہے، لیکن یہ ہمیشہ اسکرین ریڈرز کو متاثر نہیں کرتا اور v3.0.1 کے مطابق فرسودہ ہے ۔ استعمال کریں .hiddenیا .sr-onlyاس کے بجائے۔

مزید برآں، .invisibleکسی عنصر کی صرف مرئیت کو ٹوگل کرنے کے لیے استعمال کیا جا سکتا ہے، یعنی اس displayمیں ترمیم نہیں کی گئی ہے اور عنصر اب بھی دستاویز کے بہاؤ کو متاثر کر سکتا ہے۔

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

اسکرین ریڈر اور کی بورڈ نیویگیشن مواد

ایک عنصر کو تمام آلات پر چھپائیں سوائے اسکرین ریڈرز کے ساتھ .sr-only۔ جب عنصر فوکس ہو تو اسے دوبارہ دکھانے کے لیے اس کے .sr-onlyساتھ جوڑیں (مثال کے طور پر صرف کی بورڈ صارف کے ذریعے)۔ قابل رسائی بہترین طریقوں پر عمل کرنے.sr-only-focusable کے لیے ضروری ہے ۔ مکس کے طور پر بھی استعمال کیا جا سکتا ہے۔

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

تصویر کی تبدیلی

.text-hideکسی عنصر کے متنی مواد کو پس منظر کی تصویر سے تبدیل کرنے میں مدد کے لیے کلاس یا مکس کا استعمال کریں۔

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

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

ان کو محدود بنیادوں پر استعمال کرنے کی کوشش کریں اور ایک ہی سائٹ کے بالکل مختلف ورژن بنانے سے گریز کریں۔ اس کے بجائے، ہر آلے کی پیشکش کو مکمل کرنے کے لیے ان کا استعمال کریں۔

دستیاب کلاسز

ویو پورٹ بریک پوائنٹس پر مواد کو ٹوگل کرنے کے لیے دستیاب کلاسوں کا ایک یا مجموعہ استعمال کریں۔

	اضافی چھوٹے آلاتفونز (<768px)	چھوٹے آلاتگولیاں (≥768px)	درمیانے درجے کے آلاتڈیسک ٹاپس (≥992px)	بڑے آلاتڈیسک ٹاپس (≥1200px)
`.visible-xs-*`	نظر آنے والا	پوشیدہ	پوشیدہ	پوشیدہ
`.visible-sm-*`	پوشیدہ	نظر آنے والا	پوشیدہ	پوشیدہ
`.visible-md-*`	پوشیدہ	پوشیدہ	نظر آنے والا	پوشیدہ
`.visible-lg-*`	پوشیدہ	پوشیدہ	پوشیدہ	نظر آنے والا
`.hidden-xs`	پوشیدہ	نظر آنے والا	نظر آنے والا	نظر آنے والا
`.hidden-sm`	نظر آنے والا	پوشیدہ	نظر آنے والا	نظر آنے والا
`.hidden-md`	نظر آنے والا	نظر آنے والا	پوشیدہ	نظر آنے والا
`.hidden-lg`	نظر آنے والا	نظر آنے والا	نظر آنے والا	پوشیدہ

v3.2.0 کے مطابق، .visible-*-*ہر بریک پوائنٹ کی کلاسیں تین مختلف حالتوں میں آتی ہیں، displayذیل میں درج ہر CSS پراپرٹی ویلیو کے لیے ایک۔

کلاسز کا گروپ	سی ایس ایس`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

لہذا، مثال کے طور پر اضافی چھوٹی ( xs) اسکرینوں کے لیے، دستیاب .visible-*-*کلاسیں ہیں: .visible-xs-block, .visible-xs-inline, اور .visible-xs-inline-block.

کلاسز .visible-xs, .visible-sm, .visible-md, اور .visible-lgبھی موجود ہیں لیکن v3.2.0 کے مطابق فرسودہ ہیں ۔ وہ تقریباً مساوی ہیں ، سوائے ٹوگلنگ سے متعلقہ عناصر .visible-*-blockکے اضافی خصوصی معاملات کے ۔<table>

پرنٹ کلاسز

ریگولر ریسپانسیو کلاسز کی طرح، پرنٹ کے لیے مواد کو ٹوگل کرنے کے لیے ان کا استعمال کریں۔

کلاسز	براؤزر	پرنٹ کریں
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	پوشیدہ	نظر آنے والا
`.hidden-print`	نظر آنے والا	پوشیدہ

کلاس .visible-printبھی موجود ہے لیکن v3.2.0 کے مطابق فرسودہ ہے ۔ یہ تقریباً مساوی ہے ، سوائے متعلقہ عناصر .visible-print-blockکے لیے اضافی خصوصی معاملات کے ۔<table>

ٹیسٹ کیسز

ریسپانسیو یوٹیلیٹی کلاسز کو جانچنے کے لیے اپنے براؤزر کا سائز تبدیل کریں یا مختلف ڈیوائسز پر لوڈ کریں۔

پر مرئی...

سبز چیک مارکس بتاتے ہیں کہ عنصر آپ کے موجودہ ویو پورٹ میں نظر آتا ہے ۔

اضافی چھوٹا ✔ x-small پر نظر آتا ہے۔

چھوٹا ✔ چھوٹے پر نظر آتا ہے۔

درمیانہ ✔ میڈیم پر مرئی

بڑا ✔ بڑے پر نظر آتا ہے۔

اضافی چھوٹے اور چھوٹے ✔ x-small اور small پر نظر آتا ہے۔

درمیانے اور بڑے ✔ درمیانے اور بڑے پر نظر آتا ہے۔

اضافی چھوٹے اور درمیانے درجے کے ✔ ایکس سمال اور میڈیم پر مرئی

چھوٹے اور بڑے ✔ چھوٹے اور بڑے پر نظر آتا ہے۔

اضافی چھوٹے اور بڑے ✔ x-چھوٹے اور بڑے پر نظر آتا ہے۔

چھوٹے اور درمیانے درجے کے ✔ چھوٹے اور درمیانے درجے پر نظر آتا ہے۔

پر پوشیدہ...

یہاں، سبز چیک مارکس یہ بھی بتاتے ہیں کہ عنصر آپ کے موجودہ ویو پورٹ میں چھپا ہوا ہے۔

اضافی چھوٹا ✔ ایکس سمال پر چھپا ہوا ہے۔

چھوٹا ✔ چھوٹے پر چھپا ہوا ہے۔

درمیانہ ✔ میڈیم پر پوشیدہ

بڑا ✔ بڑے پر چھپا ہوا ہے۔

اضافی چھوٹے اور چھوٹے ✔ x-small اور small پر چھپا ہوا ہے۔

درمیانے اور بڑے ✔ درمیانے اور بڑے پر چھپا ہوا ہے۔

اضافی چھوٹے اور درمیانے درجے کے ✔ Hidden on x-small and medium

Small and large ✔ چھوٹے اور بڑے پر چھپا ہوا ہے۔

Extra small and large ✔ چھوٹے اور بڑے پر چھپا ہوا ہے۔

چھوٹے اور درمیانے درجے کے ✔ Hidden on small and medium

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

گرڈ متغیرات اور مکسنز کو گرڈ سسٹم سیکشن میں شامل کیا جاتا ہے۔

بوٹسٹریپ مرتب کرنا

بوٹسٹریپ کو کم از کم دو طریقوں سے استعمال کیا جا سکتا ہے: مرتب شدہ سی ایس ایس کے ساتھ یا سورس کم فائلوں کے ساتھ۔ کم فائلوں کو مرتب کرنے کے لیے، ضروری کمانڈز کو چلانے کے لیے اپنے ترقیاتی ماحول کو ترتیب دینے کے لیے شروع کرنے کے سیکشن سے مشورہ کریں ۔

تھرڈ پارٹی کمپلیشن ٹولز بوٹسٹریپ کے ساتھ کام کر سکتے ہیں، لیکن ہماری بنیادی ٹیم کی طرف سے ان کی حمایت نہیں کی جاتی ہے۔

متغیرات

متغیرات کو پورے پروجیکٹ میں مرکزی بنانے اور عام طور پر استعمال ہونے والی قدروں جیسے رنگ، وقفہ کاری، یا فونٹ اسٹیک کو شیئر کرنے کے طریقے کے طور پر استعمال کیا جاتا ہے۔ مکمل خرابی کے لیے، براہ کرم Customizer دیکھیں ۔

رنگ

آسانی سے دو رنگ سکیموں کا استعمال کریں: گرے اسکیل اور سیمنٹک۔ گرے اسکیل رنگ عام طور پر استعمال ہونے والے سیاہ رنگوں تک فوری رسائی فراہم کرتے ہیں جبکہ سیمنٹک میں معنی خیز سیاق و سباق کی اقدار کے لیے تفویض کردہ مختلف رنگ شامل ہیں۔

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

ان میں سے کسی بھی رنگ متغیر کا استعمال کریں جیسا کہ وہ ہیں یا انہیں اپنے پروجیکٹ کے لیے مزید معنی خیز متغیرات کے لیے دوبارہ تفویض کریں۔

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

سہاروں ۔

آپ کی سائٹ کے کنکال کے اہم عناصر کو تیزی سے حسب ضرورت بنانے کے لیے مٹھی بھر متغیرات۔

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

لنکس

صرف ایک قدر کے ساتھ اپنے لنکس کو صحیح رنگ کے ساتھ آسانی سے اسٹائل کریں۔

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

نوٹ کریں کہ @link-hover-colorایک فنکشن کا استعمال کرتا ہے، کم سے ایک اور زبردست ٹول، خود بخود صحیح ہوور رنگ بنانے کے لیے۔ آپ استعمال کر سکتے ہیں darken, lighten, saturate, and desaturate.

نوع ٹائپ

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

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

شبیہیں

آپ کے شبیہیں کے مقام اور فائل نام کو حسب ضرورت بنانے کے لیے دو فوری متغیرات۔

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

اجزاء

پورے بوٹسٹریپ کے اجزاء عام اقدار کو ترتیب دینے کے لیے کچھ ڈیفالٹ متغیرات کا استعمال کرتے ہیں۔ یہاں سب سے زیادہ استعمال ہونے والے ہیں۔

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

وینڈر مکسنس

آپ کے مرتب کردہ CSS میں تمام متعلقہ وینڈر کے سابقے شامل کر کے متعدد براؤزرز کو سپورٹ کرنے میں مدد کرنے کے لیے وینڈر مکسینز مکسنز ہیں۔

باکس سائزنگ

اپنے اجزاء کے باکس ماڈل کو ایک ہی مکسین کے ساتھ دوبارہ ترتیب دیں۔ سیاق و سباق کے لیے، موزیلا کا یہ مددگار مضمون دیکھیں ۔

Autoprefixer کے متعارف ہونے کے ساتھ v3.2.0 کے مطابق مکسین کو فرسودہ کر دیا گیا ہے۔ پیچھے کی طرف مطابقت کو محفوظ رکھنے کے لیے، بوٹسٹریپ بوٹسٹریپ v4 تک مکسین کو اندرونی طور پر استعمال کرتا رہے گا۔

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

گول کنارے

آج تمام جدید براؤزرز غیر پریفکسڈ border-radiusپراپرٹی کو سپورٹ کرتے ہیں۔ اس طرح، کوئی .border-radius()مکس نہیں ہے، لیکن بوٹسٹریپ میں شارٹ کٹ شامل ہیں تاکہ کسی شے کے کسی خاص طرف دو کونوں کو تیزی سے گول کر سکیں۔

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

باکس (ڈراپ) سائے

اگر آپ کے ہدف کے سامعین تازہ ترین اور عظیم ترین براؤزرز اور آلات استعمال کر رہے ہیں، تو یقینی بنائیں کہ box-shadowپراپرٹی کو خود ہی استعمال کریں۔ اگر آپ کو پرانے Android (pre-v4) اور iOS آلات (pre-iOS 5) کے لیے سپورٹ کی ضرورت ہے، تو مطلوبہ سابقہ لینے کے لیے فرسودہ مکسن کا استعمال کریں۔-webkit

مکسین کو v3.1.0 کے مطابق فرسودہ کر دیا گیا ہے ، کیونکہ بوٹسٹریپ ان پرانے پلیٹ فارمز کو باضابطہ طور پر سپورٹ نہیں کرتا ہے جو معیاری پراپرٹی کو سپورٹ نہیں کرتے ہیں۔ پیچھے کی طرف مطابقت کو محفوظ رکھنے کے لیے، بوٹسٹریپ بوٹسٹریپ v4 تک مکسین کو اندرونی طور پر استعمال کرتا رہے گا۔

اپنے باکس شیڈو میں رنگوں کا استعمال یقینی بنائیں rgba()تاکہ وہ پس منظر کے ساتھ ہر ممکن حد تک بغیر کسی رکاوٹ کے مل جائیں۔

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

ٹرانزیشنز

لچک کے لیے ایک سے زیادہ مکسنس۔ منتقلی کی تمام معلومات کو ایک کے ساتھ سیٹ کریں، یا ضرورت کے مطابق ایک الگ تاخیر اور مدت کی وضاحت کریں۔

Autoprefixer کے متعارف ہونے کے ساتھ، v3.2.0 کے مطابق مکسین کو فرسودہ کر دیا گیا ہے۔ پیچھے کی طرف مطابقت کو برقرار رکھنے کے لیے، بوٹسٹریپ بوٹسٹریپ v4 تک مکسز کو اندرونی طور پر استعمال کرتا رہے گا۔

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

تبدیلیاں

کسی بھی چیز کو گھمائیں، پیمانہ کریں، ترجمہ کریں (منتقل کریں) یا ترچھی کریں۔

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

متحرک تصاویر

ایک اعلان میں CSS3 کی تمام اینیمیشن خصوصیات کو استعمال کرنے کے لیے ایک سنگل مکسین اور انفرادی پراپرٹیز کے لیے دیگر مکسین۔

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

دھندلاپن

تمام براؤزرز کے لیے دھندلاپن سیٹ کریں اور filterIE8 کے لیے فال بیک فراہم کریں۔

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

پلیس ہولڈر متن

ہر فیلڈ کے اندر فارم کنٹرول کے لیے سیاق و سباق فراہم کریں۔

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

کالم

ایک عنصر کے اندر CSS کے ذریعے کالم بنائیں۔

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

میلان

کسی بھی دو رنگوں کو آسانی سے پس منظر کے میلان میں تبدیل کریں۔ مزید ترقی حاصل کریں اور ایک سمت متعین کریں، تین رنگ استعمال کریں، یا ریڈیل گریڈینٹ استعمال کریں۔ ایک ہی مکسین کے ساتھ آپ کو وہ تمام سابقہ نحو مل جاتے ہیں جن کی آپ کو ضرورت ہوگی۔

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

آپ معیاری دو رنگوں، لکیری میلان کا زاویہ بھی بتا سکتے ہیں:

#gradient > .directional(#333; #000; 45deg);

اگر آپ کو حجام کی پٹی والے انداز کی ضرورت ہے، تو یہ بھی آسان ہے۔ صرف ایک رنگ کی وضاحت کریں اور ہم ایک پارباسی سفید پٹی کو چڑھائیں گے۔

#gradient > .striped(#333; 45deg);

پہلے اوپر اور اس کے بجائے تین رنگ استعمال کریں۔ پہلا رنگ، دوسرا رنگ، دوسرے رنگ کا کلر اسٹاپ (ایک فیصد قدر جیسے 25%) اور تیسرا رنگ ان مکسنز کے ساتھ سیٹ کریں:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

ہیڈ اپ! اگر آپ کو کبھی بھی گریڈینٹ کو ہٹانے کی ضرورت ہو تو یقینی بنائیں کہ آپ نے جو بھی IE مخصوص filterشامل کیا ہو اسے ہٹا دیں۔ .reset-filter()آپ اس کے ساتھ ساتھ مکسن کا استعمال کرکے ایسا کرسکتے ہیں background-image: none;۔

یوٹیلیٹی مکسنس

یوٹیلیٹی مکسین وہ مکسنز ہیں جو کسی خاص مقصد یا کام کو حاصل کرنے کے لیے دوسری صورت میں غیر متعلقہ CSS خصوصیات کو یکجا کرتے ہیں۔

کلیئر فکس

class="clearfix"کسی بھی عنصر میں شامل کرنا بھول جائیں اور اس کے بجائے .clearfix()جہاں مناسب ہو مکسین شامل کریں۔ Nicolas Gallagher سے مائیکرو کلیئر فکس استعمال کرتا ہے ۔

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

افقی سینٹرنگ

کسی بھی عنصر کو اس کے والدین کے اندر تیزی سے مرکز کریں۔ کی ضرورت ہے widthیا max-widthمقرر کیا جائے.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

سائز دینے والے مددگار

کسی چیز کے طول و عرض کو زیادہ آسانی سے بیان کریں۔

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

سائز تبدیل کرنے کے قابل ٹیکسٹیریاز

کسی بھی ٹیکسٹیریا، یا کسی دوسرے عنصر کے لیے سائز تبدیل کرنے کے اختیارات کو آسانی سے ترتیب دیں۔ عام براؤزر کے رویے کے لیے ڈیفالٹ ( both)

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

متن کاٹنا

ایک ہی مکسین کے ساتھ بیضوی شکل کے ساتھ متن کو آسانی سے تراشیں۔ عنصر ہونا blockیا inline-blockسطح کی ضرورت ہے۔

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

ریٹنا کی تصاویر

تصویر کے دو راستے اور @1x تصویر کے طول و عرض کی وضاحت کریں، اور بوٹسٹریپ @2x میڈیا سوال فراہم کرے گا۔ اگر آپ کے پاس پیش کرنے کے لیے بہت سی تصاویر ہیں، تو ایک میڈیا سوال میں اپنی ریٹنا امیج CSS کو دستی طور پر لکھنے پر غور کریں۔

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

جبکہ بوٹسٹریپ کم پر بنایا گیا ہے، اس میں ایک آفیشل ساس پورٹ بھی ہے ۔ ہم اسے الگ GitHub ذخیرہ میں برقرار رکھتے ہیں اور تبادلوں کے اسکرپٹ کے ساتھ اپ ڈیٹس کو ہینڈل کرتے ہیں۔

کیا شامل ہے۔

چونکہ ساس پورٹ کا ایک الگ ریپو ہے اور یہ قدرے مختلف سامعین کی خدمت کرتا ہے، اس لیے پروجیکٹ کا مواد مرکزی بوٹسٹریپ پروجیکٹ سے بہت مختلف ہے۔ یہ یقینی بناتا ہے کہ Sass پورٹ زیادہ سے زیادہ Sass پر مبنی سسٹمز کے ساتھ مطابقت رکھتا ہے۔

راستہ	تفصیل
`lib/`	روبی جیم کوڈ (ساس کنفیگریشن، ریل اور کمپاس انضمام)
`tasks/`	کنورٹر اسکرپٹس (اپ اسٹریم لیس کو ساس میں تبدیل کرنا)
`test/`	تالیف کے ٹیسٹ
`templates/`	کمپاس پیکیج مینی فیسٹ
`vendor/assets/`	ساس، جاوا اسکرپٹ، اور فونٹ فائلیں۔
`Rakefile`	اندرونی کام، جیسے ریک اور کنورٹ

ان فائلوں کو عملی شکل میں دیکھنے کے لیے Sass پورٹ کے GitHub ریپوزٹری پر جائیں ۔

تنصیب

Sass کے لیے بوٹسٹریپ کو انسٹال اور استعمال کرنے کے طریقے کے بارے میں معلومات کے لیے، GitHub repository readme سے رجوع کریں ۔ یہ سب سے تازہ ترین ماخذ ہے اور اس میں ریل، کمپاس، اور معیاری Sass پروجیکٹس کے استعمال کے لیے معلومات شامل ہیں۔

ساس کے لیے بوٹسٹریپ

سی ایس ایس

جائزہ

HTML5 دستاویز کی قسم

پہلے موبائل

نوع ٹائپ اور لنکس

Normalize.css

کنٹینرز

گرڈ سسٹم

تعارف

میڈیا کے سوالات

گرڈ کے اختیارات

مثال: اسٹیکڈ سے افقی

مثال: سیال کنٹینر

مثال: موبائل اور ڈیسک ٹاپ

مثال: موبائل، ٹیبلیٹ، ڈیسک ٹاپ

مثال: کالم لپیٹنا

ریسپانسیو کالم ری سیٹ

کالموں کو آف سیٹ کرنا

نیسٹنگ کالم

کالم ترتیب دینا

کم مکس اور متغیر

متغیرات

مکسنس

استعمال کی مثال

نوع ٹائپ

عنوانات

h1. بوٹسٹریپ کی سرخی

h2. بوٹسٹریپ کی سرخی

h3. بوٹسٹریپ کی سرخی

h4. بوٹسٹریپ کی سرخی

h5. بوٹسٹریپ کی سرخی

h6. بوٹسٹریپ کی سرخی

h1. بوٹسٹریپ کی سرخی ثانوی متن

h2. بوٹسٹریپ کی سرخی ثانوی متن

h3. بوٹسٹریپ کی سرخی ثانوی متن

h4. بوٹسٹریپ کی سرخی ثانوی متن

h5. بوٹسٹریپ کی سرخی ثانوی متن

h6. بوٹسٹریپ کی سرخی ثانوی متن

باڈی کاپی

لیڈ باڈی کاپی

کم کے ساتھ بنایا گیا۔

ان لائن ٹیکسٹ عناصر

نشان زد متن

حذف شدہ متن

سٹرائیک تھرو ٹیکسٹ

داخل کردہ متن

خط کشیدہ متن

چھوٹا متن

بولڈ

ترچھا

متبادل عناصر

صف بندی کی کلاسز

تبدیلی کی کلاسز

مخففات

بنیادی مخفف

ابتداء پسندی

پتے

بلاک کوٹس

پہلے سے طے شدہ بلاک کوٹ

بلاک کوٹ کے اختیارات

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

متبادل ڈسپلے

فہرستیں

بے ترتیب

حکم دیا

بے انداز

لائن میں

تفصیل

افقی تفصیل

خودکار تراشنا

کوڈ

لائن میں

صارف کا ان پٹ

بنیادی بلاک

متغیرات

نمونہ آؤٹ پٹ

میزیں

بنیادی مثال

دھاری دار قطاریں۔

کراس براؤزر مطابقت

ڈیمو `:focus`ریاست

کی لنک کی فعالیت کے بارے میں انتباہ`<a>`

چھپی ہوئی کے ساتھ اختیاری شبیہیں`.sr-only`پوشیدہ لیبل