د بوټسټریپ د زیربنا کلیدي برخو کې ټیټ ټیټ ترلاسه کړئ ، پشمول د غوره ، ګړندي او قوي ویب پراختیا لپاره زموږ چلند.

HTML5 doctype

بوټسټریپ د ځانګړو HTML عناصرو او سی ایس ایس ملکیتونو څخه کار اخلي چې د HTML5 doctype کارولو ته اړتیا لري. دا ستاسو د ټولو پروژو په پیل کې شامل کړئ.

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

لومړی موبایل

د بوټسټریپ 2 سره، موږ د چوکاټ کلیدي اړخونو لپاره اختیاري ګرځنده دوستانه سټایلونه اضافه کړل. د Bootstrap 3 سره، موږ پروژه له پیل څخه د ګرځنده دوستانه کولو لپاره بیا لیکلې ده. د اختیاري ګرځنده سټایلونو اضافه کولو پرځای ، دوی په اصلي برخه کې پخ شوي. په حقیقت کې، بوټسټریپ لومړی ګرځنده ده . د ګرځنده لومړي سټایلونه د جلا فایلونو پرځای په ټول کتابتون کې موندل کیدی شي.

د مناسب رینډینګ او ټچ زوم کولو ډاډ ترلاسه کولو لپاره ، د ویو پورټ میټا ټګ خپل <head>.

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

user-scalable=noتاسو کولی شئ د ویو پورټ میټا ټګ کې اضافه کولو سره په ګرځنده وسیلو کې د زوم کولو وړتیاوې غیر فعال کړئ . دا زوم کول غیر فعالوي، پدې معنی چې کاروونکي یوازې د سکرول کولو توان لري، او ستاسو سایټ د اصلي غوښتنلیک په څیر یو څه نور احساس کوي. په ټوله کې، موږ دا په هر سایټ کې وړاندیز نه کوو، نو له احتیاط څخه کار واخلئ!

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

ټایپوګرافي او لینکونه

بوټسټریپ بنسټیز نړیوال نندارتون، ټایپوګرافي، او د لینک سټایلونه ټاکي. په ځانګړې توګه، موږ:

background-color: #fff;په کې تنظیم کړئbody
زموږ د ټایپوګرافیک اساس په توګه @font-family-base، @font-size-base، او ځانګړتیاوې وکاروئ@line-height-base
د نړیوال لینک رنګ له لارې تنظیم کړئ @link-colorاو یوازې د لینک لاندې لاینونه پلي کړئ:hover

دا سټایلونه دننه موندل کیدی شي scaffolding.less.

Normalize.css

د ښه کراس براوزر رینډرینګ لپاره، موږ Normalize.css کاروو ، د نیکولاس ګالاګر او جوناتن نیل لخوا یوه پروژه .

کانټینرونه

بوټسټریپ د سایټ مینځپانګې وتړلو او زموږ د ګریډ سیسټم ځای په ځای کولو لپاره لرونکي عنصر ته اړتیا لري. تاسو کولی شئ په خپلو پروژو کې د کارولو لپاره له دوو کانټینرونو څخه یو غوره کړئ. په یاد ولرئ، د paddingاو نورو له امله، هیڅ کانټینر د نس ناستې وړ نه دی.

.containerد ځواب ویونکي ثابت پلن کانټینر لپاره وکاروئ .

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

د بشپړ عرض کانټینر لپاره وکاروئ .container-fluid، ستاسو د لید پورټ ټول پلنوالی.

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

بوټسټریپ کې یو ځواب ویونکی، ګرځنده لومړی مایع گرډ سیسټم شامل دی چې په مناسبه توګه تر 12 کالمونو پورې اندازه کوي لکه څنګه چې د وسیلې یا لید پورټ اندازه ډیریږي. پدې کې د اسانه ترتیب انتخابونو لپاره دمخه تعریف شوي ټولګي شامل دي ، په بیله بیا د ډیرو سیمانټیک ترتیبونو رامینځته کولو لپاره قوي مکسینونه .

پیژندنه

د ګریډ سیسټمونه د قطارونو او کالمونو د لړۍ له لارې د پاڼې ترتیبونو جوړولو لپاره کارول کیږي چې ستاسو مینځپانګه لري. دلته د بوټسټریپ گرډ سیسټم څنګه کار کوي:

قطارونه باید د .container(ثابت شوي چوکۍ) یا .container-fluid(بشپړ چوکۍ) په اوږدو کې د مناسب ترتیب او پیډینګ لپاره ځای په ځای شي.
د کالمونو افقی ګروپونو جوړولو لپاره قطارونه وکاروئ.
مواد باید په کالمونو کې ځای په ځای شي، او یوازې کالمونه د قطارونو سمدستي ماشومان وي.
د مخکینۍ تعریف شوي گرډ ټولګي لکه .rowاو .col-xs-4د ګړندي گرډ ترتیبونو جوړولو لپاره شتون لري. لږ مکسین هم د ډیرو سیمانټیک ترتیبونو لپاره کارول کیدی شي.
کالمونه ګټرونه رامینځته کوي (د کالم مینځپانګې ترمینځ خلا padding) .rowدا پیډینګ په s کې د منفي حاشیې له لارې د لومړي او وروستي کالم لپاره په قطارونو کې تنظیم شوی .
منفي حاشیه دا ده چې ولې لاندې مثالونه لرې شوي دي. دا د دې لپاره ده چې د ګریډ کالمونو مینځپانګه د غیر گرډ مینځپانګې سره قطع شوې.
د ګریډ کالمونه د دولس موجود کالمونو شمیر مشخص کولو سره رامینځته کیږي چې تاسو یې اوږده کول غواړئ. د مثال په توګه، درې مساوي کالمونه به درې کاروي .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د وسیلو محدود سیټ ته د CSS محدودولو لپاره شامل کړو.

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

د ګریډ اختیارونه

وګورئ چې څنګه د بوټسټریپ گرډ سیسټم اړخونه د یو لاسي میز سره په ډیری وسیلو کې کار کوي.

	اضافي کوچني وسایل تلیفونونه (<768px)	د کوچنیو وسایلو ټابلیټونه (≥768px)	د منځنیو وسایلو ډیسټاپونه (≥992px)	د لویو وسایلو ډیسټاپونه (≥1200px)
د ګریډ چلند	په هر وخت کې افقی	د پیل کولو لپاره سقوط شوی، د بریک پواینټ پورته افقی
د کانټینر عرض	هیڅ نه (آټو)	750px	970px	1170px
د ټولګي مخفف	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
د کالمونو #	12
د کالم عرض	اتومات	~62px	~81px	~97px
د ګتر پلنوالی	30px (د کالم په هر اړخ کې 15px)
نیستنی وړ	هو
آفسیټس	هو
د کالم ترتیب کول	هو

بېلګه: له افقی څخه ډډ شوی

