Bootstrap جي بنيادي ڍانچي جي بنيادي حصن تي گھٽتائي حاصل ڪريو، بشمول بھتر، تيز، مضبوط ويب ڊولپمينٽ لاءِ اسان جو طريقو.

HTML5 doctype

بوٽ اسٽراپ ڪجهه HTML عناصر ۽ CSS ملڪيتن جو استعمال ڪري ٿو جيڪي HTML5 ڊڪٽيائپ جي استعمال جي ضرورت هونديون آهن. توھان جي سڀني منصوبن جي شروعات ۾ شامل ڪريو.

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

موبائل پهريون

Bootstrap 2 سان، اسان فريم ورڪ جي اهم پهلوئن لاءِ اختياري موبائل دوستانه انداز شامل ڪيو. Bootstrap 3 سان، اسان شروع کان ئي موبائيل دوستانه پروجيڪٽ کي ٻيهر لکيو آهي. اختياري موبائيل اسلوب تي شامل ڪرڻ جي بدران، اهي بنيادي طور تي پڪل آهن. حقيقت ۾، بوٽ اسٽراپ پهريون موبائل آهي . موبائيل فرسٽ اسلوب سڄي لائبريري ۾ ڳولهي سگهجن ٿا بجاءِ الڳ فائلن ۾.

مناسب رينڊرنگ ۽ ٽچ زومنگ کي يقيني بڻائڻ لاءِ، وييو پورٽ ميٽا ٽيگ شامل ڪريو پنھنجي <head>.

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

توهان موبائيل ڊوائيسز تي زومنگ صلاحيتن کي بند ڪري سگھو ٿا user-scalable=noviewport ميٽا ٽيگ ۾ شامل ڪندي. هي زومنگ کي غير فعال ڪري ٿو، مطلب ته صارف صرف اسڪرول ڪرڻ جي قابل آهن، ۽ نتيجن ۾ توهان جي سائيٽ کي ڪجهه وڌيڪ محسوس ٿئي ٿو جهڙوڪ مقامي ايپليڪيشن. مجموعي طور تي، اسان هر سائيٽ تي هن جي سفارش نٿا ڪريون، تنهنڪري احتياط استعمال ڪريو!

<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 ، هڪ پروجيڪٽ نيڪولس گيلاگر ۽ جوناٿن نيل جو.

ڪنٽينر

بوٽ اسٽريپ کي سائيٽ جي مواد کي لپائڻ ۽ اسان جي گرڊ سسٽم کي گھرائڻ لاءِ هڪ عنصر شامل ڪرڻ جي ضرورت آهي. توھان پنھنجي منصوبن ۾ استعمال ڪرڻ لاءِ ٻن ڪنٽينرز مان ھڪڙو چونڊي سگھوٿا. نوٽ ڪريو ته، جي ڪري padding۽ وڌيڪ، نه ته ڪنٽينر nestable آهي.

.containerهڪ جوابي مقرر چوٽي ڪنٽينر لاءِ استعمال ڪريو .

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

.container-fluidهڪ مڪمل ويڪر ڪنٽينر لاءِ استعمال ڪريو ، توهان جي ڏيکاءَ جي پوري چوٽيءَ تائين.

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

بوٽ اسٽريپ ۾ هڪ جوابي، موبائل فرسٽ فلوئڊ گرڊ سسٽم شامل آهي جيڪو مناسب طور تي 12 ڪالمن تائين ماپ ڪري ٿو جيئن ڊيوائس يا ويو پورٽ سائيز وڌائي ٿي. ان ۾ آسان لي آئوٽ آپشنز لاءِ اڳواٽ بيان ڪيل ڪلاس شامل آھن ، گڏوگڏ وڌيڪ سيمينٽڪ layouts پيدا ڪرڻ لاءِ طاقتور ميڪسين .

تعارف

گرڊ سسٽم صفحو ترتيب ڏيڻ لاءِ استعمال ڪيا ويندا آھن قطارن ۽ ڪالمن جي ھڪڙي سيريز ذريعي جيڪي توھان جي مواد کي گھرائيندا آھن. ھتي آھي ڪيئن بوٽ اسٽريپ گرڊ سسٽم ڪم ڪري ٿو:

