اوپر

بائیں

صحیح

نیچے

بوٹسٹریپ، ٹویٹر سے

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

نیرڈ الرٹ: بوٹسٹریپ کم کے ساتھ بنایا گیا ہے اور جدید براؤزرز کو ذہن میں رکھتے ہوئے گیٹ سے باہر کام کرنے کے لیے ڈیزائن کیا گیا ہے۔

سی ایس ایس کو ہاٹ لنک کریں۔

تیز ترین اور آسان ترین آغاز کے لیے، بس اس ٹکڑوں کو اپنے ویب پیج میں کاپی کریں۔

اسے کم کے ساتھ استعمال کریں۔

کم استعمال کرنے کے پرستار؟ کوئی مسئلہ نہیں، صرف ریپو کو کلون کریں اور یہ لائنیں شامل کریں:

GitHub پر فورک

Github پر آفیشل بوٹسٹریپ ریپو کے ساتھ ڈاؤن لوڈ، فورک، پل، فائل ایشوز اور بہت کچھ۔

GitHub پر بوٹسٹریپ »

فی الحال v1.3.0

تاریخ

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

dev.twitter.com پر مزید پڑھیں ›

براؤزر سپورٹ

کروم، سفاری، انٹرنیٹ ایکسپلورر، اور فائر فاکس جیسے بڑے جدید براؤزرز میں بوٹسٹریپ کا تجربہ اور تعاون کیا جاتا ہے۔

کروم، سفاری، انٹرنیٹ ایکسپلورر، اور فائر فاکس میں تجربہ اور تعاون یافتہ

تازہ ترین سفاری
تازہ ترین گوگل کروم
فائر فاکس 4+
انٹرنیٹ ایکسپلورر 7+
اوپیرا 11

کیا شامل ہے۔

بوٹسٹریپ مرتب شدہ سی ایس ایس، غیر مرتب شدہ، اور مثال کے سانچوں کے ساتھ مکمل آتا ہے۔

1.3 جاوا اسکرپٹ پلگ ان میں نیا
تمام اصل .less فائلیں۔
مکمل طور پر مرتب شدہ اور کم سی ایس ایس
اسٹائل گائیڈ دستاویزات مکمل کریں۔
مختلف ترتیب کے ساتھ تین مثالی صفحات

فوری آغاز کی مثالیں۔

کچھ فوری ٹیمپلیٹس کی ضرورت ہے؟ ان بنیادی مثالوں کو دیکھیں جو ہم نے ایک ساتھ رکھی ہیں:

ڈیفالٹ گرڈ

بوٹسٹریپ کے حصے کے طور پر فراہم کردہ ڈیفالٹ گرڈ سسٹم ایک 940px چوڑا 16 کالم گرڈ ہے۔ یہ مقبول 960 گرڈ سسٹم کا ذائقہ ہے، لیکن بائیں اور دائیں جانب اضافی مارجن/پڈنگ کے بغیر۔

گرڈ مارک اپ کی مثال

جیسا کہ یہاں دکھایا گیا ہے، ایک بنیادی ترتیب دو "کالموں" کے ساتھ بنائی جا سکتی ہے، ہر ایک 16 بنیادی کالموں کی تعداد پر پھیلا ہوا ہے جسے ہم نے اپنے گرڈ سسٹم کے حصے کے طور پر بیان کیا ہے۔ مزید تغیرات کے لیے ذیل کی مثالیں دیکھیں۔

<div class = "row" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

1/3

2/3

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

8 آفسیٹ 4

1/3 آفسیٹ 2/3s

4 آفسیٹ 4

5 آفسیٹ 3

10 آفسیٹ 6

نیسٹنگ کالم

.rowاگر آپ کو کسی موجودہ کالم کے اندر ایک بنا کر اپنے مواد کو نیسٹ کریں ۔

نیسٹڈ کالمز کی مثال

کالم کی سطح 1

لیول 2

<div class = "row" > 
  <div class = "span12" > 
    کالم کی سطح 1
    <div class = "row" > 
      <div class = "span6" > 
        لیول 2
      </div>
      <div class = "span6" > 
        لیول 2
      </div>
    </div>
  </div>
</div>

اپنا گرڈ رول کریں۔

پہلے سے طے شدہ 940px گرڈ سسٹم کو حسب ضرورت بنانے کے لیے بوٹسٹریپ میں بلٹ میں متغیرات کی ایک مٹھی بھر ہے۔ تھوڑی سی تخصیص کے ساتھ، آپ کالموں کے سائز، ان کے گٹر، اور جس کنٹینر میں وہ رہتے ہیں اس میں ترمیم کر سکتے ہیں۔

گرڈ کے اندر

