ستون ها
به لطف سیستم شبکه فلکس باکس ما، نحوه اصلاح ستون ها را با تعداد انگشت شماری از گزینه ها برای تراز، ترتیب و جابجایی بیاموزید. بعلاوه، نحوه استفاده از کلاسهای ستون برای مدیریت عرض عناصر غیر شبکه را ببینید.
چگونه کار می کنند
-
ستون ها بر اساس معماری 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 ستون در یک ردیف قرار گیرد، هر گروه از ستونهای اضافی، به عنوان یک واحد، روی یک خط جدید قرار میگیرند.
از 9 + 4 = 13 > 12، این div 4 ستونی به عنوان یک واحد پیوسته روی یک خط جدید پیچیده می شود.
ستون های بعدی در امتداد خط جدید ادامه می یابند.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 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%
هر جایی که می خواهید ستون های خود را به یک خط جدید بپیچید اضافه کنید. معمولاً این با چندین .row
s انجام می شود، اما هر روش پیاده سازی نمی تواند این را توضیح دهد.
<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>
همچنین می توانید این وقفه را در نقاط شکست خاص با ابزارهای نمایش پاسخگو ما اعمال کنید .
<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
تمام شش لایه شبکه است.
<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-*
.
<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
<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>
علاوه بر پاک کردن ستون در نقاط شکست پاسخگو، ممکن است نیاز به تنظیم مجدد آفست داشته باشید. این را در عمل در مثال شبکه مشاهده کنید .
<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
مجبور کردن ستونهای خواهر و برادر از یکدیگر استفاده کنید.
<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
تا به یک عنصر یک عرض خاص بدهند. هر زمان که از کلاس های ستون به عنوان فرزندان غیر مستقیم یک ردیف استفاده می شود، بالشتک ها حذف می شوند.
<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
لفاف بسته بندی کنید تا اگر متن کوتاه تر است، شناور پاک شود.
یک پاراگراف از متن مکاندار. ما در اینجا از آن برای نشان دادن استفاده از کلاس 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>