اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړشئ
Check
in English

کالمونه

زموږ د فلیکس باکس گرډ سیسټم څخه مننه د تنظیم کولو ، ترتیب کولو ، او آفسیټ کولو لپاره د څو انتخابونو سره د کالمونو ترمیم کولو څرنګوالی زده کړئ. برسیره پردې، وګورئ چې څنګه د کالم ټولګیو کارولو لپاره د غیر گرډ عناصرو پراخوالی اداره کړئ.

پورته شه! ډاډ ترلاسه کړئ چې لومړی د ګریډ پا pageه ولولئ مخکې لدې چې د خپل گرډ کالمونو ترمیم او تنظیم کولو څرنګوالی کې ډوب شئ.

دوی څنګه کار کوي

  • کالمونه د گرډ فلیکس باکس جوړښت باندې جوړیږي. Flexbox پدې مانا ده چې موږ د انفرادي کالمونو بدلولو او د قطار په کچه د کالمونو ګروپونو بدلولو اختیارونه لرو . تاسو غوره کوئ چې کالم څنګه وده کوي، کموي، یا بل ډول بدلوي.

  • کله چې د گرډ ترتیبونه جوړ کړئ، ټول منځپانګې په کالمونو کې ځي. د بوټسټریپ گرډ درجه بندي ستاسو مینځپانګې ته له کانټینر څخه قطار ته کالم ته ځي. په نادره مواردو کې، تاسو کولی شئ محتوا او کالم سره یوځای کړئ، مګر خبر اوسئ چې غیر ارادي پایلې شتون لري.

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

السلیک

د عمودی او افقی کالمونو د تنظیم کولو لپاره د فلیکس باکس الینمینټ اسانتیاوې وکاروئ.

عمودی سمون

یو له دریو کالمونو څخه
یو له دریو کالمونو څخه
یو له دریو کالمونو څخه
یو له دریو کالمونو څخه
یو له دریو کالمونو څخه
یو له دریو کالمونو څخه
یو له دریو کالمونو څخه
یو له دریو کالمونو څخه
یو له دریو کالمونو څخه
html
<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>
یو له دریو کالمونو څخه
یو له دریو کالمونو څخه
یو له دریو کالمونو څخه
html
<div class="container text-center">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

افقی سمون

یو له دوو کالمونو څخه
یو له دوو کالمونو څخه
یو له دوو کالمونو څخه
یو له دوو کالمونو څخه
یو له دوو کالمونو څخه
یو له دوو کالمونو څخه
یو له دوو کالمونو څخه
یو له دوو کالمونو څخه
یو له دوو کالمونو څخه
یو له دوو کالمونو څخه
یو له دوو کالمونو څخه
یو له دوو کالمونو څخه
html
<div class="container text-center">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

د کالم پوښل

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

.col-9
.col-4
له 9 + 4 = 13 > 12 راهیسې، دا 4-کالم پراخه div د یو متضاد واحد په توګه په نوې کرښه کې پوښل کیږي.
.col-6
ورپسې کالمونه د نوې کرښې په اوږدو کې دوام لري.
html
<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-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-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

د کالم ماتول

په فلیکس باکس کې نوې لاین ته د کالمونو ماتول یو کوچني هیک ته اړتیا لري: یو عنصر اضافه کړئ width: 100%چیرې چې تاسو غواړئ خپل کالمونه نوي لاین ته لپ کړئ. عموما دا د څو .rows سره سرته رسیږي، مګر د پلي کولو هره طریقه نشي کولی د دې حساب وکړي.

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
html
<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

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

تاسو کولی شئ دا وقفه زموږ د غبرګون ښودلو اسانتیاو سره په ځانګړو وقفو ځایونو کې هم پلي کړئ .

.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
html
<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

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

بیا ترتیب کول

ټولګي ترتیب کړئ

ستاسو د مینځپانګې بصري ترتیب.order- کنټرول لپاره ټولګي وکاروئ . دا ټولګي ځواب ورکوونکي دي، نو تاسو کولی شئ د وقفې نقطې لخوا ترتیب کړئ (د بیلګې په توګه، ). په ټولو شپږو گرډ سطحو کې ملاتړ شامل دي.order.order-1.order-md-215

لومړی په DOM کې، هیڅ امر پلي شوی
په DOM کې دویم، د لوی امر سره
په DOM کې دریم، د 1 امر سره
html
<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

.order-firstځواب ورکوونکي او .order-lastټولګي هم شتون لري چې په ترتیب سره د پلي کولو او په ترتیب سره orderد عنصر بدلوي. دا ټولګي هم د اړتیا سره سم د شمیرل شوي ټولګیو سره یوځای کیدی شي.order: -1order: 6.order-*

لومړی په DOM کې، وروستی امر شوی
په DOM کې دوهم، بې ترتیبه
په DOM کې دریم، لومړی امر شوی
html
<div class="container text-center">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

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

تاسو کولی شئ د ګریډ کالمونه په دوه لارو تنظیم کړئ: زموږ د ځواب ویونکي .offset-گرډ ټولګي او زموږ د حاشیې اسانتیاوې . د ګریډ ټولګي د کالمونو سره د سمون لپاره اندازه کیږي پداسې حال کې چې حاشیې د ګړندي ترتیبونو لپاره خورا ګټور دي چیرې چې د آفسیټ عرض متغیر وي.

آفسټ ټولګي

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

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

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

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
html
<div class="container text-center">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-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 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

د مارجن اسانتیاوې

په v4 کې فلیکس باکس ته د تګ سره، تاسو کولی شئ د حاشیې اسانتیاوې وکاروئ لکه .me-autoد ورور کالمونه له یو بل څخه لرې کړئ.

.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-md-auto
.col-md-3 .ms-md-auto
.col-auto .me-auto
.col-auto
html
<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

د سټایلون کالم ټولګي

ټولګي د الف څخه .col-*بهر هم کارول کیدی شي .rowترڅو یو عنصر ته یو ځانګړی عرض ورکړي. هرکله چې د کالم ټولګي د یو قطار د غیر مستقیم ماشومانو په توګه کارول کیږي، پیډینګونه پریښودل کیږي.

.col-3: د 25% پراخوالی
.col-sm-9: د sm وقفې څخه پورته 75٪ پلنوالی
html
<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

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

Placeholder Responsive floated image

د ځای لرونکي متن یوه پراګراف. موږ دا دلته د کلیرفکس ټولګي کارولو ښودلو لپاره کاروو. موږ دلته یو څو بې معنی جملې اضافه کوو ترڅو وښیو چې څنګه کالمونه دلته د تیر شوي عکس سره تعامل کوي.

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

او بیا هم ، تاسو دلته یاست ، لاهم د دې ځای لرونکي متن لوستلو ته دوام ورکوئ ، د ځینې نورو بصیرتونو په تمه یاست ، یا د مینځپانګې ځینې پټ ایسټر هګۍ. یوه ټوکه، شاید. له بده مرغه، دلته هیڅ شی نشته.

html
<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>