گرڈ سسٹم میں ترمیم کرنے کے لیے درکار متغیرات فی الحال سبھی میں موجود ہیں preboot.less۔

متغیر	پہلے سے طے شدہ قیمت	تفصیل
`@gridColumns`	16	گرڈ کے اندر کالموں کی تعداد
`@gridColumnWidth`	40px	گرڈ کے اندر ہر کالم کی چوڑائی
`@gridGutterWidth`	20px	ہر کالم کے درمیان منفی جگہ
`@siteWidth`	تمام کالموں اور گٹروں کا حسابی مجموعہ	ہم کالموں اور گٹروں کی تعداد کو گننے اور `.fixed-container()`مکسین کی چوڑائی سیٹ کرنے کے لیے کچھ بنیادی میچ استعمال کرتے ہیں۔

اب اپنی مرضی کے مطابق کرنے کے لئے

گرڈ میں ترمیم کرنے کا مطلب ہے تین @grid-*متغیرات کو تبدیل کرنا اور کم فائلوں کو دوبارہ مرتب کرنا۔

بوٹسٹریپ 24 کالموں کے ساتھ گرڈ سسٹم کو ہینڈل کرنے کے لیے آتا ہے۔ پہلے سے طے شدہ صرف 16 ہے۔ یہاں یہ ہے کہ آپ کے گرڈ متغیرات 24 کالم گرڈ میں کس طرح اپنی مرضی کے مطابق نظر آئیں گے۔

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;

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

فکسڈ لے آؤٹ

پہلے سے طے شدہ اور سادہ 940px چوڑا، کسی بھی ویب سائٹ یا صفحہ کے لیے مرکزی ترتیب جو کسی ایک کے ذریعے فراہم کی گئی ہے <div.container>۔

<body>
  <div class = "کنٹینر" > 
    ...
  </div>
</body>

سیال لے آؤٹ

کم سے کم اور زیادہ سے زیادہ چوڑائی اور بائیں طرف کی سائڈبار کے ساتھ ایک متبادل، لچکدار سیال صفحہ کا ڈھانچہ۔ ایپس اور دستاویزات کے لیے بہترین۔

<body>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

عنوانات اور کاپی

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

مکمل ٹائپوگرافک گرڈ ہماری preboot.less فائل میں دو کم متغیرات پر مبنی ہے: @basefontاور @baseline. پہلا بنیادی فونٹ سائز ہے جو بھر میں استعمال ہوتا ہے اور دوسرا بیس لائن کی اونچائی ہے۔

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

h1. سرخی 1

h2. سرخی 2

h3. سرخی 3

h4. سرخی 4

h5. سرخی 5

h6. سرخی 6

مثال پیراگراف

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 ut id elit.

مثال کی سرخی میں ذیلی سرخی ہے…

متفرق عناصر

زور، پتے، اور مخففات کا استعمال کرتے ہوئے

<strong> <em> <address> <abbr>

کب استعمال کرنا ہے۔

زور والے ٹیگز ( <strong>اور <em>) کا استعمال کسی لفظ یا فقرے کی اضافی اہمیت یا اس کے ارد گرد کی نقل کے نسبت سے زور دینے کے لیے کیا جانا چاہیے۔ <strong>اہمیت اور تناؤ<em> پر زور دینے کے لیے استعمال کریں ۔

ایک پیراگراف میں زور

Fusce dapibus , tellus ac cursus commodo , Tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

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

پتے

عنصر کو <address>اس کے قریبی آباؤ اجداد، یا کام کے پورے جسم کے لیے رابطے کی معلومات کے لیے استعمال کیا جاتا ہے۔ یہاں دو مثالیں ہیں کہ اسے کیسے استعمال کیا جا سکتا ہے:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

پورا نام
[email protected]

نوٹ: مواد کی مناسب ساخت کے لیے ہر لائن کا <address>اختتام لائن بریک ( <br />) کے ساتھ ہونا چاہیے یا بلاک لیول ٹیگ (مثلاً، ) میں لپیٹا جانا چاہیے ۔<p>

مخففات

مخففات اور مخففات کے لیے، <abbr>ٹیگ استعمال کریں ( HTML5<acronym> میں فرسودہ ہے )۔ شارٹ ہینڈ فارم کو ٹیگ کے اندر رکھیں اور مکمل نام کے لیے ایک ٹائٹل سیٹ کریں۔

بلاک کوٹس

<blockquote> <p> <small>

اقتباس کیسے کریں۔

بلاک کوٹ شامل کرنے کے لیے، <blockquote>ارد گرد لپیٹیں <p>اور <small>ٹیگ کریں۔ <small>اپنے ماخذ کا حوالہ دینے کے لیے عنصر کا استعمال کریں اور آپ کو —اس سے پہلے ایک ایم ڈیش ملے گا۔

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
ڈاکٹر جولیس ہیبرٹ

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> ڈاکٹر جولیس ہیبرٹ </small>
</blockquote>