د .col-md-*ګریډ ټولګیو یو واحد سیټ په کارولو سره، تاسو کولی شئ یو بنسټیز ګریډ سیسټم رامینځته کړئ چې په ډیسټاپ (متوسطه) وسیلو کې افقی کیدو دمخه په ګرځنده وسیلو او ټابلیټ وسیلو (اضافي کوچني څخه کوچني رینج) کې سټک شوي پیل کیږي. د ګریډ کالمونه په هر ځای کې ځای په ځای کړئ .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

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

بېلګه: د مایع کانتینر

هر یو ثابت پلنوالی ګریډ ترتیب په بشپړ چوکۍ ترتیب کې بدل کړئ د خپل بهر .containerته په بدلولو سره .container-fluid.

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

بېلګه: موبایل او ډیسټاپ

ایا نه غواړئ چې ستاسو کالمونه په ساده ډول په کوچنیو وسیلو کې ذخیره شي؟ .col-xs-* .col-md-*په خپلو کالمونو کې اضافه کولو سره د اضافي کوچني او متوسط وسیلو گرډ ټولګي وکاروئ . د ښه نظر لپاره لاندې مثال وګورئ چې دا ټول څنګه کار کوي.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

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

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

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

بېلګه: موبایل، ټابلیټ، ډیسټاپ

.col-sm-*د ټابلیټ ټولګیو سره حتی ډیر متحرک او ځواکمن ترتیبونو رامینځته کولو سره په تیرو مثال کې جوړ کړئ .

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

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

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

بېلګه: د کالم لپاس کول

که چیرې له 12 څخه ډیر کالمونه په یوه قطار کې ځای په ځای شي، د اضافي کالمونو هر ګروپ به، د یو واحد په توګه، په نوې کرښه کې وتړل شي.

.col-xs-9

.col-xs-4
له 9 + 4 = 13 > 12 راهیسې، دا 4-کالم پراخه div د یو متضاد واحد په توګه په نوې کرښه کې پوښل کیږي.

.col-xs-6
ورپسې کالمونه د نوې کرښې په اوږدو کې دوام لري.

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

ځواب ورکوونکي کالم بیا تنظیموي

د څلورو درجو گرډونو شتون سره تاسو مجبور یاست چې مسلو ته ورسیږئ چیرې چې په ځینو وقفو کې ستاسو کالمونه په سمه توګه نه روښانه کیږي ځکه چې یو له بل څخه لوړ دی. د دې د حل کولو لپاره ، د a .clearfixاو زموږ د ځواب ویونکي کارونې ټولګیو ترکیب وکاروئ .

.col-xs-6 .col-sm-3
خپل لید پورټ اندازه کړئ یا په خپل تلیفون کې د مثال لپاره وګورئ.

.col-xs-6 .col-sm-3

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

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

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

د ځواب ویونکي وقفې نقطو کې د کالم پاکولو سربیره، تاسو ممکن د آفسیټونو، فشارونو، یا پلونو بیا تنظیم کولو ته اړتیا ولرئ . دا د گرډ مثال کې په عمل کې وګورئ .

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

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

ګترونه لرې کړئ

ګټرونه له یو قطار څخه لرې کړئ او دا د .row-no-guttersټولګي سره کالمونه دي.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

د کالمونو بندول

.col-md-offset-*کالمونه د ټولګیو په کارولو سره ښي خوا ته حرکت وکړئ . دا ټولګي د کالم په واسطه د کالم کیڼ اړخ ته وده ورکوي *. د مثال په توګه، په څلورو کالمونو کې .col-md-offset-4حرکت کوي ..col-md-4

.col-md-4

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

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

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

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

.col-*-offset-0تاسو کولی شئ د ټولګیو سره د ټیټ گرډ ټایرونو څخه آفسیټونه هم پورته کړئ .

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

د ځنځیرونو کالمونه

د ډیفالټ گرډ سره ستاسو مینځپانګې د ځړولو لپاره ، په موجوده کالم کې .rowد کالمونو نوی او سیټ اضافه کړئ . په نیست شوي قطارونو کې باید د کالمونو سیټ شامل وي چې تر 12 یا لږو پورې اضافه کوي (دا اړینه نده چې تاسو ټول 12 موجود کالمونه وکاروئ)..col-sm-*.col-sm-*

کچه 1: .col-sm-9

کچه 2: .col-xs-8 .col-sm-6

کچه 2: .col-xs-4 .col-sm-6

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

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

په اسانۍ سره زموږ د جوړ شوي گرډ کالمونو ترتیب .col-md-push-*او .col-md-pull-*ترمیم کونکي ټولګیو سره بدل کړئ.

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

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

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

لږ مخلوط او متغیرات

د ګړندي ترتیبونو لپاره د دمخه جوړ شوي گرډ ټولګیو سربیره ، بوټسټریپ کې ستاسو خپل ساده ، سیمانټیک ترتیب ګړندي رامینځته کولو لپاره لږ متغیرونه او مکسین شامل دي.

متغیرات

متغیرات د کالمونو شمیر، د ګټر پلنوالی، او د میډیا د پوښتنې نقطه ټاکي چې په کوم ځای کې د تللو کالمونو پیل کول. موږ دا د پورته مستند شوي دمخه تعریف شوي گرډ ټولګیو رامینځته کولو لپاره کاروو ، په بیله بیا د لاندې لیست شوي دودیز مکسینونو لپاره.

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

مکسین

مکسین د ګریډ متغیرونو سره په ګډه کارول کیږي ترڅو د انفرادي گرډ کالمونو لپاره سیمانټیک سی ایس ایس رامینځته کړي.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

د کارولو بېلګه

تاسو کولی شئ متغیرونه خپل دودیز ارزښتونو ته بدل کړئ، یا یوازې د دوی د ډیفالټ ارزښتونو سره مکسین وکاروئ. دلته د دوه کالم ترتیب رامینځته کولو لپاره د ډیفالټ تنظیماتو کارولو مثال دی چې تر مینځ واټن لري.

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

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

سرلیکونه

ټول HTML سرلیکونه، <h1>له لارې <h6>، شتون لري. .h1د ټولګیو له لارې .h6هم شتون لري، د دې لپاره کله چې تاسو غواړئ د سرلیک فونټ سټایل سره سمون ولرئ مګر بیا هم غواړئ ستاسو متن په انلاین کې ښودل شي.

h1. د بوټسټراپ سرلیک	سیمبولډ 36px
h2. د بوټسټراپ سرلیک	سیمبولډ 30px
h3. د بوټسټراپ سرلیک	سیمبولډ 24px
h4. د بوټسټراپ سرلیک	Semibold 18px
h5. د بوټسټراپ سرلیک	Semibold 14px
h6. د بوټسټراپ سرلیک	سیمبولډ 12px

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

<small>په هر سرلیک کې د عمومي ټګ یا .smallټولګي سره روښانه، ثانوي متن جوړ کړئ .

h1. د بوټسټریپ سرلیک دوهم متن

h2. د بوټسټریپ سرلیک دوهم متن

h3. د بوټسټریپ سرلیک دوهم متن

h4. د بوټسټریپ سرلیک دوهم متن