.containerقطارن کي (مقرر ٿيل ويڪر) يا .container-fluid(مڪمل ويڪر) جي اندر مناسب ترتيب ۽ پيڊنگ لاءِ رکڻ گھرجي .
ڪالمن جا افقي گروپ ٺاهڻ لاءِ قطارون استعمال ڪريو.
مواد کي ڪالمن ۾ رکڻ گهرجي، ۽ صرف ڪالمن ئي ٿي سگهي ٿو فوري ٻارن جي قطار.
اڳواٽ بيان ڪيل گرڊ ڪلاس پسند آهن .row۽ .col-xs-4جلدي گرڊ ترتيب ٺاهڻ لاءِ موجود آهن. گھٽ مڪسين پڻ استعمال ڪري سگھجن ٿيون وڌيڪ سيمينٽڪ ترتيبن لاءِ.
ڪالم گٽر ٺاهيندا آهن (ڪالمن جي مواد جي وچ ۾ خال) ذريعي padding. اها پيڊنگ پهرين ۽ آخري ڪالمن لاءِ قطارن ۾ .rows تي منفي مارجن ذريعي بند ڪئي وئي آهي.
منفي مارجن ڇو ته هيٺ ڏنل مثال ختم ٿي ويا آهن. اهو انهي ڪري آهي ته گرڊ ڪالمن ۾ مواد غير گرڊ مواد سان ترتيب ڏنل آهي.
گرڊ ڪالم ٺاهيا ويندا آهن وضاحت ڪندي ٻارهن دستياب ڪالمن جو تعداد جيڪو توهان وڌائڻ چاهيو ٿا. مثال طور، ٽي برابر ڪالمن استعمال ڪندا 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 ڪالم جي هر پاسي تي)
Nestable	ها
آفسيٽس	ها
ڪالمن جي ترتيب	ها

مثال: اسٽيڪ ٿيل کان افقي

گرڊ طبقن جي ھڪڙي ھڪڙي سيٽ کي استعمال ڪندي .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-ڪالمن-وائڊ ڊيو هڪ نئين لڪير تي ويڙهجي وڃي ٿو هڪ ملندڙ يونٽ جي طور تي.

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

Nesting ڪالمن

پنھنجي مواد کي ڊفالٽ گرڊ سان نسٽ ڪرڻ لاءِ، موجوده ڪالمن ۾ ھڪ نئون .row۽ ڪالمن جو سيٽ شامل ڪريو . Nested قطارن ۾ ڪالمن جو ھڪڙو سيٽ شامل ڪرڻ گھرجي جيڪي 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-pull-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;

ملائيندڙ

Mixins استعمال ٿيل آھن گرڊ متغير سان گڏ انفرادي گرڊ ڪالمن لاءِ سيمينٽڪ سي ايس ايس پيدا ڪرڻ لاءِ.

// 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));
  }
}

مثال استعمال

توھان تبديل ڪري سگھوٿا متغيرن کي پنھنجي مرضي مطابق قدرن ۾، يا صرف mixins کي انھن جي ڊفالٽ ويلن سان استعمال ڪريو. ھتي ھڪڙو مثال آھي ڊفالٽ سيٽنگون استعمال ڪرڻ لاءِ ٻن ڪالمن واري ترتيب جي وچ ۾ فرق سان.

.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. Bootstrap heading ثانوي متن

h2. Bootstrap heading ثانوي متن

h3. Bootstrap heading ثانوي متن

h4. Bootstrap heading ثانوي متن

h5. Bootstrap heading ثانوي متن

h6. Bootstrap heading ثانوي متن

<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 آهي ، هڪ سانline-height 1.428 . اهو لاڳو ٿئي ٿو <body>۽ سڀني پيراگرافن تي. ان کان علاوه، <p>(پيراگرافس) انهن جي ترتيب ڏنل لڪير جي اوچائي اڌ جي هيٺئين مارجن حاصل ڪري ٿو (ڊفالٽ طور 10px).

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کي nested لاءِ وصول ڪندا آهن<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ٿورڙي ننڍڙي فونٽ-سائيز لاءِ مخفف ۾ شامل ڪريو .

ڪٽيل ماني کان وٺي HTML بهترين شيء آهي.

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

پتا

موجوده رابطي جي معلومات ويجهي ابن ڏاڏن يا ڪم جي سڄي جسم لاء. سڀني لائينن کي ختم ڪندي فارميٽنگ کي محفوظ ڪريو <br>.

