سیستم شبکه بوت استرپ از مجموعه ای از کانتینرها، ردیف ها و ستون ها برای چیدمان و تراز کردن محتوا استفاده می کند. flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
در حالی که بوت استرپ استفاده می کندems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.
ببینید که چگونه جنبه های سیستم شبکه بوت استرپ در چندین دستگاه با یک جدول مفید کار می کند.
| بسیار کوچک \u003c576 پیکسل |
کم اهمیت ≥576 پیکسل |
متوسط ≥768 پیکسل |
بزرگ ≥992 پیکسل |
فوق العاده بزرگ ≥1200 پیکسل |
|
|---|---|---|---|---|---|
| حداکثر عرض ظرف | هیچکدام (خودکار) | 540 پیکسل | 720 پیکسل | 960 پیکسل | 1140 پیکسل |
| پیشوند کلاس | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| # ستون | 12 | ||||
| عرض ناودان | 30 پیکسل (15 پیکسل در هر طرف یک ستون) | ||||
| تودرتو | آره | ||||
| ترتیب ستون | آره | ||||
طرح بندی خودکار ستون ها
برای اندازه‌گیری آسان ستون‌ها بدون کلاس شماره‌دار صریح، از کلاس‌های ستون خاص نقطه شکست استفاده کنید.col-sm-6.
به عنوان مثال، در اینجا دو طرح‌بندی شبکه‌ای وجود دارد که برای هر دستگاه و درگاه نمایشی اعمال می‌شودxs to xl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
ستون های با عرض مساوی را می توان به چندین خط شکست، اما وجود داشتSafari flexbox bug that prevented this from working without an explicit flex-basis or border.
دو راه حل در یک مستند شده استreduced test case outside Bootstrap, though if the browser is up to date this shouldn’t be necessary.
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
طرح‌بندی خودکار برای ستون‌های شبکه flexbox همچنین به این معنی است که می‌توانید عرض یک ستون را تنظیم کنید و اندازه ستون‌های خواهر و برادر را به‌طور خودکار در اطراف آن تغییر دهید.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
استفاده کنیدcol-{breakpoint}-auto classes to size columns based on the natural width of their content.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
با درج a ستون هایی با عرض مساوی ایجاد کنید که چندین ردیف را در بر می گیرند.w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some ابزارهای نمایش پاسخگو.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
کلاس های پاسخگو
شبکه بوت استرپ شامل پنج طبقه از کلاس های از پیش تعریف شده برای ساخت طرح بندی های پیچیده پاسخگو است.
برای شبکه‌هایی که از کوچک‌ترین دستگاه‌ها تا بزرگ‌ترین آنها یکسان هستند، از.col and .col-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
آیا نمی خواهید ستون های شما به سادگی در برخی از سطوح شبکه قرار گیرند؟
<!-- columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-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-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
هم ترازی
برای تراز عمودی و افقی ستون ها از ابزارهای تراز 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>
ناودان های بین ستون ها در کلاس های شبکه از پیش تعریف شده ما را می توان با حذف کرد.no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.
در اینجا کد منبع برای ایجاد این سبک ها آمده است. attribute selector. While this generates a more specific selector, column padding can still be further customized with ابزارهای فاصله گذاری.
به طراحی لبه به لبه نیاز دارید؟ Drop the parent .container or .container-fluid.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
در عمل، در اینجا به نظر می رسد.
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
اگر بیش از 12 ستون در یک ردیف قرار گیرد، هر گروه از ستون‌های اضافی، به عنوان یک واحد، روی یک خط جدید قرار می‌گیرند.
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Subsequent columns continue along the new line.
<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>
شکستن ستون ها به یک خط جدید در flexbox به یک هک کوچک نیاز دارد: یک عنصر با اضافه کردن یک عنصرwidth: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows, but not ever implementation method can account for this.
<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>
همچنین می توانید این وقفه را در نقاط شکست خاص با ما اعمال کنیدresponsive display utilities.
<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>
سفارش مجدد
استفاده کنید.order- classes for controlling the نظم بصری of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
پاسخگو نیز وجود دارد.order-first class that quickly changes the order of one element by applying order: -1. This class can also be intermixed with the numbered .order-* classes as needed.
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
تنظیم ستون ها
شما می توانید ستون های شبکه را به دو روش آفست کنید: پاسخگوی ما.offset- grid classes and our ابزارهای حاشیه. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
با استفاده از ستون ها به سمت راست حرکت کنید.offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.
<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>
علاوه بر پاک کردن ستون در نقاط شکست پاسخگو، ممکن است نیاز به تنظیم مجدد آفست داشته باشید. the grid example.
<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.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>
با حرکت به flexbox در نسخه 4، می توانید از ابزارهای حاشیه مانند استفاده کنید.mr-auto to force sibling columns away from one another.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
برای قرار دادن محتوای خود با شبکه پیش‌فرض، یک شبکه جدید اضافه کنید.row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
