رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

ستون ها

به لطف سیستم شبکه فلکس باکس ما، نحوه اصلاح ستون ها را با تعداد انگشت شماری از گزینه ها برای تراز، ترتیب و جابجایی بیاموزید. بعلاوه، نحوه استفاده از کلاس‌های ستون برای مدیریت عرض عناصر غیر شبکه را ببینید.

سر بالا! قبل از اینکه به نحوه تغییر و سفارشی کردن ستون های شبکه خود بپردازید، ابتدا صفحه Grid را مطالعه کنید .

چگونه کار می کنند

  • ستون ها بر اساس معماری flexbox شبکه ساخته شده اند. Flexbox به این معنی است که ما گزینه هایی برای تغییر ستون های جداگانه و اصلاح گروه های ستون ها در سطح ردیف داریم . شما انتخاب می کنید که چگونه ستون ها رشد کنند، کوچک شوند یا تغییر کنند.

  • هنگام ساخت طرح‌بندی‌های شبکه، تمام محتوا در ستون‌ها قرار می‌گیرد. سلسله مراتب شبکه بوت استرپ از ظرفی به ردیف به ستون دیگر به محتوای شما می رود. در موارد نادر، ممکن است محتوا و ستون را با هم ترکیب کنید، اما توجه داشته باشید که ممکن است عواقب ناخواسته ای داشته باشد.

  • Bootstrap شامل کلاس های از پیش تعریف شده برای ایجاد طرح بندی های سریع و پاسخگو است. با شش نقطه شکست و ده ها ستون در هر لایه شبکه، ما ده ها کلاس از قبل برای شما ساخته ایم تا طرح بندی های مورد نظر خود را ایجاد کنید. در صورت تمایل می توان از طریق Sass آن را غیرفعال کرد.

هم ترازی

برای تراز عمودی و افقی ستون ها از ابزارهای تراز flexbox استفاده کنید.

چیدمان عمودی

یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
<div class="container">
  <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>
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
<div class="container">
  <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>

تراز افقی

یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
<div class="container">
  <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، این div 4 ستونی به عنوان یک واحد پیوسته روی یک خط جدید پیچیده می شود.
.col-6
ستون های بعدی در امتداد خط جدید ادامه می یابند.
<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>

ستون می شکند

شکستن ستون ها به یک خط جدید در flexbox به یک هک کوچک نیاز دارد: یک عنصر را با width: 100%هر جایی که می خواهید ستون های خود را به یک خط جدید بپیچید اضافه کنید. معمولاً این با چندین .rows انجام می شود، اما هر روش پیاده سازی نمی تواند این را توضیح دهد.

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
<div class="container">
  <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
<div class="container">
  <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-2). شامل پشتیبانی 1از 5تمام شش لایه شبکه است.

ابتدا در DOM، هیچ سفارشی اعمال نشد
دوم در DOM، با سفارش بزرگتر
سوم در DOM، با ترتیب 1
<div class="container">
  <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: -1و order: 6. این کلاس ها همچنین می توانند در صورت نیاز با کلاس های شماره گذاری شده مخلوط شوند .order-*.

اول در DOM، آخرین سفارش
دوم در DOM، نامرتب
سوم در DOM، اول سفارش داد
<div class="container">
  <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
<div class="container">
  <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
<div class="container">
  <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>

ابزارهای حاشیه

با حرکت به flexbox در نسخه 4، می‌توانید از ابزارهای حاشیه مانند .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
<div class="container">
  <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-*ها همچنین می توانند در خارج از a استفاده شوند .rowتا به یک عنصر یک عرض خاص بدهند. هر زمان که از کلاس های ستون به عنوان فرزندان غیر مستقیم یک ردیف استفاده می شود، بالشتک ها حذف می شوند.

col-3: عرض 25%
.col-sm-9: عرض 75% بالاتر از نقطه شکست sm
<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

یک پاراگراف از متن مکان‌دار. ما در اینجا از آن برای نشان دادن استفاده از کلاس clearfix استفاده می کنیم. ما در اینجا چند عبارت بی معنی را اضافه می کنیم تا نحوه تعامل ستون ها در اینجا با تصویر شناور را نشان دهیم.

همانطور که می بینید پاراگراف ها به زیبایی دور تصویر شناور می پیچند. حالا تصور کنید که این متن با محتوای واقعی در اینجا چگونه به نظر می رسد، نه فقط با این متن حوصله مکان خسته کننده که ادامه می یابد، اما در واقع هیچ اطلاعات ملموسی را منتقل نمی کند. به سادگی فضا را اشغال می کند و واقعاً نباید خوانده شود.

و با این حال، در اینجا شما هنوز در خواندن این متن نگهدارنده استقامت دارید، به امید برخی بینش‌های بیشتر، یا برخی محتوای پنهانی عید پاک. یه شوخی شاید متأسفانه هیچ کدام از اینها اینجا نیست.

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