Twitter، Inc.
1355 مارڪيٽ اسٽريٽ، سوٽ 900
سان فرانسسڪو، سي اي 94103
پي: (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>

بلاڪ ڪوٽا

توهان جي دستاويز ۾ ڪنهن ٻئي ذريعن کان مواد جي بلاڪ جي حوالن لاء.

ڊفالٽ بلاڪ ڪوٽ

اقتباس جي طور تي ڪنهن به HTML<blockquote> جي چوڌاري لپي . سڌي حوالن لاءِ، اسان سفارش ڪريون ٿا a .<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer 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. Integer 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. Integer posuere erat a ante.

ماخذ جي عنوان ۾ ڪو مشهور

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

لسٽون

بي ترتيب

شين جي ھڪڙي فهرست جنھن ۾ آرڊر واضح طور تي فرق نٿو ڪري.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
پريتيم نِسِل اليڪيوٽ ۾ فيڪليس
نولا volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
ايجٽ پورٽيٽر lorem

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

حڪم ڏنو

شين جي هڪ فهرست جنهن ۾ آرڊر واضح طور تي اهميت رکي ٿو.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
پريتيم نِسِل اليڪيوٽ ۾ فيڪليس
نولا volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
ايجٽ پورٽيٽر lorem

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

اڻ سڌريل

هٽايو ڊفالٽ list-style۽ کاٻي مارجن لسٽ جي شين تي (صرف فوري طور تي ٻارن لاءِ). اهو صرف فوري طور تي ٻارن جي فهرست جي شين تي لاڳو ٿئي ٿو ، مطلب ته توهان کي ڪنهن به نيسٽ ٿيل فهرستن لاءِ ڪلاس شامل ڪرڻ جي ضرورت پوندي.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
پريتيم نِسِل اليڪيوٽ ۾ فيڪليس
نولا volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
ايجٽ پورٽيٽر lorem

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

ان لائن

سڀني فهرستن جي شين کي ھڪڙي لڪير تي رکو display: inline-block;۽ ڪجھ ھلڪي پيڊنگ سان.

Lorem ipsum
Phasellus iaculis
نوڙت

<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.
مالسودا پورٽ: Etiam porta sem malesuada magna mollis euismod.

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

افقي وضاحت

شرطن ۽ وضاحتن کي <dl>قطار ۾ طرف طرف طرف ٺاهيو. ڊفالٽ <dl>s وانگر اسٽيڪ ٿيل بند شروع ٿئي ٿو، پر جڏهن نيوبار وڌندو آهي، ائين ڪريو.

وضاحت جي فهرست: وضاحت جي فهرست اصطلاحن جي وضاحت لاءِ ڀرپور آهي.
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
مالسودا پورٽ: Etiam porta sem malesuada magna mollis euismod.
Felis euismod sempre 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 = م x + ب

<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	ليري	پکي	@twitter

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

پٽي ٿيل قطارون

.table-stripedڪنهن به ٽيبل جي قطار ۾ زيبرا-اسٽريپنگ شامل ڪرڻ لاءِ استعمال ڪريو <tbody>.

ڪراس برائوزر مطابقت

پٽي ٿيل جدولن کي سي ايس ايس چونڊيندڙ ذريعي انداز ڪيو ويو :nth-childآهي، جيڪو انٽرنيٽ ايڪسپلورر 8 ۾ موجود ناهي.

#	پهريون نالو	آخري نالو	يوزر نالو
1	نشان	اوٽو	@mdo
2	جيڪب	ٿورنٽن	@ٿلهو
3	ليري	پکي	@twitter

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

بارڊر ٿيل ٽيبل

.table-borderedٽيبل ۽ سيل جي سڀني پاسن تي سرحدن لاء شامل ڪريو .

#	پهريون نالو	آخري نالو	يوزر نالو
1	نشان	اوٽو	@mdo
2	جيڪب	ٿورنٽن	@ٿلهو
3	ليري	پکي	@twitter

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

هور قطارون

شامل ڪريو .table-hoverھوور اسٽيٽ کي فعال ڪرڻ لاءِ ٽيبل جي قطارن تي <tbody>.

#	پهريون نالو	آخري نالو	يوزر نالو
1	نشان	اوٽو	@mdo
2	جيڪب	ٿورنٽن	@ٿلهو
3	ليري	پکي	@twitter

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

ٺهيل ٽيبل

.table-condensedسيل پيڊنگ کي اڌ ۾ ڪٽڻ سان ٽيبل کي وڌيڪ ٺهڪندڙ بڻائڻ لاءِ شامل ڪريو .

#	پهريون نالو	آخري نالو	يوزر نالو
1	نشان	اوٽو	@mdo
2	جيڪب	ٿورنٽن	@ٿلهو
3	ليري دي برڊ		@twitter

<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ڪلاس سان لڪايو ويو آهي.

جوابي ٽيبل

جوابي جدولن کي ٺاھيو ان .table۾ .table-responsiveويڙھڻ سان انھن کي افقي طور تي اسڪرول ڪرڻ لاءِ ننڍين ڊوائيسز تي (768px کان ھيٺ). جڏهن 768px ويڪر کان وڏي شيءِ تي ڏسي رهيا آهيو، توهان انهن جدولن ۾ ڪو به فرق نه ڏسندا.

عمودي ڪلپنگ / ڪٽڻ

جوابي ٽيبل استعمال ڪن ٿا overflow-y: hidden، جيڪو ڪنهن به مواد کي ڪلپ ڪري ٿو جيڪو ٽيبل جي هيٺان يا مٿين ڪنڊن کان ٻاهر وڃي ٿو. خاص طور تي، هي ڊراپ ڊائون مينيو ۽ ٻين ٽئين پارٽي ويجٽ کي ڪلپ ڪري سگھي ٿو.

فائر فاکس ۽ فيلڊ سيٽ

فائر فاکس وٽ ڪجھ بيحد بي ترتيب فيلڊ سيٽ اسٽائل شامل widthآھن جيڪي جوابي ٽيبل سان مداخلت ڪن ٿا. هي فائر فاڪس مخصوص هيڪ کان سواءِ اوور رائڊ نٿو ٿي سگهي جيڪو اسان بوٽ اسٽريپ ۾ مهيا نٿا ڪريون :

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

وڌيڪ معلومات لاءِ، هي پڙهو اسٽيڪ اوور فلو جواب .

#	ٽيبل جي سر	ٽيبل جي سر	ٽيبل جي سر	ٽيبل جي سر	ٽيبل جي سر	ٽيبل جي سر
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(جنهن جو هجڻ ضروري ناهي <form>) کاٻي پاسي واري ۽ ان لائن-بلاڪ ڪنٽرولن لاءِ. اهو صرف انهن فارمن تي لاڳو ٿئي ٿو ڏسڻ جي بندرگاهن اندر جيڪي گهٽ ۾ گهٽ 768px ويڪر آهن.

شايد حسب ضرورت ويڪرائي

Bootstrap ۾ ان پٽ ۽ چونڊون 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سان گرڊ قطارن جي طور تي عمل ڪرڻ ۾ تبديلي اچي ٿي، تنھنڪري ڪا ضرورت نه آھي .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>، ان پٽ گروپ جو حصو چيڪ ڪريو .

Textarea

فارم ڪنٽرول جيڪو متن جي ڪيترن ئي لائينن کي سپورٽ ڪري ٿو. 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 ملڪيت اڃا تائين معياري نه آهي ۽ مڪمل طور تي اوپيرا 18 ۽ هيٺ ڏنل، يا انٽرنيٽ ايڪسپلورر 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>(جيئن هيٺ ڏنل ڪوڊ مثال ۾ آهي)، هڪ گليفيڪون شامل ڪريو (ڪلاس استعمال ڪندي مناسب متبادل متن سان .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>

اختياري icons سان

توھان پڻ شامل ڪري سگھو ٿا اختياري موٽڻ واري آئڪن جي اضافي سان .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>

بٽڻ ٽيگ

استعمال ڪريو بٽڻ ڪلاس تي an<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>۽ <button>عناصر تي، صرف <button>عناصر اسان جي نيو ۽ نيوبار حصن ۾ سپورٽ ڪيا ويا آهن.

لنڪس بٽڻ طور ڪم ڪري رهيا آهن

جيڪڏهن <a>عناصر استعمال ڪيا وڃن بٽڻ طور ڪم ڪرڻ لاءِ - صفحي جي ڪارڪردگي کي متحرڪ ڪرڻ بجاءِ موجوده صفحي جي ڪنهن ٻئي دستاويز يا سيڪشن ڏانهن وڃڻ جي بجاءِ - انهن کي پڻ ڏنو وڃي مناسب role="button".

ڪراس برائوزر رينجرنگ

هڪ بهترين عمل جي طور تي، اسان انتهائي صلاح ڏيون ٿا <button>عنصر استعمال ڪرڻ جڏهن ممڪن هجي ملندڙ ڪراس برائوزر رينڊنگ کي يقيني بڻائي سگهجي.

ٻين شين جي وچ ۾، فائر فاڪس <30 ۾ هڪ بگ آهيline-height جيڪو اسان کي <input>-based بٽڻن کي ترتيب ڏيڻ کان روڪي ٿو ، جنهن جي ڪري اهي فائر فاکس تي ٻين بٽن جي اوچائي سان بلڪل نه ملن.

اختيارن

جلدي هڪ اسٽائل ٿيل بٽڻ ٺاهڻ لاءِ دستياب بٽڻن مان ڪنهن به ڪلاس کي استعمال ڪريو.

<!-- 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. تنهن هوندي، توهان استعمال ڪري سگهو ٿا .actives <button>(۽ شامل ڪريوaria-pressed="true" وصف شامل ڪريو) توهان کي گهرجي ته توهان کي فعال رياست کي پروگرام طور تي نقل ڪرڻ جي ضرورت آهي.

بٽڻ جو عنصر

شامل ڪرڻ جي ڪا ضرورت ناهي :activeجيئن ته اهو هڪ pseudo-ڪلاس آهي، پر جيڪڏهن توهان کي ساڳيو ظاهر ڪرڻ جي ضرورت آهي، اڳتي وڌو ۽ شامل ڪريو .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وصف شامل ڪيو ته هڪ <button>۾، انٽرنيٽ ايڪسپلورر 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جي لنڪ ڪارڪردگيءَ کي غير فعال ڪرڻ جي لاءِ <a>، پر اها CSS ملڪيت اڃا معياري نه آهي ۽ اوپيرا 18 ۽ هيٺان، يا انٽرنيٽ ايڪسپلورر 11 ۾ مڪمل طور تي سپورٽ نه ڪئي وئي آهي. ان کان علاوه، انهن برائوزرن ۾ به جيڪي سپورٽ ڪندا آهن pointer-events: none، ڪي بورڊ نيويگيشن بي اثر رهي ٿي، مطلب ته ڏسندڙ ڪيبورڊ استعمال ڪندڙ ۽ مددگار ٽيڪنالاجي جا استعمال ڪندڙ اڃا به انهن لنڪ کي چالو ڪري سگهندا. سو محفوظ ٿيڻ لاءِ، استعمال ڪريو ڪسٽم جاوا اسڪرپٽ اهڙن لنڪن کي غير فعال ڪرڻ لاءِ.

جوابي تصويرون

.img-responsiveBootstrap 3 ۾ تصويرون ڪلاس جي اضافي ذريعي جوابي دوست بڻائي سگهجن ٿيون . اهو لاڳو ٿئي ٿو max-width: 100%;، height: auto;۽ display: block;تصوير تي ته جيئن اهو چڱي طرح ماپيندڙ عنصر ڏانهن.

تصويرن کي مرڪز ڪرڻ لاءِ جيڪي .img-responsiveڪلاس استعمال ڪن ٿا، .center-blockان جي بدران استعمال ڪريو .text-center. ڏسو مددگار ڪلاس سيڪشن.center-block استعمال بابت وڌيڪ تفصيل لاءِ .

SVG تصويرون ۽ IE 8-10

انٽرنيٽ ايڪسپلورر 8-10 ۾، SVG تصويرون سان گڏ .img-responsiveغير متناسب سائيز آهن. هن کي درست ڪرڻ لاء، شامل ڪريو width: 100% \9;جتي ضروري هجي. بوٽ اسٽريپ پاڻمرادو لاڳو نٿو ٿئي ڇاڪاڻ ته اهو ٻين تصويري فارميٽ ۾ پيچيدگين جو سبب بڻجندو آهي.

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

تصويري شڪلون

<img>ڪنهن به پروجيڪٽ ۾ تصويرن کي آساني سان انداز ڪرڻ لاءِ عنصر ۾ ڪلاس شامل ڪريو .

ڪراس برائوزر مطابقت

ذهن ۾ رکو ته انٽرنيٽ ايڪسپلورر 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مخصوص مسئلن کان بچڻ لاء شامل آهي. ڪلاس پڻ استعمال ڪري سگھجن ٿا mixins طور.

<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. هڪ mixin ۽ طبقي جي طور تي دستياب آهي.

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

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

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

صاف ڪرڻ

آساني سان صاف ڪريو floats کي شامل .clearfix ڪرڻ سان . استعمال ڪيو مائڪرو ڪليئر فڪس جيئن مشهور ڪيو ويو نيڪولس گالاگير . اهو به هڪ mixin طور استعمال ڪري سگهجي ٿو.

<!-- 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مخصوص تڪرارن کان بچڻ لاءِ، جيئن تڪڙو فلوٽس . اهي صرف بلاڪ ليول ٽوگلنگ لاءِ موجود آهن. اهي به mixins طور استعمال ڪري سگهجي ٿو.

.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ضروري آھي ھيٺ ڏنل پھچ جي بھترين عملن لاءِ . پڻ mixins طور استعمال ڪري سگهجي ٿو.

<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, and .visible-xs-inline-block.

ڪلاسز .visible-xs, .visible-sm, .visible-md, and .visible-lgalso موجود آهن، پر ختم ٿيل آهن جيئن v3.2.0 . اهي لڳ ڀڳ برابر آهن .visible-*-block، سواءِ اضافي خاص ڪيسن جي ٽوگلنگ <table>سان لاڳاپيل عنصرن جي.

پرنٽ ڪلاس

عام جوابي طبقن وانگر، انهن کي پرنٽ لاءِ مواد ٽوگل ڪرڻ لاءِ استعمال ڪريو.

ڪلاس	برائوزر	ڇپائي
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	لڪيل	ڏيکاءُ
`.hidden-print`	ڏيکاءُ	لڪيل

ڪلاس .visible-printپڻ موجود آهي پر 3.2.0 جي طور تي ختم ٿيل آهي. اهو لڳ ڀڳ برابر آهي .visible-print-block، سواءِ اضافي خاص ڪيسن <table>لاءِ- لاڳاپيل عنصرن لاءِ.

ٽيسٽ ڪيس

جوابي يوٽيلٽي ڪلاسز کي جانچڻ لاءِ پنھنجي برائوزر کي ري سائز ڪريو يا مختلف ڊوائيسز تي لوڊ ڪريو.

تي ڏسڻ ۾ اچي ٿو ...

سائي چيڪ مارڪ ظاهر ڪن ٿا ته عنصر توهان جي موجوده ويوپورٽ ۾ نظر اچي رهيو آهي .

اضافي ننڍو ✔ x-small تي ڏسڻ ۾ اچي ٿو

ننڍو ✔ ننڍي تي ڏسڻ ۾ اچي ٿو

وچولي ✔ وچولي تي ڏسڻ ۾ اچي ٿو

وڏو ✔ وڏي تي ڏسڻ ۾ اچي ٿو

اضافي ننڍو ۽ ننڍو ✔ x-small and small تي ڏسڻ ۾ اچي ٿو

وچولي ۽ وڏي ✔ وچولي ۽ وڏي تي ڏسڻ ۾ اچي ٿو

اضافي ننڍو ۽ وچولي ✔ x-ننڍو ۽ وچولي تي ڏسڻ ۾ اچي ٿو

ننڍو ۽ وڏو ✔ ننڍي ۽ وڏي تي نظر اچي ٿي

اضافي ننڍو ۽ وڏو ✔ x-ننڍي ۽ وڏي تي ڏسڻ ۾ اچي ٿو

ننڍو ۽ وچولي ✔ ننڍي ۽ وچولي تي نظر اچي ٿو

تي لڪايو...

هتي، سائي چيڪ مارڪ پڻ ظاهر ڪن ٿا ته عنصر لڪيل آهي توهان جي موجوده ڏيک پورٽ ۾.

اضافي ننڍو ✔ x-small تي لڪيل

ننڍو ✔ ننڍي تي لڪيل

وچولي ✔ وچولي تي لڪيل

وڏو ✔ وڏي ۾ لڪيل

اضافي ننڍو ۽ ننڍو ✔ لڪايو x-ننڍو ۽ ننڍو تي

وچولي ۽ وڏي ✔ وچولي ۽ وڏي ۾ لڪيل

اضافي ننڍو ۽ وچولي ✔ لڪايو x-ننڍو ۽ وچولي تي

ننڍو ۽ وڏو ✔ ننڍي ۽ وڏي ۾ لڪيل

اضافي ننڍو ۽ وڏو ✔ لڪايو x-ننڍو ۽ وڏو

ننڍو ۽ وچولي ✔ ننڍو ۽ وچولي تي لڪايو

بوٽ اسٽريپ جي سي ايس ايس تي ٺهيل آهي گهٽ، هڪ پري پروسيسر اضافي ڪارڪردگي جهڙوڪ متغير، ميڪسينز، ۽ سي ايس ايس کي گڏ ڪرڻ لاءِ افعال. جيڪي اسان جي مرتب ڪيل CSS فائلن جي بدران ماخذ گھٽ فائلون استعمال ڪرڻ جي ڪوشش ڪري سگھن ٿا، اسان جي فريم ورڪ ۾ استعمال ٿيندڙ ڪيترن ئي متغيرن ۽ ميڪسين کي استعمال ڪري سگھن ٿا.

گرڊ متغير ۽ ميڪسينز گرڊ سسٽم سيڪشن ۾ ڍڪيل آهن .

بوٽ اسٽريپ گڏ ڪرڻ

Bootstrap استعمال ڪري سگھجي ٿو گھٽ ۾ گھٽ ٻن طريقن سان: مرتب ڪيل CSS سان يا ماخذ سان گھٽ فائلون. گھٽ فائلن کي گڏ ڪرڻ لاءِ، شروع ڪرڻ واري سيڪشن کي ڏسو ته ڪيئن سيٽ اپ ڪجي توھان جي ڊولپمينٽ ماحول کي ضروري حڪمن کي هلائڻ لاءِ.

ٽئين پارٽي جي تاليف جا اوزار Bootstrap سان ڪم ڪري سگھن ٿا، پر اھي اسان جي بنيادي ٽيم پاران سپورٽ نه آھن.

متغير

متغير سڄي پروجيڪٽ ۾ استعمال ڪيا ويندا آهن مرڪزي ۽ شيئر ڪرڻ جي طريقي سان عام طور تي استعمال ٿيل قدرن جهڙوڪ رنگ، فاصلو، يا فونٽ اسٽيڪ. مڪمل ٽوڙڻ لاءِ، مھرباني ڪري ڏسو ڪسٽمائيزر .

رنگ

آساني سان استعمال ڪريو ٻه رنگ اسڪيمون: گري اسڪيل ۽ سيمينٽڪ. گريس اسڪيل رنگ عام طور تي استعمال ٿيل ڪاري رنگن تائين جلدي رسائي فراهم ڪن ٿا جڏهن ته سيمينٽڪ ۾ مختلف رنگ شامل آهن جيڪي بامعني لاڳاپيل قدرن لاءِ مقرر ڪيا ويا آهن.

@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";

اجزاء

Bootstrap ۾ اجزاء عام قدرن کي ترتيب ڏيڻ لاءِ ڪجھ ڊفالٽ متغير استعمال ڪندا آھن. هتي سڀ کان عام استعمال ٿيل آهن.

@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 ۾ سڀني لاڳاپيل وينڊرز جي اڳڪٿين کي شامل ڪندي ڪيترن ئي برائوزرن جي مدد ڪرڻ لاءِ وينڊرز ميڪسينس ميڪسين آهن.

دٻي جي ماپ

پنھنجي اجزاء جي باڪس ماڊل کي ھڪڙي ميڪن سان ري سيٽ ڪريو. حوالي لاءِ، ڏسو هي مددگار مضمون Mozilla کان .

ميڪسين کي ختم ڪيو ويو آهي v3.2.0 جي طور تي، Autoprefixer جي تعارف سان. پسمانده-مطابقت کي محفوظ ڪرڻ لاءِ، بوٽ اسٽريپ، Bootstrap 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 جي طور تي، ڇو ته بوٽ اسٽريپ سرڪاري طور تي پراڻي پليٽ فارمن کي سپورٽ نٿو ڪري جيڪي معياري ملڪيت جي حمايت نٿا ڪن. پسمانده-مطابقت کي محفوظ ڪرڻ لاءِ، بوٽ اسٽريپ، Bootstrap 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;
}

منتقلي

لچڪداريءَ لاءِ گھڻا مکڻ. سڀني منتقلي جي معلومات کي ھڪڙي سان سيٽ ڪريو، يا ضرورت مطابق الڳ دير ۽ مدت بيان ڪريو.

آٽوپريفيڪسر جي تعارف سان، v3.2.0 جي طور تي ميڪسين کي ختم ڪيو ويو آهي. پسمانده-مطابقت کي محفوظ ڪرڻ لاءِ، بوٽ اسٽريپ اندروني طور تي ميڪسين کي استعمال ڪرڻ جاري رکندو جيستائين Bootstrap 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;
}

