قالب پنل مدیریت وایفا

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

یک متن دلخواه است برای نمایش موضوعی که در مورد آن قرار داده ایم در نتیجه با توجه به این متن می توانید متوجه موضوع مورد نظر شوید.

Columns and gutters

تعداد سطر های پیشفرض = 12
قطر هر سطر = 30px

ابزار گرید

یک متن دلخواه است برای نمایش موضوعی که در مورد آن قرار داده ایم در نتیجه با توجه به این متن می توانید متوجه موضوع مورد نظر شوید

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# of columns	12
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Column ordering	Yes

پهنا

1 of 2

2 of 2

3 of 3

<div class="row">
                                    <div class="col">1 of 2</div>
                                    <div class="col">2 of 2</div>
                                    <div class="col">3 of 3</div>
</div>

سطر در لاین های متفاوت

Column

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

تنطیمات در پهنای سطر

1 of 3

2 of 3 (wider)

3 of 3

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

محتوای پهنای سطر

1 of 3

Auto width

3 of 3

<div class="row">
                                    <div class="col-lg-2">1 of 3</div>
                                    <div class="col-auto">Auto width</div>
                                    <div class="col-lg-2">3 of 3</div>
</div>

محتوای پهنای متغیر

1 of 3

Auto width

3 of 3

<div class="row">
                                    <div class="col">1 of 3</div>
                                    <div class="col-auto">Auto width</div>
                                    <div class="col-lg-2">3 of 3</div>
</div>

عنوان

col

<div class="row">
                                    <div class="col">column</div>
                                    <div class="col">column</div>
                                    <div class="col">column</div>
                                    <div class="col">column</div>
</div>

امتیاز شکسته

col-2

col-4

col-2

<div class="row">
                                    <div class="col-2">column</div>
                                    <div class="col-4">column</div>
                                    <div class="col-4">column</div>
                                    <div class="col-2">column</div>
</div>

آغاز تراز محتوا

Col

<div class="row align-items-start h-150">
                                    <div class="col">column</div>
                                    <div class="col">column</div>
                                    <div class="col">column</div>
</div>

تراز وسط

Col

<div class="row align-items-center h-150">
                                    <div class="col">column</div>
                                    <div class="col">column</div>
                                    <div class="col">column</div>
</div>

تراز در انتها

Col

<div class="row align-items-end h-150">
                                    <div class="col">column</div>
                                    <div class="col">column</div>
                                    <div class="col">column</div>
</div>

تراز افقی

Col

<div class="row h-150">
                                    <div class="col align-items-start">column</div>
                                    <div class="col align-items-center">column</div>
                                    <div class="col align-items-end">column</div>
</div>

تراز عمودی

Col 4

<div class="row justify-content-start">
                                                    <div class="col-4">column</div>
                                                    <div class="col-4">column</div>
</div>

Col 4

<div class="row justify-content-center">
                                                    <div class="col-4">column</div>
                                                    <div class="col-4">column</div>
</div>

Col 4

<div class="row justify-content-end">
                                                    <div class="col-4">column</div>
                                                    <div class="col-4">column</div>
</div>

Col 4

<div class="row justify-content-around">
                                                    <div class="col-4">column</div>
                                                    <div class="col-4">column</div>
</div>

Col 4

<div class="row justify-content-between">
                                                    <div class="col-4">column</div>
                                                    <div class="col-4">column</div>
</div>

بدون قطر

Col

<div class="row no-gutters">
                                    <div class="col-8">column</div>
                                    <div class="col-4">column</div>
</div>

Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows, but not every implementation method can account for this.

Col

<div class="row">
                                    <div class="col-4">column</div>
                                    <div class="col-4">column</div>
                                    <div class="w-100">.w-100 Force next columns to break to new line</div>
                                    <div class="col-4">column</div>
                                    <div class="col-4">column</div>
</div>

سطر شکسته

Column

<div class="row">
                                    <div class="col-6 col-sm-3">column</div>
                                    <div class="col-6 col-sm-3">column</div>
                                    <div class="w-100 d-none d-md-block">.w-100 Force next columns to break to new line at md breakpoint and up</div>
                                    <div class="col-6">column</div>
                                    <div class="col-6">column</div>
</div>

تنطیمات غیر فعال سطر

col-md-4

col-md-4 offset-md-4

<div class="row">
                                                    <div class="col-md-4">column</div>
                                                    <div class="col-md-4 offset-md-4">column</div>
</div>

col-md-3 offset-md-3

<div class="row">
                                                    <div class="col-md-3 offset-md-3">column</div>
                                                    <div class="col-md-3 offset-md-3">column</div>
</div>

col-md-6 offset-md-3

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

ابزار

.col-md-4

.col-md-4 .ml-auto

<div class="row">
                                                    <div class="col-md-4">column</div>
                                                    <div class="col-md-4 ml-auto">column</div>
</div>

.col-md-5 .ml-md-auto

<div class="row">
                                                    <div class="col-md-5 ml-md-auto">column</div>
                                                    <div class="col-md-5 ml-md-auto">column</div>
</div>

.col-auto .mr-auto

.col-auto

<div class="row">
                                                    <div class="col-auto mr-auto">column</div>
                                                    <div class="col-auto">column</div>
</div>

رویداد ها

نکات

تنظیمات سریع

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