h5. د بوټسټریپ سرلیک دوهم متن

h6. د بوټسټریپ سرلیک دوهم متن

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

د بدن کاپي

د بوټسټریپ نړیوال ډیفالټ 14pxfont-size دی ، د 1.428 سره . دا په ټولو پراګرافونو کې پلي کیږي. برسېره پر دې، (پراګرافونه) د دوی د حساب شوي کرښې - لوړوالی نیمایي ټیټ حاشیه ترلاسه کوي (د ډیفالټ له مخې 10px).line-height<body><p>

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

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

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

<p>...</p>

د مشر بدن کاپي

یو پراګراف په اضافه کولو سره څرګند کړئ .lead.

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

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

د کم سره جوړ شوی

د ټایپوګرافیک پیمانه په variables.less کې د دوه لږ متغیرونو پراساس ده : @font-size-baseاو @line-height-base. لومړی د بیس فونټ اندازه ده چې په اوږدو کې کارول کیږي او دوهم د بیس لاین لوړوالی دی. موږ دا متغیرونه او یو څه ساده ریاضی کاروو ترڅو زموږ د ټولو ډولونو حاشیو ، پیډینګونو ، او لاین لوړوالی رامینځته کړو. دوی تنظیم کړئ او بوټسټریپ موافقت کوي.

د انلاین متن عناصر

نښه شوی متن

په بل شرایطو کې د هغې د تړاو له امله د متن د چلولو روښانه کولو لپاره، <mark>ټګ وکاروئ.

تاسو کولی شئ د نښه نښه وکاروئروښانه کولمتن

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

ړنګ شوی متن

د متن د بلاکونو د ښودلو لپاره چې حذف شوي دي <del>ټاګ وکاروئ.

~~د متن دا کرښه د حذف شوي متن په توګه درملنه کیږي.~~

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

د اعتصاب متن

د متن د بلاکونو د ښودلو لپاره چې نور اړین ندي د <s>ټاګ وکاروئ.

~~د متن دا کرښه د دې لپاره ده چې نور دقیق نه وي.~~

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

داخل شوی متن

په سند کې د اضافې ښودلو لپاره <ins>ټګ وکاروئ.

د متن دا کرښه د دې لپاره ده چې د سند سره د اضافي په توګه چلند وشي.

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

لاندې متن

د متن د لاندې کولو لپاره <u>ټګ وکاروئ.

د متن دا کرښه به د لاندې لیکې په توګه وړاندې شي

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

د سپک وزن سټایلونو سره د HTML د ډیفالټ ټینګار ټاګونو څخه کار واخلئ.

کوچنی متن

د متن په انلاین یا بلاکونو کې د ټینګار کولو لپاره، د <small>85٪ متن اندازه کولو لپاره ټګ وکاروئ. font-sizeد سرلیک عناصر د ځړول شوي عناصرو لپاره خپل ترلاسه کوي <small>.

.smallتاسو کولی شئ په بدیل سره د هر یو په ځای کې انلاین عنصر وکاروئ <small>.

د متن دا کرښه د ښه چاپ په توګه درملنه کیږي.

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

بولډ

د ډیر وزن لرونکي فونټ وزن سره د متن یوه ټوټه ټینګار کولو لپاره.

د متن لاندې برخه د بولډ متن په توګه وړاندې کیږي .

<strong>rendered as bold text</strong>

ایټالیکی

د ایټالیکو سره د متن یوه ټوټه ټینګار کولو لپاره.

د متن لاندې برخه د ایتالیک متن په توګه وړاندې کیږي .

<em>rendered as italicized text</em>

بدیل عناصر

د کارولو لپاره وړیا احساس وکړئ <b>او <i>په HTML5 کې. <b>د اضافي اهمیت رسولو پرته د کلمو یا جملو روښانه کول دي پداسې حال <i>کې چې ډیری یې د غږ، تخنیکي اصطلاحاتو او نورو لپاره دي.

د سمون ټولګي

په اسانۍ سره متن اجزاو ته د متن ترتیب کولو ټولګیو سره تنظیم کړئ.

کیڼ اړخ ته متن

په منځ کې ترتیب شوی متن.

ښي اړخ ته متن.

توجیه شوی متن.

هیڅ لپټ متن نشته.

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

د بدلون ټولګي

متن په اجزاوو کې د متن د کیپیټل کولو ټولګیو سره بدل کړئ.

ټيټ لاسي متن.

لوی متن.

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

لنډیزونه

<abbr>د مخففاتو او مخففاتو لپاره د HTML عنصر سټایل شوي پلي کول ترڅو په هور کې پراخه شوې نسخه وښیې. د ځانګړتیاو سره لنډیزونه titleپه هور کې د سپک ټکي لاندې سرحد او د مرستې کرسر لري، په هور کې اضافي شرایط چمتو کوي او د مرستندویه ټیکنالوژیو کاروونکو ته.

بنسټیز لنډیز

د کلمې د صفت لنډیز attr دی .

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

ابتکار

.initialismد یو څه کوچني فونټ اندازې لپاره په لنډیز کې اضافه کړئ .

HTML د ټوټې شوي ډوډۍ څخه غوره شی دی.

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

ادرسونه

د نږدې پلار یا د کار ټول بدن لپاره د اړیکو معلومات وړاندې کړئ. د ټولو لینونو په پای ته رسولو سره فارمینګ خوندي کړئ <br>.

ټویټر، Inc.
1355 بازار کوڅه، سویټ 900
سان فرانسسکو، CA 94103
P: (123) 456-7890

بشپړ نوم
[email protected]

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

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

بلاک کوټونه

ستاسو په سند کې د بلې سرچینې څخه د مینځپانګو بلاکونو حواله کولو لپاره.

ډیفالټ بلاک اقتباس

د اقتباس په توګه د <blockquote>هر HTML شاوخوا وپلټئ . د مستقیم نرخونو لپاره ، موږ وړاندیز کوو a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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
Facilisis in pretium nisl aliquet
نولا ولتپت علیکم velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

امر وکړ

د توکو لیست په کوم کې چې امر په ښکاره ډول مهم دی.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
نولا ولتپت علیکم velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

بې سټایل

list-styleد لیست په توکو کې ډیفالټ او کیڼ حاشیه لرې کړئ (یوازې سمدستي ماشومان). دا یوازې د سمدستي ماشومانو لیست توکو باندې پلي کیږي ، پدې معنی چې تاسو به اړتیا ولرئ د هرډول لیست شوي لیستونو لپاره ټولګي هم اضافه کړئ.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
نولا ولتپت علیکم velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

انلاین

ټول لیست توکي په یوه کرښه کې ځای په ځای کړئ display: inline-block;او یو څه سپک پیډینګ سره.

Lorem ipsum
Phasellus iaculis
نولا ولټوپټ

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

تفصیل

د دوی اړوند توضیحاتو سره د شرایطو لیست.

د توضیحاتو لیست: د توضیحاتو لیست د شرایطو تعریف کولو لپاره مناسب دی.
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