ٽٽڻ وارو متن

آساني سان متن کي ڪٽ ڪريو هڪ ايلپسس سان هڪ واحد ميڪسين سان. عنصر يا سطح جي ضرورت آهي .blockinline-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-based سسٽم سان مطابقت رکي ٿي.

رستو	وصف
`lib/`	روبي گيم ڪوڊ (ساس جي ترتيب، ريل ۽ کمپاس انضمام)
`tasks/`	ڪنورٽر اسڪرپٽ (ساس تائين اپ اسٽريم گھٽ)
`test/`	گڏ ڪرڻ جا امتحان
`templates/`	کمپاس پيڪيج ظاهر
`vendor/assets/`	Sass، JavaScript، ۽ فونٽ فائلون
`Rakefile`	اندروني ڪم، جهڙوڪ ريڪ ۽ ڪنورٽ

انهن فائلن کي عمل ۾ ڏسڻ لاءِ Sass پورٽ جي GitHub مخزن جو دورو ڪريو .

تنصيب

ساس لاءِ بوٽ اسٽريپ کي ڪيئن انسٽال ڪجي ۽ استعمال ڪجي، ان بابت معلومات لاءِ، گيٽ هب ريپوزٽري پڙهڻ سان صلاح ڪريو . اهو سڀ کان تازو ذريعو آهي ۽ ان ۾ ريل، ڪمپاس، ۽ معياري Sass منصوبن سان استعمال لاءِ معلومات شامل آهي.