فہرستیں

بے ترتیب`<ul>`

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.unstyled>`

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

حکم دیا`<ol>`

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

تفصیل`dl`

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

کوڈ

<code> <pre>

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

کوڈ پیش کر رہا ہے۔

کوڈ، ان لائن کے بلاکس یا صرف ٹکڑوں کو، صرف صحیح ٹیگ میں لپیٹ کر انداز کے ساتھ دکھایا جا سکتا ہے۔ متعدد لائنوں پر پھیلے ہوئے کوڈ کے بلاکس کے لیے، <pre>عنصر کا استعمال کریں۔ ان لائن کوڈ کے لیے، <code>عنصر استعمال کریں۔

عنصر نتیجہ

<code> اس طرح کے متن کی ایک لائن میں، آپ کا لپٹا ہوا کوڈ اس >html<عنصر کی طرح نظر آئے گا۔

عنصر	نتیجہ
`<code>`	اس طرح کے متن کی ایک لائن میں، آپ کا لپٹا ہوا کوڈ اس `>html<`عنصر کی طرح نظر آئے گا۔
`<pre>`	<div> <h1>ہیڈنگ</h1> <p>یہاں کچھ...</p> </div> نوٹ:`pre` ٹیگز کے اندر کوڈ کو ہر ممکن حد تک بائیں طرف رکھنا یقینی بنائیں ۔ یہ تمام ٹیبز کو رینڈر کرے گا۔
`<pre class="prettyprint">`	google-code-prettify لائبریری کا استعمال کرتے ہوئے، آپ کوڈ کے بلاکس کو قدرے مختلف بصری انداز اور خودکار نحو کو نمایاں کرنا ملتا ہے۔ <div> <h1> سرخی </h1> <p> یہیں کچھ... </p> </div> google-code-prettify ڈاؤن لوڈ کریں اور استعمال کرنے کا طریقہ کے لیے ریڈمی دیکھیں۔

<pre>

<div>
  <h1>ہیڈنگ</h1>
  <p>یہاں کچھ...</p>
</div>

نوٹ:pre ٹیگز کے اندر کوڈ کو ہر ممکن حد تک بائیں طرف رکھنا یقینی بنائیں ۔ یہ تمام ٹیبز کو رینڈر کرے گا۔

<pre class="prettyprint">

google-code-prettify لائبریری کا استعمال کرتے ہوئے، آپ کوڈ کے بلاکس کو قدرے مختلف بصری انداز اور خودکار نحو کو نمایاں کرنا ملتا ہے۔

<div> <h1> سرخی </h1> <p> یہیں کچھ... </p> </div>

google-code-prettify ڈاؤن لوڈ کریں اور استعمال کرنے کا طریقہ کے لیے ریڈمی دیکھیں۔

ان لائن لیبلز

<span class="label">

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

کسی بھی چیز پر لیبل لگائیں۔

کبھی ان میں سے کسی ایک کی ضرورت تھی نئے! یا کوڈ لکھتے وقت اہم جھنڈے؟ ٹھیک ہے، اب آپ کے پاس ہے. یہاں وہ ہے جو بطور ڈیفالٹ شامل ہے:

لیبل	نتیجہ
`<span class="label">Default</span>`	طے شدہ
`<span class="label success">New</span>`	نئی
`<span class="label warning">Warning</span>`	وارننگ
`<span class="label important">Important</span>`	اہم
`<span class="label notice">Notice</span>`	نوٹس

میڈیا گرڈ

کم HTML فوٹ پرنٹ اور کم سے کم اسٹائل والے صفحات پر مختلف سائز کے تھمب نیلز دکھائیں۔

تھمب نیلز کی مثال

تھمب نیلز .media-gridکسی بھی سائز کے ہو سکتے ہیں، لیکن جب بلٹ ان بوٹسٹریپ گرڈ سسٹم سے براہ راست میپ کیا جائے تو وہ بہترین کام کرتے ہیں۔ تصویر کی چوڑائی جیسے 90، 210، اور 330 پیڈنگ کے چند پکسلز کے ساتھ مل کر , اور کالم کے سائز کے .span2برابر .span4ہیں .span6۔

بڑا

درمیانہ

چھوٹا

ان کو کوڈنگ کرنا

میڈیا گرڈز استعمال کرنے میں آسان اور مارک اپ سائیڈ پر بہت آسان ہیں۔ ان کے طول و عرض خالصتاً شامل تصاویر کے سائز پر مبنی ہیں۔

<ul class = "media-grid" > 
  <li>
    <a href="#" > _ _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href="#" > _ _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

عمارت کی میزیں۔

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

میزیں بہت اچھی ہیں — بہت سی چیزوں کے لیے۔ عظیم میزیں، تاہم، مفید، توسیع پذیر، اور پڑھنے کے قابل (کوڈ کی سطح پر) ہونے کے لیے تھوڑا سا مارک اپ محبت کی ضرورت ہوتی ہے۔ مدد کے لیے یہاں چند تجاویز ہیں۔

اپنے کالم ہیڈر کو ہمیشہ <thead>اس طرح لپیٹیں کہ درجہ بندی <thead>> <tr>> <th>ہو ۔

کالم ہیڈر کی طرح، آپ کے ٹیبل کے تمام باڈی مواد کو ایک میں لپیٹنا چاہیے <tbody>تاکہ آپ کا درجہ بندی <tbody>> <tr>> <td>ہو ۔

مثال: پہلے سے طے شدہ ٹیبل کے انداز

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

#	پہلا نام	آخری نام	زبان
1	کچھ	ایک	انگریزی
2	جو	چھ پیک	انگریزی
3	سٹو	ڈینٹ	کوڈ

<ٹیبل>
  ...
</table>

مثال: زیبرا دھاری دار

زیبرا سٹرپنگ شامل کر کے اپنی ٹیبلز کے ساتھ تھوڑا سا فینسی حاصل کریں — بس .zebra-stripedکلاس شامل کریں۔

#	پہلا نام	آخری نام	زبان
1	کچھ	ایک	انگریزی
2	جو	چھ پیک	انگریزی
3	سٹو	ڈینٹ	کوڈ

نوٹ: زیبرا سٹرپنگ ایک ترقی پسند اضافہ ہے جو پرانے براؤزرز جیسے IE8 اور نیچے کے لیے دستیاب نہیں ہے۔

<ٹیبل کلاس = "زیبرا دھاری دار" > 
...
</table>

مثال: زیبرا دھاری دار w/ TableSorter.js

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

#	پہلا نام	آخری نام	زبان
2	جو	چھ پیک	انگریزی
3	سٹو	ڈینٹ	کوڈ
1	آپ کا	ایک	انگریزی

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( فنکشن () { 
    $ ( "table#sortTableExample" )۔ ٹیبلسورٹر ({ sortList : [[ 1 , 0 ]] })؛  
  });
</script>
<ٹیبل کلاس = "زیبرا دھاری دار" > 
  ...
</table>

فکسڈ ٹاپ بار

یہ کیا ہے

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

مرضی کے مطابق

اندر کے تمام عناصر اور پوری ٹاپ بار بھی اختیاری ہیں۔ آپ لوگو/نام، nav، تلاش، اور ثانوی nav—یا اس کا کوئی بھی مجموعہ شامل کرنے کا انتخاب کر سکتے ہیں۔

ڈراپ ڈاؤن شامل ہیں۔

مرکزی نیویگیشن کے حصے کے طور پر، ہم نے آپ کے لیے آپ کے نیویگیشن میں ڈراپ ڈاؤنز شامل کرنے کی صلاحیت شامل کی ہے۔ یہ دیکھنے کے لیے اوپر ثانوی nav (دائیں سیدھ میں) دیکھیں کہ یہ کیسے ہوتا ہے۔ ڈراپ ڈاؤن ٹیگز موجودہ صفحہ کے انتخاب کو دکھانے کے لیے liبھی معاونت کرتے ہیں۔.active

نوٹ:padding-top: 40px; کسی بھی صفحہ پر ٹاپ بار استعمال کرتے وقت، اپنے میں شامل کرنے سے اس کی وجہ بننے والے اوورلیپ کا حساب ضرور رکھیں body۔

ٹیبز اور گولیاں

ایک کے ساتھ سادہ ثانوی نیویگیشن بنائیں <ul>۔ مناسب کلاس شامل کرکے ٹیبز یا گولیوں کے درمیان تبادلہ کریں۔

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

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > ہوم </a></li>  
  <li><a href = "#" > پروفائل </a></li> 
  <li><a href = "#" > پیغامات </a></li> 
  <li><a href = "#" > ترتیبات </a></li> 
  <li><a href = "#" > رابطہ </a></li> 
</ul>

<ul class = "گولیاں" > 
  <li class = "active" ><a href = "#" > ہوم </a></li>  
  <li><a href = "#" > پروفائل </a></li> 
  <li><a href = "#" > پیغامات </a></li> 
  <li><a href = "#" > ترتیبات </a></li> 
  <li><a href = "#" > رابطہ </a></li> 
</ul>

بریڈ کرمبس

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

<ul class = "بریڈ کرمب" > 
  <li><a href = "#" > ہوم </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > درمیانی صفحہ </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > ایک اور </a> <span class = "divider" > / </span></li>   
  <li class = "active" > آپ یہاں ہیں </li> 
</ul>

صفحہ بندی

انتہائی سادہ اور کم سے کم اسٹائل والا صفحہ بندی Rdio سے متاثر ہے۔ بڑے بلاک کو کھونا مشکل ہے، آسانی سے توسیع پذیر ہے، اور بڑے کلک والے علاقے فراہم کرتا ہے۔

<div class = "صفحہ بندی" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← پچھلا </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li کلاس = "اگلا" ><a href = "#" > اگلا → </a></li>  
  </ul>
</div>

بنیادی انتباہات

.alert-message

ناکامی، ممکنہ ناکامی، یا کسی عمل کی کامیابی کو اجاگر کرنے کے لیے ایک سطری پیغامات۔ فارم کے لیے خاص طور پر مفید ہے۔

جاوا اسکرپٹ حاصل کریں »

مقدس guacamole! خود کو چیک کریں، آپ زیادہ اچھے نہیں لگ رہے ہیں۔

اوہ سنیپ! اسے اور اسے تبدیل کریں اور دوبارہ کوشش کریں۔

بہت اچھے! آپ نے اس الرٹ پیغام کو کامیابی سے پڑھ لیا۔

سنو! یہ ایک انتباہ ہے جس پر آپ کی توجہ کی ضرورت ہے، لیکن ابھی یہ ایک بہت بڑی ترجیح نہیں ہے۔

مثال کا کوڈ

<div class = "انتباہ پیغام وارننگ" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> مقدس گواکامول! </strong> بہترین خود کو چیک کریں، آپ زیادہ اچھے نہیں لگ رہے ہیں۔ </p>
</div>

پیغامات کو مسدود کریں۔

.alert-message.block-message

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

جاوا اسکرپٹ حاصل کریں »

مقدس guacamole! یہ ایک انتباہ ہے! خود کو چیک کریں، آپ زیادہ اچھے نہیں لگ رہے ہیں۔ Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

یہ اقدام کریں۔ یا یہ کرو

اوہ سنیپ! آپ کو ایک غلطی ہو گئی ہے! اسے اور اسے تبدیل کریں اور دوبارہ کوشش کریں۔

Duis mollis est non commodo luctus
Nisi erat porttitor ligula
Eget lacinia odio sem nec elit

یہ اقدام کریں۔ یا یہ کرو

بہت اچھے! آپ نے اس الرٹ پیغام کو کامیابی سے پڑھ لیا۔ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

یہ اقدام کریں۔ یا یہ کرو

سنو! یہ ایک انتباہ ہے جس پر آپ کی توجہ کی ضرورت ہے، لیکن ابھی یہ ایک بہت بڑی ترجیح نہیں ہے۔

یہ اقدام کریں۔ یا یہ کرو

مثال کا کوڈ

<div class = "انتباہ-پیغام بلاک-پیغام وارننگ" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> مقدس گواکامول! یہ ایک انتباہ ہے! </strong> بہترین خود کو چیک کریں، آپ زیادہ اچھے نہیں لگ رہے ہیں۔ Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > یہ کارروائی کریں </a> <a class="btn small" href = "#" > یا یہ کریں </a>     
  </div>
</div>

ماڈلز

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

جاوا اسکرپٹ حاصل کریں »

ٹول ٹپس

کنفیوزڈ صارف کی مدد کرنے اور انہیں صحیح سمت کی طرف اشارہ کرنے کے لیے Twipsies انتہائی مفید ہیں۔

جاوا اسکرپٹ حاصل کریں »

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur، aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo، voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit، totam doloremque unde sunt sed dicta quae fugit quaevoltasuptum volutasuptium

پاپورز

لے آؤٹ کو متاثر کیے بغیر کسی صفحہ کو ذیلی متن کی معلومات فراہم کرنے کے لیے پاپ اوور کا استعمال کریں۔

جاوا اسکرپٹ حاصل کریں »

شروع ہوا چاہتا ہے

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

جاوا اسکرپٹ دستاویزات دیکھیں »

کیا شامل ہے۔

بوٹسٹریپ کے کچھ بنیادی اجزاء کو نئے کسٹم پلگ ان کے ساتھ زندہ کریں جو jQuery اور Ender کے ساتھ کام کرتے ہیں۔ ہم آپ کی حوصلہ افزائی کرتے ہیں کہ آپ اپنی مخصوص ترقیاتی ضروریات کو پورا کرنے کے لیے ان میں توسیع اور ترمیم کریں۔

فائل	تفصیل
bootstrap-modal.js	ہمارا موڈل پلگ ان روایتی موڈل جے ایس پلگ ان کے مقابلے میں ایک انتہائی سلم ٹیک ہے! ہم نے خاص خیال رکھا کہ صرف وہی ننگی فعالیت شامل کی جائے جس کی ہمیں ٹویٹر پر ضرورت ہے۔
bootstrap-alerts.js	الرٹ پلگ ان انتباہات میں قریبی فعالیت شامل کرنے کے لیے ایک انتہائی چھوٹی کلاس ہے۔
bootstrap-dropdown.js	یہ پلگ ان بوٹسٹریپ ٹاپ بار یا ٹیبڈ نیویگیشنز میں ڈراپ ڈاؤن تعامل کو شامل کرنے کے لیے ہے۔
bootstrap-scrollspy.js	اسکرول اسپی پلگ ان بوٹسٹریپ ٹاپ بار میں اسکرول پوزیشن کی بنیاد پر آٹو اپڈیٹنگ نیوی کو شامل کرنے کے لیے ہے۔
bootstrap-tabs.js	یہ پلگ ان مقامی مواد کے ذریعے سائیکل چلانے کے لیے فوری، متحرک ٹیب اور گولی کی فعالیت کا اضافہ کرتا ہے۔
bootstrap-twipsy.js	جیسن فریم کے تحریر کردہ بہترین jQuery.tipsy پلگ ان پر مبنی؛ twipsy ایک اپ ڈیٹ شدہ ورژن ہے، جو امیجز پر انحصار نہیں کرتا، اینیمیشنز کے لیے css3 اور مقامی ٹائٹل اسٹوریج کے لیے ڈیٹا-انتساب کا استعمال کرتا ہے!
bootstrap-popover.js	پاپ اوور پلگ ان آپ کی ایپلیکیشن میں پاپ اوور شامل کرنے کے لیے ایک سادہ انٹرفیس فراہم کرتا ہے۔ یہ boostrap-twipsy.js پلگ ان کو بڑھاتا ہے، لہذا اپنے پروجیکٹ میں پاپ اوور شامل کرتے وقت اس فائل کو بھی پکڑنا یقینی بنائیں!

کیا جاوا اسکرپٹ ضروری ہے؟

Nope کیا! بوٹسٹریپ کو سب سے پہلے CSS لائبریری بننے کے لیے ڈیزائن کیا گیا ہے۔ یہ جاوا اسکرپٹ شامل شیلیوں کے اوپر ایک بنیادی انٹرایکٹو پرت فراہم کرتا ہے۔

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

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

بوٹسٹریپ کو Preboot کے ساتھ بنایا گیا تھا ، جو کہ تیز اور آسان ویب ڈویلپمنٹ کے لیے ایک CSS پری پروسیسر Less کے ساتھ مل کر استعمال کیے جانے والے مکسینز اور متغیرات کا ایک اوپن سورس پیک ہے ۔

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

اسے کیسے استعمال کریں

اپنے براؤزر میں جاوا اسکرپٹ کے ذریعے بوٹسٹریپ کے کم متغیرات، مکسنس، اور سی ایس ایس میں نیسٹنگ کا مکمل استعمال کرنے کے لیے اس اختیار کا استعمال کریں۔

<link rel = "stylesheet/less" href = "less/bootstrap.less" میڈیا = "تمام" />    
<script src = "js/less-1.1.3.min.js" ></script>

.js حل محسوس نہیں کر رہے؟ کم میک ایپ آزمائیں یا جب آپ اپنا کوڈ لگاتے ہیں تو مرتب کرنے کے لیے Node.js استعمال کریں۔

کیا شامل ہے۔

بوٹسٹریپ کے حصے کے طور پر ٹویٹر بوٹسٹریپ میں کیا شامل ہے اس کی کچھ جھلکیاں یہ ہیں۔ ڈاؤن لوڈ کرنے اور مزید جاننے کے لیے بوٹسٹریپ ویب سائٹ یا گیتھب پروجیکٹ پیج پر جائیں۔

متغیرات

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

// لنکس
@linkColor : #8b59c2؛         
@linkColorHover :     گہرا ( @linkColor ، 10 )؛ 
 
// گرے
سیاہ : #000؛             
گرے ڈارک :           ہلکا ( @ سیاہ ، 25 ٪)؛ 
گرے :               ہلکا ( @ سیاہ ، 50 ٪)؛ 
گرے لائٹ :          ہلکا ( @ سیاہ ، 70 ٪)؛ 
گرے لائٹر :        ہلکا ( @ سیاہ ، 90 ٪)؛ 
@white : #ffff;             
 
// لہجے کے رنگ
@blue : #08b5fb;              
@گرین : #46a546 ;             
@سرخ : #9d261d ;               
@yellow : #ffc40d;            
@اورنج : #f89406 ؛            
@pink : #c3325f;              
@جامنی : #7a43b6 ;            
 
// بیس لائن گرڈ
@basefont : 13px ;          
@baseline : 18px ;

تبصرہ کرنا

/* ... */کم سی ایس ایس کے عام نحو کے علاوہ تبصرہ کرنے کا ایک اور انداز بھی فراہم کرتا ہے۔

// یہ ایک تبصرہ ہے۔
/* یہ بھی ایک تبصرہ ہے*/

وضو کو ملا دیتا ہے۔

مکسینز بنیادی طور پر سی ایس ایس کے لیے شامل یا جزوی ہوتے ہیں، جو آپ کو کوڈ کے بلاک کو ایک میں جوڑنے کی اجازت دیتے ہیں۔ وہ وینڈر پریفکسڈ پراپرٹیز جیسے box-shadowکراس براؤزر گریڈینٹ، فونٹ اسٹیک اور مزید کے لیے بہترین ہیں۔ ذیل میں مکسین کا ایک نمونہ ہے جو بوٹسٹریپ کے ساتھ شامل ہیں۔

فونٹ کے ڈھیر

#فونٹ {
  . شارٹ ہینڈ ( @وزن : نارمل ، @ سائز : 14px ، @lineHeight : 20px ) {     
    فونٹ سائز : @size ; _ 
    فونٹ وزن : @weight ; _ 
    لائن کی اونچائی : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    فونٹ فیملی : "Helvetica Neue " , Helvetica , Arial , sans - serif ؛   
    فونٹ سائز : @size ; _ 
    فونٹ وزن : @weight ; _ 
    لائن کی اونچائی : @lineHeight ; 
  }
  ...
}

میلان

#گریڈینٹ {
  ...
  . عمودی ( @startColor : #555, @endColor: #333) { 
    پس منظر - رنگ : @endColor ; 
    پس منظر - دوبارہ : دوبارہ - x ;
    پس منظر - تصویر : - khtml - میلان ( لکیری ، بائیں اوپر ، بائیں نیچے ، ( @startColor ) سے ( @endColor ) تک ؛ // کونکرر   
    پس منظر - تصویر : - موز - لکیری - میلان ( @startColor , @endColor )؛ // FF 3.6+   
    پس منظر - تصویر : - ایم ایس - لکیری - گریڈینٹ ( @startColor , @endColor )؛ // IE10   
    پس منظر - تصویر : - ویب کٹ - میلان ( لکیری ، بائیں اوپر ، بائیں نیچے ، رنگ - سٹاپ ( %، @startColor )، رنگ - سٹاپ ( 100 ٪، @endColor ) )؛ // Safari 4+, Chrome 2+    
    پس منظر - تصویر : - ویب کٹ - لکیری - میلان ( @startColor , @endColor )؛ // Safari 5.1+, Chrome 10+   
    پس منظر - تصویر : - o - لکیری - میلان ( @startColor , @endColor )؛ // اوپیرا 11.10   
    پس منظر - تصویر : لکیری - میلان ( @startColor , @endColor )؛ // معیار  
  }
  ...
}

آپریشنز

فینسی حاصل کریں اور نیچے کی طرح لچکدار اور طاقتور مکسنس تیار کرنے کے لیے کچھ ریاضی انجام دیں۔

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ))؛                 
 
// کچھ کالم بنائیں
. کالم ( @columnSpan : 1 ) {  
  چوڑائی : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ))؛         
}

کم مرتب کرنا

/lib/ میں فائلوں میں ترمیم کرنے کے بعد .less، آپ کو bootstrap-*xx.css اور bootstrap-*xx.min.css فائلوں کو دوبارہ تخلیق کرنے کے لیے انہیں دوبارہ مرتب کرنے کی ضرورت ہوگی۔ اگر آپ GitHub پر پل کی درخواست جمع کر رہے ہیں، تو آپ کو ہمیشہ دوبارہ کمپائل کرنا چاہیے۔

مرتب کرنے کے طریقے

طریقہ	قدم
میک فائل کے ساتھ نوڈ	درج ذیل کمانڈ کو چلا کر npm کے ساتھ کم کمانڈ لائن کمپائلر انسٹال کریں: $ npm lessc انسٹال کریں۔ ایک بار انسٹال ہونے `make`کے بعد آپ کی بوٹسٹریپ ڈائرکٹری کی جڑ سے چلائیں اور آپ بالکل تیار ہیں۔ مزید برآں، اگر آپ نے واچر انسٹال کر رکھا ہے، تو آپ `make watch`ہر بار بوٹسٹریپ lib میں کسی فائل میں ترمیم کرنے کے بعد بوٹسٹریپ خود بخود دوبارہ تعمیر کر سکتے ہیں (اس کی ضرورت نہیں ہے، صرف ایک سہولت کا طریقہ)۔
جاوا اسکرپٹ	تازہ ترین Less.js ڈاؤن لوڈ کریں اور اس کا راستہ (اور بوٹسٹریپ) میں شامل کریں `head`۔ <link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script> .less فائلوں کو دوبارہ مرتب کرنے کے لیے، بس انہیں محفوظ کریں اور اپنا صفحہ دوبارہ لوڈ کریں۔ Less.js انہیں مرتب کرتا ہے اور انہیں مقامی اسٹوریج میں اسٹور کرتا ہے۔
کمانڈ لائن	اگر آپ کے پاس پہلے سے کم کمانڈ لائن ٹول انسٹال ہے، تو بس درج ذیل کمانڈ کو چلائیں: $lessc ./lib/bootstrap.less > bootstrap.css `--compress`اگر آپ کچھ بائٹس کو بچانے کی کوشش کر رہے ہیں تو اس کمانڈ میں شامل کرنا یقینی بنائیں !
کم میک ایپ	غیر سرکاری میک ایپ .less فائلوں کی ڈائریکٹریز دیکھتی ہے اور دیکھی گئی .less فائل کے ہر محفوظ کرنے کے بعد کوڈ کو مقامی فائلوں میں مرتب کرتی ہے۔ اگر آپ چاہیں تو، آپ خودکار منفائنگ کے لیے ایپ میں ترجیحات کو ٹوگل کر سکتے ہیں اور مرتب کی گئی فائلیں کس ڈائرکٹری میں ختم ہوتی ہیں۔

سی ایس ایس کو ہاٹ لنک کریں۔

اسے کم کے ساتھ استعمال کریں۔

GitHub پر فورک

بوٹسٹریپ بریف ہسٹری، براؤزر سپورٹ، اور مزید کے بارے میں

تاریخ

براؤزر سپورٹ

کیا شامل ہے۔

فوری آغاز کی مثالیں۔

گرڈ سسٹم معیاری 940px کو روکیں یا خود رول کریں۔

ڈیفالٹ گرڈ

گرڈ مارک اپ کی مثال

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

نیسٹنگ کالم

نیسٹڈ کالمز کی مثال

اپنا گرڈ رول کریں۔

گرڈ کے اندر

اب اپنی مرضی کے مطابق کرنے کے لئے

ویب صفحات بنانے کے لیے لے آؤٹ بنیادی ٹیمپلیٹس

فکسڈ لے آؤٹ

سیال لے آؤٹ

نوع ٹائپ کی سرخیاں، پیراگراف، فہرستیں، اور دیگر ان لائن قسم کے عناصر

عنوانات اور کاپی

h1. سرخی 1

h2. سرخی 2

h3. سرخی 3

h4. سرخی 4

h5. سرخی 5

h6. سرخی 6

مثال پیراگراف

مثال کی سرخی میں ذیلی سرخی ہے…

متفرق عناصر

کب استعمال کرنا ہے۔

ایک پیراگراف میں زور

پتے

مخففات

بلاک کوٹس

اقتباس کیسے کریں۔

فہرستیں

بے ترتیب<ul>

بے انداز<ul.unstyled>

حکم دیا<ol>

تفصیلdl

کوڈ

کوڈ پیش کر رہا ہے۔

ان لائن لیبلز

کسی بھی چیز پر لیبل لگائیں۔

میڈیا تصاویر اور ویڈیوز دکھا رہا ہے۔

میڈیا گرڈ

تھمب نیلز کی مثال

بڑا

درمیانہ

چھوٹا

ان کو کوڈنگ کرنا

ٹیبلز برائے، آپ نے اندازہ لگایا، ٹیبلر ڈیٹا

عمارت کی میزیں۔

مثال: پہلے سے طے شدہ ٹیبل کے انداز

مثال: زیبرا دھاری دار

مثال: زیبرا دھاری دار w/ TableSorter.js

فارمز

پہلے سے طے شدہ انداز

اسٹیک شدہ فارم

فارم فیلڈ سائز

بٹن

مثال کے بٹن

متبادل سائز

معذور حالت

لنکس

بٹن

سمت شناسی

فکسڈ ٹاپ بار

پراجیکٹ کا نام

یہ کیا ہے

مرضی کے مطابق

ڈراپ ڈاؤن شامل ہیں۔

ٹیبز اور گولیاں

بریڈ کرمبس

صفحہ بندی

کامیابی، انتباہ، اور غلطی کے پیغامات یا انتباہات کے لیے انتباہات اور خامیوں کے انداز

بنیادی انتباہات

مثال کا کوڈ

بے ترتیب`<ul>`

بے انداز`<ul.unstyled>`

حکم دیا`<ol>`

تفصیل`dl`