افقی توضیحات

شرایط او توضیحات په <dl>څنګ کې په قطار کې جوړ کړئ. د ډیفالټ <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.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod sempre eget lacinia: Fusce dapibus، telus ac cursus commodo، tortor mauris condimentum nibh، ut fermentum massa justo sit amet risus.

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

په اتوماتيک ډول پرې کول

د افقی توضیحاتو لیستونه به هغه شرایط لنډ کړي چې په کیڼ کالم کې د فټ کولو لپاره خورا اوږد وي text-overflow. په تنګ لیدونو کې، دوی به د ډیفالټ سټیک شوي ترتیب ته بدل شي.

انلاین

د کوډ انلاین ټوټې په سره وتړئ <code>.

د مثال په توګه، <section>باید د انلاین په توګه وپلټل شي.

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

د کارن داخلول

د ننوتلو څرګندولو لپاره وکاروئ <kbd>چې معمولا د کیبورډ له لارې داخلیږي.

د لارښودونو بدلولو لپاره ، cdد لارښود نوم تعقیب کړئ.
د تنظیماتو سمولو لپاره، فشار ورکړئ ctrl + ,

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

بنسټیز بلاک

<pre>د کوډ ډیری لینونو لپاره وکاروئ . ډاډ ترلاسه کړئ چې د مناسب رینډرینګ لپاره په کوډ کې د هرې زاویې بریکٹ څخه تیښته وکړئ.

<p>د متن نمونه دلته...</p>

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

تاسو کولی شئ په اختیاري ډول .pre-scrollableټولګي اضافه کړئ، کوم چې به د 350px اعظمي لوړوالی ټاکي او د y-axis سکرول بار چمتو کړي.

متغیرات

د متغیرونو د ښودلو لپاره د <var>ټګ څخه کار واخلئ.

y = m x + b

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

نمونه محصول

د برنامه څخه د بلاکونو نمونې محصول ښودلو لپاره <samp>ټګ وکاروئ.

دا متن د دې لپاره دی چې د کمپیوټر برنامې څخه د نمونې محصول په توګه چلند وشي.

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

بنسټیز مثال

.tableد لومړني سټایل کولو لپاره — سپک پیډینګ او یوازې افقی ویشونکي — هر ته بیس کلاس اضافه کړئ <table>. دا ممکن خورا بې ځایه ښکاري ، مګر د نورو پلگ انونو لکه کیلنڈرونو او نیټې غوره کونکو لپاره د جدولونو پراخه کارونې ته په پام سره ، موږ د خپل دودیز میز سټایلونو جلا کولو غوره کړی.

اختیاري جدول سرلیک.
#	لومړی نوم	تخلص	کارن نوم
1	مارک	اوټو	@mdo
2	یعقوب	تورټن	@ غوړ
3	لاري	مرغۍ	@ټویټر

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

پټې قطارونه

.table-stripedد میز دننه د هر میز قطار ته د زیبرا سټریپینګ اضافه کولو لپاره وکاروئ <tbody>.

د کراس براوزر مطابقت

پټې میزونه د CSS انتخابونکي له لارې سټایل شوي :nth-child، کوم چې په انټرنیټ اکسپلورر 8 کې شتون نلري.

#	لومړی نوم	تخلص	کارن نوم
1	مارک	اوټو	@mdo
2	یعقوب	تورټن	@ غوړ
3	لاري	مرغۍ	@ټویټر

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

سرحدی میز

.table-borderedد میز او حجرو په ټولو اړخونو کې د سرحدونو لپاره اضافه کړئ .

#	لومړی نوم	تخلص	کارن نوم
1	مارک	اوټو	@mdo
2	یعقوب	تورټن	@ غوړ
3	لاري	مرغۍ	@ټویټر

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

د قطارونو ځړول

.table-hoverد میز په قطارونو کې دننه د هوور حالت فعالولو لپاره اضافه کړئ <tbody>.

#	لومړی نوم	تخلص	کارن نوم
1	مارک	اوټو	@mdo
2	یعقوب	تورټن	@ غوړ
3	لاري	مرغۍ	@ټویټر

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

کنډنډ شوی میز

.table-condensedد حجرو پیډینګ په نیمایي کې پرې کولو سره د میزونو نور کمپیکٹ کولو لپاره اضافه کړئ .

#	لومړی نوم	تخلص	کارن نوم
1	مارک	اوټو	@mdo
2	یعقوب	تورټن	@ غوړ
3	لاري مرغۍ		@ټویټر

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

متناسب ټولګي

د میز قطارونو یا انفرادي حجرو رنګولو لپاره متناسب ټولګي وکاروئ.

ټولګي	تفصیل
`.active`	د هوور رنګ په ځانګړي قطار یا حجره کې پلي کوي
`.success`	یو بریالی یا مثبت عمل په ګوته کوي
`.info`	یو بې طرفه معلوماتي بدلون یا عمل ته اشاره کوي
`.warning`	یو خبرداری په ګوته کوي چې پام ته اړتیا لري
`.danger`	یو خطرناک یا احتمالي منفي عمل په ګوته کوي

#	د کالم سرلیک	د کالم سرلیک	د کالم سرلیک
1	د کالم منځپانګه	د کالم منځپانګه	د کالم منځپانګه
2	د کالم منځپانګه	د کالم منځپانګه	د کالم منځپانګه
3	د کالم منځپانګه	د کالم منځپانګه	د کالم منځپانګه
4	د کالم منځپانګه	د کالم منځپانګه	د کالم منځپانګه
5	د کالم منځپانګه	د کالم منځپانګه	د کالم منځپانګه
6	د کالم منځپانګه	د کالم منځپانګه	د کالم منځپانګه
7	د کالم منځپانګه	د کالم منځپانګه	د کالم منځپانګه
۸	د کالم منځپانګه	د کالم منځپانګه	د کالم منځپانګه
۹	د کالم منځپانګه	د کالم منځپانګه	د کالم منځپانګه

<!-- 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; }
}

د نورو معلوماتو لپاره، دا د Stack Overflow ځواب ولولئ .

#	د میز سرلیک	د میز سرلیک	د میز سرلیک	د میز سرلیک	د میز سرلیک	د میز سرلیک
1	د میز حجره	د میز حجره	د میز حجره	د میز حجره	د میز حجره	د میز حجره
2	د میز حجره	د میز حجره	د میز حجره	د میز حجره	د میز حجره	د میز حجره
3	د میز حجره	د میز حجره	د میز حجره	د میز حجره	د میز حجره	د میز حجره

#	د میز سرلیک	د میز سرلیک	د میز سرلیک	د میز سرلیک	د میز سرلیک	د میز سرلیک
1	د میز حجره	د میز حجره	د میز حجره	د میز حجره	د میز حجره	د میز حجره
2	د میز حجره	د میز حجره	د میز حجره	د میز حجره	د میز حجره	د میز حجره
3	د میز حجره	د میز حجره	د میز حجره	د میز حجره	د میز حجره	د میز حجره

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