Sass لاء بوٽ اسٽريپ

سي ايس ايس

اوسر

HTML5 doctype

موبائل پهريون

ٽائپوگرافي ۽ لنڪس

Normalize.css

ڪنٽينر

گرڊ سسٽم

تعارف

ميڊيا جا سوال

گرڊ جا اختيار

مثال: اسٽيڪ ٿيل کان افقي

مثال: سيال ڪنٽينر

مثال: موبائل ۽ ڊيسڪ ٽاپ

مثال: موبائل، ٽيبليٽ، ڊيسڪ ٽاپ

مثال: ڪالمن لفافي

جوابي ڪالمن ري سيٽ

ڪالمن کي ترتيب ڏيڻ

Nesting ڪالمن

ڪالمن جي ترتيب

گھٽ ملائيندڙ ۽ متغير

متغير

ملائيندڙ

مثال استعمال

ٽائپوگرافي

مٿاڇري

h1. بوٽ اسٽريپ سرنگ

h2. بوٽ اسٽريپ سرنگ

h3. بوٽ اسٽريپ سرنگ

h4. بوٽ اسٽريپ سرنگ

h5. بوٽ اسٽريپ سرنگ

h6. بوٽ اسٽريپ سرنگ

h1. Bootstrap heading ثانوي متن