بنسټیز مثال

د انفرادي فارم کنټرولونه په اوتومات ډول ځینې نړیوال سټایل ترلاسه کوي. ټول متني <input>, <textarea>او <select>عناصر د ډیفالټ لخوا .form-controlټاکل شوي. د غوره فاصلې لپاره width: 100%;لیبلونه او کنټرولونه وتړئ..form-group

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

فارم ګروپونه د ان پټ ګروپونو سره مه ګډوئ

د فارم ګروپونه په مستقیم ډول د ان پټ ګروپونو سره مه ګډوئ . پرځای یې، د ان پټ ګروپ د فارم ګروپ دننه دننه کړئ.

انلاین بڼه

په خپل فارم کې اضافه کړئ .form-inline(کوم چې باید یو نه وي <form>) د کیڼ اړخ او انلاین بلاک کنټرولونو لپاره. دا یوازې د لید پورټونو دننه فارمونو باندې پلي کیږي چې لږترلږه 768px پراخه وي.

کیدای شي دودیز عرض ته اړتیا ولري

داخلې او انتخابونه 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ټولګي کې وکاروئ <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حالت په a کې وښیې .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 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 شامل کړئ (د ټولګي په کارولو سره د مناسب بدیل متن سره - د ګلیفیکون مثالونه وګورئ )، یا د چمتو کولو له لارې اضافي مرستې متن بلاک. په ځانګړې توګه د مرستندویه ټیکنالوژیو لپاره، د ناسم فارم کنټرول هم یو aria-invalid="true"ځانګړتیا ټاکل کیدی شي.

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

د اختیاري شبیانو سره

تاسو کولی شئ د اختیاري فیډبیک شبیه هم اضافه کړئ .has-feedbackاو د سم آئیکون اضافه کولو سره.

د فیډبیک عکسونه یوازې د متن <input class="form-control">عناصرو سره کار کوي.

شبیہیں، لیبلونه، او د ننوتلو ګروپونه

د فیډبیک عکسونو لاسي موقعیت کول د لیبل پرته د ان پټو لپاره او د ښي خوا د اضافې سره د ان پټ ګروپونو لپاره اړین دي. تاسو په کلکه هڅول کیږي چې د لاسرسي دلایلو لپاره د ټولو معلوماتو لپاره لیبل چمتو کړئ. که تاسو غواړئ د لیبلونو د ښودلو مخه ونیسئ، نو د .sr-onlyټولګي سره یې پټ کړئ. که تاسو باید د لیبل پرته ترسره کړئ، topد فیډبیک آئیکون ارزښت تنظیم کړئ. rightد ان پټ ګروپونو لپاره، ارزښت ستاسو د اډون په عرض پورې اړوند مناسب پکسل ارزښت ته تنظیم کړئ.

مرستندویه ټیکنالوژیو ته د آئیکون معنی رسول

د دې لپاره چې ډاډ ترلاسه شي چې مرستندویه ټیکنالوژي - لکه د سکرین لوستونکي - په سمه توګه د آئیکون معنی بیانوي، اضافي پټ متن باید په .sr-onlyټولګي کې شامل شي او په ښکاره ډول د فارم کنټرول سره تړاو ولري چې دا د کارولو سره تړاو لري aria-describedby. په بدیل سره، ډاډ ترلاسه کړئ چې معنی (د مثال په توګه، حقیقت چې د یو ځانګړي متن ننوتلو ساحې لپاره خبرداری شتون لري) په بل ډول رسول کیږي، لکه د اصلي متن بدلول چې <label>د فورمې کنټرول سره تړاو لري.

که څه هم لاندې مثالونه دمخه په متن کې د دوی اړوند فارم کنټرولونو تایید حالت په ګوته <label>کوي ، پورتنۍ تخنیک (د .sr-onlyمتن او aria-describedby) کارول د توضیحي موخو لپاره شامل شوي.

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

اختیاري شبیهونه په افقی او انلاین شکلونو کې

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

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

`.sr-only`د پټ لیبلونو سره اختیاري شبیهونه

که تاسو .sr-onlyټولګي د فارم کنټرول پټولو لپاره وکاروئ <label>(د نورو لیبل کولو اختیارونو کارولو پرځای ، لکه aria-labelخاصیت) ، بوټسټریپ به په اوتومات ډول د عکس موقعیت تنظیم کړي کله چې دا اضافه شي.

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

د اندازه کولو کنټرول

لوړوالی د ټولګیو په کارولو سره تنظیم کړئ .input-lg، او پلنوالی د ګریډ کالم ټولګیو په کارولو سره تنظیم کړئ لکه .col-lg-*.

د قد اندازه کول

اوږد یا لنډ فارم کنټرولونه جوړ کړئ چې د تڼۍ اندازې سره سمون لري.

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

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

د افقی شکل ګروپ اندازه

په ګړندۍ توګه لیبلونه او فارم کنټرولونه .form-horizontalد اضافه کولو .form-group-lgیا اضافه کولو سره دننه کړئ .form-group-sm.

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

د کالم اندازه کول

په گرډ کالمونو کې آخذې وپلټئ، یا کوم دودیز اصلي عنصر، په اسانۍ سره د غوښتل شوي عرض پلي کولو لپاره.

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

تڼۍ ټګ

<a>په , <button>, یا <input>عنصر کې د تڼۍ ټولګي وکاروئ .

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

د شرایطو ځانګړي کارول

<a>پداسې حال کې چې د تڼۍ ټولګي په عناصرو او عناصرو کارول کیدی شي <button>، یوازې <button>عناصر زموږ په nav او navbar برخو کې ملاتړ کیږي.

لینکونه د بټونو په توګه کار کوي

که چیرې <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. په هرصورت، تاسو کولی شئ .activeپه <button>s کې وکاروئ (او aria-pressed="true"خاصیت پکې شامل کړئ) که تاسو اړتیا لرئ چې فعال حالت په برنامه توګه نقل کړئ.

د تڼۍ عنصر

اضافه کولو ته اړتیا نشته :activeځکه چې دا یو سیډو کلاس دی، مګر که تاسو ورته بڼه مجبورولو ته اړتیا لرئ، مخکې لاړ شئ او اضافه کړئ .active.

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

د لنگر عنصر

.activeټولګي په <a>بټونو کې اضافه کړئ .

لومړنۍ لینک لینک

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

د معلولیت ریاست

تڼۍ د دې سره بیرته له مینځه وړلو سره د کلیک کولو وړ نه ښکاري opacity.

د تڼۍ عنصر

disabledپه بټونو کې ځانګړتیا اضافه کړئ <button>.

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

د کراس براوزر مطابقت

که تاسو د انټرنیټ اکسپلورر 9 او لاندې disabledځانګړتیا ته اضافه کړئ <button>نو متن به د خړ متن سیوري سره رنګ کړي چې موږ یې نشو حل کولی.

د لنگر عنصر

.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ټولګي په څیر، نو هیڅ مخکینۍ اړتیا نشته.

د لینک فعالیت احتیاط

دا ټولګی pointer-events: noneد s د لینک فعالیت غیر فعالولو هڅه کولو لپاره کاروي <a>، مګر دا چې د CSS ملکیت لا تر اوسه معیاري نه دی او په بشپړ ډول په اوپیرا 18 او لاندې، یا په انټرنیټ اکسپلورر 11 کې ملاتړ شوی نه دی. سربیره پردې، حتی په براوزرونو کې چې ملاتړ کوي pointer-events: none، کیبورډ نیویګیشن غیر اغیزناک پاتې کیږي، پدې معنی چې د لیدل شوي کیبورډ کاروونکي او د مرستندویه ټیکنالوژیو کاروونکي به لاهم د دې لینکونو فعالولو توان ولري. نو د خوندي کیدو لپاره ، د داسې لینکونو غیر فعالولو لپاره دودیز جاواسکریپټ وکاروئ.

ځواب ورکوونکي انځورونه

په بوټسټریپ 3 کې عکسونه د .img-responsiveټولګي اضافه کولو له لارې ځواب ویونکي دوستانه کیدی شي. دا تطبیق کیږي 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، telus ac cursus commodo، tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

د ځانګړتیاوو سره معامله کول

ځینې وختونه د ټینګار ټولګي د بل انتخاب کونکي ځانګړتیا له امله نشي پلي کیدی. په ډیری قضیو کې ، یو کافي حل دا دی چې خپل متن په <span>ټولګي کې وتړئ.

مرستندویه ټیکنالوژیو ته د معنی رسول

د معنی اضافه کولو لپاره د رنګ کارول یوازې یو بصری نښې وړاندې کوي، کوم چې به د مرستندویه ټیکنالوژیو کاروونکو ته نه لیږل کیږي - لکه د سکرین لوستونکي. ډاډ ترلاسه کړئ چې د رنګ لخوا مشخص شوي معلومات یا هم پخپله د مینځپانګې څخه څرګند دي (د متن رنګونه یوازې د هغه معنی تقویه کولو لپاره کارول کیږي چې دمخه په متن / مارک اپ کې شتون لري) ، یا د بدیل وسیلو له لارې شامل شوي ، لکه د .sr-onlyټولګي سره پټ اضافي متن .

اړونده پس منظرونه

د متن متن رنګ ټولګیو ته ورته، په اسانۍ سره د عنصر شالید هر متناسب ټولګي ته تنظیم کړئ. د لنگر برخې به په هور کې تیاره شي، لکه د متن ټولګیو په څیر.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

د ځانګړتیاوو سره معامله کول

ځینې وختونه د شرایطو شالید ټولګي د بل انتخاب کونکي ځانګړتیا له امله نشي پلي کیدی. په ځینو حاالتو کې، یو کافي حل دا دی چې ستاسو د عنصر مینځپانګه په <div>ټولګي کې وتړئ.

مرستندویه ټیکنالوژیو ته د معنی رسول

لکه څنګه چې د متناسب رنګونو سره ، ډاډ ترلاسه کړئ چې کوم معنی چې د رنګ له لارې لیږدول کیږي هم په داسې بڼه کې لیږدول کیږي چې خالص پریزنټشن نه وي.

آیکون بند کړئ

د منځپانګې لکه موډلونو او خبرتیاو د ردولو لپاره د عمومي نږدې آیکون څخه کار واخلئ.

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

کارټونه

د کښته کولو فعالیت او سمت ښودلو لپاره کیریټونه وکاروئ. په یاد ولرئ چې ډیفالټ کیریټ به په اوتومات ډول د ډراپ اپ مینو کې بیرته راشي .

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

ګړندي تیریږي

یو عنصر د ټولګي سره چپ یا ښي خوا ته تیر کړئ. !importantد ځانګړي مسلو مخنیوي لپاره شامل دي. ټولګي هم د مخلوط په توګه کارول کیدی شي.

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

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

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

د مرکز منځپانګې بلاکونه

له لارې یو عنصر تنظیم کړئ display: blockاو مرکز یې کړئ margin. د مکسین او ټولګي په توګه شتون لري.

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

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

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

کلیرفکس

د اصلي عنصر پهfloat اضافه کولو سره s په اسانۍ سره پاک کړئ . مایکرو کلیفکس کاروي لکه څنګه چې د نیکولاس ګالګیر لخوا مشهور شوی. د مخلوط په توګه هم کارول کیدی شي..clearfix

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

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

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

د منځپانګې ښودل او پټول

یو عنصر مجبور کړئ چې ښودل یا پټ شي ( پشمول د سکرین لوستونکو لپاره.show ) او د .hiddenټولګیو کارولو سره . دا ټولګي !importantد ځانګړو شخړو څخه د مخنیوي لپاره کاروي، لکه د چټک فلوټونو په څیر . دوی یوازې د بلاک کچې ټګلینګ لپاره شتون لري. دوی د مخلوط په توګه هم کارول کیدی شي.

.hideشتون لري، مګر دا تل د سکرین لوستونکي اغیزه نه کوي او د v3.0.1 په توګه له مینځه وړل کیږي. استعمال .hiddenیا .sr-onlyپرځای.

سربیره پردې ، .invisibleیوازې د عنصر لید لید بدلولو لپاره کارول کیدی شي ، پدې معنی چې displayدا نه بدل شوی او عنصر لاهم د سند جریان اغیزه کولی شي.

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

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

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

د سکرین ریډر او کیبورډ نیویګیشن مینځپانګه

په ټولو وسیلو کې یو عنصر پټ کړئ پرته له دې چې د سکرین لوستونکو سره .sr-only. د عنصر د بیا ښودلو لپاره سره یوځای کړئ کله چې تمرکز شوی وي (د مثال په توګه د کیبورډ یوازې کارونکي لخوا) .sr-only. د لاسرسي غوره عملونو.sr-only-focusable تعقیب لپاره اړین دی . د مخلوط په توګه هم کارول کیدی شي.

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

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

د عکس بدلول

د .text-hideشاليد عکس سره د عنصر متن مینځپانګې بدلولو کې د مرستې لپاره ټولګي یا مکسین وکاروئ.

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

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

د ګړندي ګرځنده دوستانه پرمختګ لپاره ، د میډیا پوښتنې له لارې د وسیلې په واسطه د مینځپانګې ښودلو او پټولو لپاره دا د کارونې ټولګي وکاروئ. همدارنګه د چاپ کولو په وخت کې د مینځپانګې ټګل کولو لپاره د کارونې ټولګي شامل دي.

هڅه وکړئ دا په محدود ډول وکاروئ او د ورته سایټ بشپړ مختلف نسخې رامینځته کولو څخه مخنیوی وکړئ. پرځای یې، د هر وسیله پریزنټشن بشپړولو لپاره یې وکاروئ.

شته ټولګي