h2. Bootstrap heading ثانوي متن

h3. Bootstrap heading ثانوي متن

h4. Bootstrap heading ثانوي متن

h5. Bootstrap heading ثانوي متن

h6. Bootstrap heading ثانوي متن

جسم جي ڪاپي

ليڊ جسم جي ڪاپي

گھٽ سان ٺهيل

ان لائن ٽيڪسٽ عناصر

نشان لڳل متن

حذف ٿيل متن

سخت متن

داخل ٿيل متن

هيٺ ڏنل متن

ننڍو متن

بزدل

اٽالڪ

متبادل عناصر

ترتيب ڏيڻ وارا ڪلاس

ٽرانسفارميشن ڪلاس

مخففات

بنيادي مخفف

ابتڙ

پتا

بلاڪ ڪوٽا

ڊفالٽ بلاڪ ڪوٽ

بلاڪ ڪوٽ جا اختيار

ماخذ جو نالو ڏيڻ

متبادل ڏيکاري

لسٽون

بي ترتيب

حڪم ڏنو

اڻ سڌريل

ان لائن

وصف

افقي وضاحت

خودڪار ٽڪرائڻ

ڪوڊ

ان لائن

استعمال ڪندڙ ان پٽ

بنيادي بلاڪ

متغير

نموني جي پيداوار

ٽيبل

بنيادي مثال

پٽي ٿيل قطارون

ڪراس برائوزر مطابقت

ڊيمو `:focus`رياست

جي لنڪ جي ڪارڪردگي بابت خبردار`<a>`

`.sr-only`لڪيل ليبلن سان اختياري آئڪن