د ویو پورټ بریک پواینټ کې د مینځپانګې ټګل کولو لپاره د شته ټولګیو یو واحد یا ترکیب وکاروئ.

	اضافي کوچني وسایلتلیفونونه (<768px)	کوچني وسایلټابلیټونه (≥768px)	منځني وسایلډیسټاپونه (≥992px)	لوی وسایلډیسټاپونه (≥1200px)
`.visible-xs-*`	د لیدلو وړ	پټ	پټ	پټ
`.visible-sm-*`	پټ	د لیدلو وړ	پټ	پټ
`.visible-md-*`	پټ	پټ	د لیدلو وړ	پټ
`.visible-lg-*`	پټ	پټ	پټ	د لیدلو وړ
`.hidden-xs`	پټ	د لیدلو وړ	د لیدلو وړ	د لیدلو وړ
`.hidden-sm`	د لیدلو وړ	پټ	د لیدلو وړ	د لیدلو وړ
`.hidden-md`	د لیدلو وړ	د لیدلو وړ	پټ	د لیدلو وړ
`.hidden-lg`	د لیدلو وړ	د لیدلو وړ	د لیدلو وړ	پټ

د v3.2.0 پورې، د .visible-*-*هرې وقفې لپاره ټولګي په دریو توپیرونو کې راځي، یو د هر CSS displayملکیت ارزښت لپاره چې لاندې لیست شوي.

د ټولګیو ګروپ	سی ایس ایس`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

نو، د xsمثال په توګه د اضافي وړو () سکرینونو لپاره، موجود .visible-*-*ټولګي په لاندې ډول دي: .visible-xs-block،، .visible-xs-inlineاو .visible-xs-inline-block.

ټولګي .visible-xs, .visible-sm, .visible-md, او .visible-lgهم شتون لري، مګر د v3.2.0 په توګه رد شوي دي . دوی تقریبا سره مساوي دي ، پرته له دې چې د توګل کولو پورې اړوند عناصرو .visible-*-blockلپاره اضافي ځانګړي قضیې سره .<table>

چاپ ټولګي

د منظم ځواب ورکوونکي ټولګیو په څیر، دا د چاپ لپاره د مینځپانګې د توګولو لپاره وکاروئ.

ټولګي	براوزر	چاپ
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	پټ	د لیدلو وړ
`.hidden-print`	د لیدلو وړ	پټ

ټولګی .visible-printهم شتون لري مګر د v3.2.0 په توګه رد شوی. دا تقریبا سره مساوي دی ، پرته له دې چې د اړوندو عناصرو .visible-print-blockلپاره اضافي ځانګړي قضیې سره .<table>

د ازموینې قضیې

خپل براوزر اندازه کړئ یا په مختلف وسیلو کې بار کړئ ترڅو د ځواب ویونکي یوټیلټي ټولګیو ازموینې لپاره.

د لیدلو وړ ...

شنه چک مارکونه ښیي چې عنصر لیدل کیږي ستاسو په اوسني لید پورټ کې

ډیر کوچنی ✔ په x-کوچني کې لیدل کیږي

کوچنی ✔ په کوچنیو کې د لیدلو وړ

منځنی ✔ په منځني ډول لیدل کیږي

لوی ✔ په لویو سترګو لیدل کیږي

اضافي کوچني او کوچني ✔ په x-کوچني او کوچني کې لیدل کیږي

منځنی او لوی ✔ په متوسط او لویو کې لیدل کیږي

اضافي کوچني او منځني ✔ په x-کوچني او متوسط کې لیدل کیږي

کوچني او لوی ✔ په کوچنیو او لویو کې لیدل کیږي

اضافي کوچني او لوی ✔ په x-کوچني او لوی کې لیدل کیږي

کوچني او منځني ✔ په کوچنیو او منځنیو برخو کې لیدل کیږي

په پټه...

دلته، شنه چک مارکونه هم په ګوته کوي چې عنصر ستاسو په اوسني لید کې پټ دی.

ډیر کوچنی ✔ په x-کوچني کې پټ شوی

کوچنی ✔ په کوچنیو کې پټ شوی

منځنی ✔ په منځني ډول پټ

لوی ✔ په لویو کې پټ شوی

اضافي کوچني او کوچني ✔ په x-وړو او کوچنیو کې پټ شوی

منځنی او لوی ✔ په متوسط او لوی پټ

اضافي کوچني او منځني ✔ په x-کوچني او متوسط کې پټ

کوچني او لوی ✔ په کوچني او لوی پټ

اضافي کوچني او لوی ✔ په x-کوچني او لوی پټ

کوچني او منځني ✔ په کوچنیو او منځنیو برخو کې پټ شوی

د Bootstrap CSS په Less کې جوړ شوی، یو پری پروسیسر چې اضافي فعالیت لري لکه متغیرات، مکسین، او د CSS د راټولولو لپاره افعال. هغه څوک چې زموږ د ترتیب شوي CSS فایلونو پرځای د سرچینې لږ فایلونه کاروي کولی شي د ډیری متغیرونو او مکسینونو څخه کار واخلي چې موږ یې په ټول چوکاټ کې کاروو.

د ګریډ تغیرات او مکسینونه د ګریډ سیسټم برخه کې پوښل شوي .

د بوټسټریپ تالیف کول

بوټسټریپ لږترلږه په دوه لارو کارول کیدی شي: د مرتب شوي CSS سره یا د سرچینې لږ فایلونو سره. د لږو فایلونو تالیف کولو لپاره، د پیل کولو برخې سره مشوره وکړئ ترڅو د اړینو حکمونو چلولو لپاره خپل پراختیایي چاپیریال څنګه تنظیم کړئ.

د دریمې ډلې تالیف وسیلې ممکن د بوټسټریپ سره کار وکړي ، مګر دوی زموږ د اصلي ټیم لخوا نه ملاتړ کیږي.

متغیرات

متغیرونه په ټوله پروژه کې د مرکزي کولو او شریکولو لپاره د یوې لارې په توګه کارول کیږي چې معمولا کارول شوي ارزښتونه لکه رنګونه، فاصله، یا د فونټ سټیکونه. د بشپړ تحلیل لپاره، مهرباني وکړئ Customizer وګورئ .

رنګونه

په اسانۍ سره د دوه رنګ سکیمونو څخه کار واخلئ: خړ سکیل او سیمانټیک. خړ رنګونه د تور رنګونو عام کارول شوي سیوري ته ګړندي لاسرسی چمتو کوي پداسې حال کې چې سیمانټیک مختلف رنګونه شامل دي چې معنی لرونکي شرایطو ارزښتونو ته ټاکل شوي.

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

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

د دې رنګ متغیرونو څخه هر یو وکاروئ لکه څنګه چې دوی دي یا ستاسو د پروژې لپاره ډیر معنی لرونکي متغیرونو ته یې بیا وټاکئ.

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

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

سکفولډنګ

ستاسو د سایټ د کنکال د کلیدي عناصرو چټک تنظیم کولو لپاره یو څو متغیرات.

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

لینکونه

په اسانۍ سره خپل لینکونه د سم رنګ سره یوازې یو ارزښت سره سټایل کړئ.

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

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

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

په یاد ولرئ چې @link-hover-colorیو فنکشن کاروي، د لږ څخه بل په زړه پورې وسیله، په اتوماتيک ډول د سم هوور رنګ رامینځته کولو لپاره. تاسو کولی شئ وکاروئ darken،،، lightenاوsaturatedesaturate .

ټایپوګرافي

په اسانۍ سره خپل ټایپفیس ، د متن اندازه ، مخکښ او نور ډیر څه د یو څو ګړندي تغیراتو سره تنظیم کړئ. بوټسټریپ د اسانه ټایپوګرافیک مکسینو چمتو کولو لپاره له دې څخه هم کار اخلي.

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

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

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

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

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

شبیه

ستاسو د شبیانو موقعیت او فایل نوم تنظیم کولو لپاره دوه ګړندي تغیرات.

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

اجزا

د بوټسټریپ په اوږدو کې اجزا د عام ارزښتونو تنظیم کولو لپاره د ځینې ډیفالټ متغیرونو څخه کار اخلي. دلته ترټولو عام کارول کیږي.

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

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

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

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

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

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

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

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

د پلورونکي مخلوط

د پلورونکي مکسینونه مکسینونه دي چې ستاسو په ترتیب شوي CSS کې د ټولو اړوندو پلورونکو مخکینو په شمول د ډیری براوزرونو ملاتړ کولو کې مرسته کوي.

د بکس اندازه کول

د خپل اجزاو بکس ماډل د یو واحد مکسین سره تنظیم کړئ. د شرایطو لپاره، د موزیلا څخه دا ګټور مقاله وګورئ .

د آټوپریفکسر په معرفي کولو سره مکسین د v3.2.0 په توګه رد شوی . د شاته - مطابقت ساتلو لپاره ، بوټسټریپ به د 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 په توګه رد شوي. د شاته - مطابقت ساتلو لپاره ، بوټسټریپ به د بوټسټریپ 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()مکسین اضافه کړئ چیرې چې مناسب وي. د نیکولاس ګالګیر څخه مایکرو کلیفکس کاروي .

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

د متن ټوټه کول

متن په اسانۍ سره د یو واحد مکسین سره د ellipsis سره ټوټه کړئ. عنصر ته اړتیا لري blockیا inline-blockسطحه وي.

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

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

د ریٹنا انځورونه

د عکس دوه لارې او د @1x عکس ابعاد مشخص کړئ، او بوټسټریپ به د @2x میډیا پوښتنه چمتو کړي. که تاسو د خدمت کولو لپاره ډیری عکسونه لرئ، د یوې رسنۍ پوښتنې کې په لاسي ډول د خپل ریٹنا عکس CSS لیکلو ته پام وکړئ.

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

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

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

پداسې حال کې چې بوټسټریپ په لږ کې جوړ شوی، دا د رسمي ساس بندر هم لري . موږ دا په جلا GitHub ذخیره کې ساتو او د تبادلې سکریپټ سره تازه معلومات اداره کوو.

څه پکې شامل دي

څرنګه چې د ساس بندر یو جلا ریپو لري او یو څه مختلف لیدونکو ته خدمت کوي، د پروژې مینځپانګې د اصلي بوټسټریپ پروژې څخه خورا توپیر لري. دا ډاډ ورکوي چې د Sass بندر د امکان تر حده د ډیری ساس میشته سیسټمونو سره مطابقت لري.

لاره	تفصیل
`lib/`	د روبي ګیم کوډ (ساس ترتیب، ریلونه او د کمپاس ادغام)
`tasks/`	د کنورټر سکریپټونه (د پورته کیدو لږ تر ساس پورې)
`test/`	د تالیف ازموینې
`templates/`	د کمپاس بسته ښکاره کول
`vendor/assets/`	Sass، JavaScript، او فونټ فایلونه
`Rakefile`	داخلي دندې، لکه ریک او کنورټ

د دې فایلونو په عمل کې د لیدلو لپاره د ساس پورټ GitHub ذخیره څخه لیدنه وکړئ.

نصب کول

د Sass لپاره د بوټسټریپ نصب او کارولو څرنګوالي په اړه معلوماتو لپاره ، د GitHub ذخیره لوستلو سره مشوره وکړئ . دا ترټولو تازه سرچینه ده او د ریلونو، کمپاس، او معیاري ساس پروژو سره د کارولو لپاره معلومات شامل دي.

د Sass لپاره بوټسټپ

سی ایس ایس

کتنه

HTML5 doctype

لومړی موبایل

ټایپوګرافي او لینکونه

Normalize.css

کانټینرونه

گرډ سیسټم

پیژندنه

د رسنیو پوښتنې

د ګریډ اختیارونه

بېلګه: له افقی څخه ډډ شوی

بېلګه: د مایع کانتینر

بېلګه: موبایل او ډیسټاپ

بېلګه: موبایل، ټابلیټ، ډیسټاپ

بېلګه: د کالم لپاس کول

ځواب ورکوونکي کالم بیا تنظیموي

ګترونه لرې کړئ

د کالمونو بندول

د ځنځیرونو کالمونه

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

لږ مخلوط او متغیرات

متغیرات

مکسین

د کارولو بېلګه

ټایپوګرافي

سرلیکونه

h1. د بوټسټراپ سرلیک

h2. د بوټسټراپ سرلیک

h3. د بوټسټراپ سرلیک

h4. د بوټسټراپ سرلیک

h5. د بوټسټراپ سرلیک

h6. د بوټسټراپ سرلیک

h1. د بوټسټریپ سرلیک دوهم متن

h2. د بوټسټریپ سرلیک دوهم متن

h3. د بوټسټریپ سرلیک دوهم متن

h4. د بوټسټریپ سرلیک دوهم متن

h5. د بوټسټریپ سرلیک دوهم متن

h6. د بوټسټریپ سرلیک دوهم متن

د بدن کاپي

د مشر بدن کاپي

د کم سره جوړ شوی

د انلاین متن عناصر

نښه شوی متن

ړنګ شوی متن

د اعتصاب متن

داخل شوی متن

لاندې متن

کوچنی متن

بولډ

ایټالیکی

بدیل عناصر

د سمون ټولګي

د بدلون ټولګي

لنډیزونه

بنسټیز لنډیز

ابتکار

ادرسونه

بلاک کوټونه

ډیفالټ بلاک اقتباس

د بلاک اقتباس اختیارونه

د سرچینې نوم ورکول

بدیل نندارې

لیستونه

بې ترتیبه

امر وکړ

بې سټایل

انلاین

تفصیل

افقی توضیحات

په اتوماتيک ډول پرې کول

کوډ

انلاین

د کارن داخلول

بنسټیز بلاک

متغیرات

نمونه محصول

میزونه

بنسټیز مثال

پټې قطارونه

د ډیمو `:focus`حالت

د لینک فعالیت په اړه خبرداری`<a>`

`.sr-only`د پټ لیبلونو سره اختیاري شبیهونه