صفحه تمرین بوت استرپ

از ویکی کد
پرش به ناوبری پرش به جستجو

بسم الله الرحمن الرحیم


https://www.w3schools.com/bootstrap4/bootstrap_forms_custom.asp

محتویات

Bootstrap 4 Custom Forms

فرم‌های سفارشی در بوت استرپ 4

فرم‌های سفارشی در بوت استرپ 4

Bootstrap 4 comes with customized form elements, that are meant to replace browser defaults:

بوت استرپ 4 عناصر فرم شخصی سازی شده دارد که بمنظور جایگزین کردن پیش فرض مرورگر ایجاد شده‌اند:

چک باکس سفارشی

To create a custom checkbox, wrap a container element, like <div>, with a class of .custom-control and .custom-checkbox around the checkbox. Then add the .custom-control-input to the input with type="checkbox".

برای ایجاد چک باکس سفارشی، آن را داخل یک عنصر ظرف مانند <div> با کلاس .custom-control و .custom-checkbox قرار دهید. سپس .custom-control-input به ورودی با type=”checkbox” اضافه کنید.

Tip: If you use labels for accompanying text, add the .custom-control-label class to it. Note that the value of the for attribute should match the id of the checkbox:

نکته: اگر برای متن‌ها از برچسب استفاده می‌کنید، کلاس.custom-control-label را به آن اضافه کنید. دقت کنید که مقدار ویژگی باید با آی دی چک باکس مطابقت داشته باشد.

مثال

1 شششششششششششششششششش

سوئیچ سفارشی

To create a custom "toggle switch", wrap a container element, like <div>, with a class of .custom-control and .custom-switch around a checkbox. Then add the .custom-control-input class to the checkbox:

برای ایجاد یک “toggle switch” سفارشی، چک باکس را داخل یک عنصر ظرف، مانند <div> ، با کلاس .custom-control و .custom-switch قرار دهید. سپس کلاس .custom-control-input را به چک باکس اضافه کنید:

مثال

1 شششششششششششششششششش

Radio Buttonهای سفارشی

To create a custom radio button, wrap a container element, like <div>, with a class of .custom-control and .custom-radio around the radio button. Then add the .custom-control-input to the input with type="radio".

برای ایجاد یک radio button، آن را داخل یک عنصر ظرف، مانند <div>، با کلاس .custom-control و .custom-radio قرار دهید. سپس کلاس .custom-control-input را به ورودی با type="radio" اضافه کنید.

Tip: If you use labels for accompanying text, add the .custom-control-label class to it. Note that the value of the for attribute should match the id of the radio:

نکته: اگر برای متن‌ها از برچسب استفاده می‌کنید، کلاس.custom-control-label را به آن اضافه کنید. دقت کنید که مقدار ویژگی باید با آی دی چک باکس مطابقت داشته باشد.

مثال

مثال

1 شششششششششششششششششش

کنترل‌های فرم درون خطی سفارشی

If you want the custom form controls to sit side by side (inline), add the .custom-control-inline to the wrapper/container:

اگر می‌خواهید کنترل‌های فرم کنار هم قرار بگیرند (inline), .custom-control-inline را به ظرف / wrapper اضافه کنید:

مثال

1 شششششششششششششششششش

منوی انتخاب سفارشی

To create a custom select menu, add the .custom-select class to the <select> element:

برای ایجاد منوی سفارشی، کلاس .custom-select را به یک عنصر <select> اضافه کنید:

مثال

1 شششششششششششششششششش

اندازه منوی انتخاب سفارشی

Use the .custom-select-sm class to create a small select menu and the .custom-select-lg class for a large one:

از کلاس .custom-select-sm برای ایجاد منوی انتخاب کوچک و از کلاس .custom-select-lg برای ایجاد منوی انتخاب بزرگ استفاده کنید:

مثال

1 شششششششششششششششششش

Range سفارشی

To create a custom range menu, add the .custom-range class to an input with type="<range>":

برای ایجاد منوی range سفارشی، کلاس .custom-range را به یک ورودی با type=”<range>” اضافه کنید:

مثال

1 شششششششششششششششششش

بارگذاری فایل سفارشی

To create a custom file upload, wrap a container element with a class of .custom-file around the input with type="file". Then add the .custom-file-input to it.

برای ایجاد آپلود فایل سفارشی، ورودی با type=”file” را داخل یک ظرف با کلاس .custom-file قرار دهید. سپس .custom-file-input را به ورودی اضافه کنید.

Tip: If you use labels for accompanying text, add the .custom-file-label class to it. Note that the value of the for attribute should match the id of the checkbox:

نکته: اگر برای متن‌ها از برچسب استفاده می‌کنید، کلاس.custom-control-label را به آن اضافه کنید. دقت کنید که مقدار ویژگی باید با آی دی چک باکس مطابقت داشته باشد.

Choose file

Default file:

Note that you also have to include some jQuery code if you want the name of the file to appear when you select a specific file:

دقت کنید اگر می‌خواهید هنگام انتخاب یک فایل خاص، نام آن نمایش داده شود، باید کد jQuery را نیز اضافه کنید:

مثال

1 شششششششششششششششششش

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp

Bootstrap 4 Carousel

Carousel در بوت استرپ 4

Carousel رد بوت استرپ 4

The Carousel is a slideshow for cycling through elements.

Carousel یک نمایش اسلاید (Slideshow) برای چرخیدن در میان عنصر هاست.

نحوه ایجاد Carousel

The following example shows how to create a basic carousel with indicators and controls:

مثال زیر نحوه ایجاد یک carousel با نشانگرها و کنترل‌ها را نشان می‌دهد:

مثال

1 شششششششششششششششششش

مثال explained

شرح مثال

A description of what each class from the example above do:

توضیحی در مورد اینکه هرکلاس در مثال بالا چه کاری انجام می‌دهد:

Class

کلاس

Description

توصیف

.carousel Creates a carousel

ایجاد یک carousel

.carousel-indicators Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing)

نشانگرها را به carousel اضافه می‌کند. نشانگرها، نقطه‌های کوچکی در بالا و پایین هر اسلاید هستند (که نشان می‌دهند چند اسلاید در carousel هستند و اکنون کدام اسلاید نمایش داده می‌شود)

.carousel-inner Adds slides to the carousel

اضافه کردن اسلایدها به carousel

.carousel-item Specifies the content of each slide

تعیین محتوای هر اسلاید

.carousel-control-prev Adds a left (previous) button to the carousel, which allows the user to go back between the slides

یک کلید چپ (قبلی) به carousel اضافه می‌کند، که کاربر با آن بتواند در میان اسلایدها به عقب حرکت کند

.carousel-control-next Adds a right (next) button to the carousel, which allows the user to go forward between the slides

یک کلید راست (بعدی) به carousel اضافه می‌کند، که کاربر با آن بتواند در میان اسلایدها به جلو حرکت کند

.carousel-control-prev-icon Used together with .carousel-control-prev to create a "previous" button

با .carousel-control-prev با هم برای ایجاد کلید "قبلی" استفاده می‌شود

.carousel-control-next-icon Used together with .carousel-control-next to create a "next" button

با .carousel-control-next با هم برای ایجاد کلید "بعدی" استفاده می‌شود

.slide Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect

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

اضافه کردن زیرنویس (Caption) به اسلایدها

Add elements inside &lt;div class="carousel-caption"&gt; within each &lt;div class="carousel-item"&gt; to create a caption for each slide:

برای ایجاد زیرنویس در هر اسلاید عنصرهای <div class="carousel-caption"> را داخل هر <div class="carousel-item"> اضافه کنید:

مثال

1 شششششششششششششششششش

مرجع کامل Carousel بوت استرپ

For a complete reference of all carousel options, methods and events, go to our Bootstrap JS Carousel Reference.

برای دسترسی به مرجع همهٔ امکانات Carousel، متدها و رویدادها، به مرجع Carousel JS بوت استرپ ما مراجعه کنید.

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_modal.asp

Bootstrap 4 Modal

Modal در بوت استرپ 4

Modal در بوت استرپ 4

The Modal component is a dialog box/popup window that is displayed on top of the current page:

مؤلفه Modal یک کادر محاوره ای (Dialog Box) یا پنجره باز شو (Popup Window) است که در بالای صفحه فعلی نمایش داده می‌شود:

نحوه ایجاد Modal

The following example shows how to create a basic modal:

مثال زیر نحوهٔ ایجاد یک modal ساده را نشان می‌دهد:

مثال

1 شششششششششششششششششش

اضافه کردن حالت متحرک (Animation)

Use the .fade class to add a fading effect when opening and closing the modal:

برای ایجاد حالت محو شدن(Fading) به هنگام باز یا بسته شدن modal از کلاس .fade استفاده کنید:

مثال

1 شششششششششششششششششش

اندازه Modal

Change the size of the modal by adding the .modal-sm class for small modals, .modal-lg class for large modals, or .modal-xl for extra large modals.

اندازه Modal را با اضافه کردن کلاس .modal-sm کوچک، با کلاس .modal-lg بزرگ یا با اضافه کردن .modal-xl خیلی بزرگ کنید.

Add the size class to the &lt;div&gt; element with class .modal-dialog:

کلاس سایز را به عنصر <div> با کلاس .modal-dialog اضافه کنید:

Small Modal

Modal کوچک

1 شششششششششششششششششش

Large Modal

Modal بزرگ

1 شششششششششششششششششش

Extra Large Modal

Modal خیلی بزرگ

1 شششششششششششششششششش

By default, modals are "medium" in size.

بطور پیش فرض اندازهٔ modalها متوسط است.

Modal وسط-چین

Center the modal vertically and horizontally within the page, with the .modal-dialog-centered class:

با استفاده از کلاس .modal-dialog-centered , modal را بصورت افقی یا عمودی در صفحه وسط-چین کنید:

مثال

1 شششششششششششششششششش

Scrolling Modal

پیمایش(Scrolling) Modal

When you have alot of content inside the modal, a scrollbar is added to the page. See the examples below to understand it:

زمانی که محتوای زیادی داخل modal دارید، به صفحه یک نوار پیمایش (Scrollbar) اضافه می‌شود. برای درک این مسئله مثال‌های زیر را مشاهده کنید:

مثال

1 شششششششششششششششششش

However, it is possible to only scroll inside the modal, instead of the page itself, by adding .modal-dialog-scrollable to .modal-dialog:

با این حال، می‌توان با اضافه کردن .modal-dialog-scrollable به .modal-dialog به جای کل صفحه، scroll را فقط در داخل modal ایجاد کنیم:

مثال

1 شششششششششششششششششش

مرجع کامل Modal بوت استرپ

For a complete reference of all modal options, methods and events, go to our Bootstrap JS Modal Reference.

برای دستیابی به مرجع کامل همه امکانات Modal، متدها و رویداد ها(Events)، به مرجع Modal JS بوت استرپ ما مراجعه کنید.

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_tooltip.asp

Bootstrap 4 Tooltip

راهنمای ابزار (Tooltip) در بوت استرپ 4

Tooltip در بوت استرپ 4

The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element:

مؤلفه Tooltip یک پنجرهٔ بازشو کوچک است که هنگامی که کاربر اشاره گر ماوس را روی یک عنصر قرار می‌دهد ظاهر می‌شود:

نحوه ایجاد Tooltip

To create a tooltip, add the data-toggle="tooltip" attribute to an element.

برای ایجاد راهنمای ابزار، ویژگی data-toggle=”tooltip” را به یک عنصر اضافه کنید.

Use the title attribute to specify the text that should be displayed inside the tooltip:

از ویژگی title برای مشخص کردن متنی که باید داخل Tooltip نمایش داده شود استفاده کنید:

1 شششششششششششششششششش

Note: Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method.

توجه: Tooltipها را باید با jQuery مقداردهی اولیه کرد: عنصر خاصی را انتخاب کرده و متد tooltip() را فراخوانی می‌کنیم.

The following code will enable all tooltips in the document:

کد زیر همهٔ Tooltipها را در این مستند فعال می‌کند:

مثال

1 شششششششششششششششششش

مکان Tooltipها

By default, the tooltip will appear on top of the element.

بطور پیش فرض، Tooltip در بالای عنصر ظاهر می‌شود.

Use the data-placement attribute to set the position of the tooltip on top, bottom, left or the right side of the element:

از ویژگی data-placement برای تنظیم مکان Tooltip در سمت بالا، پایین، چپ یا راست عنصر استفاده کنید:

مثال

1 شششششششششششششششششش

مرجع کامل Tooltip بوت استرپ

For a complete reference of all tooltip options, methods and events, go to our Bootstrap JS Tooltip Reference.

برای دسترسی به مرجع همهٔ امکانات Tooltip، متدها و رویدادها، به مرجع Tooltip JS بوت استرپ ما مراجعه کنید.

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_popover.asp

Bootstrap 4 Popover

Popover در بوت استرپ 4

Popover در بوت استرپ 4

The Popover component is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.

مؤلفه Popover شبیه Tooltip هاست؛ یک پنجره بازشو (Pop-up box) است که هنگام کلیلک کاربر برروی یک عنصر، ظاهر می‌شود. تفاوت آن این است که Popover می‌تواند محتوای بیشتری داشته باشد.

نحوه ایجاد Popover

To create a popover, add the data-toggle="popover" attribute to an element.

برای ایجاد یک Popover، ویژگی data-toggle=”popover” را یه یک عنصر اضافه کنید.

Use the title attribute to specify the header text of the popover, and use the data-content attribute to specify the text that should be displayed inside the popover's body:

از ویژگی title برای تخصیص متن عنوان Popover و از ویژگی data-content برای تخصیص متنی که باید در بدنه Popover نمایش داده شود استفاده کنید:

1 شششششششششششششششششش

Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.

توجه: Popoverها باید توسط jQuery مقداردهی اولیه شود: یعنی باید عنصر مورد نظر را انتخاب کرده و متد popover() را فراخوانی کنید.

The following code will enable all popovers in the document:

کد زیر همهٔ Popoverهای سند را فعال می‌کند:

مثال

1 شششششششششششششششششش

مکان Popoverها

By default, the popover will appear on the right side of the element.

بطور پیش فرض، Popover در سمت راست عنصر ظاهر می‌شود.

Use the data-placement attribute to set the position of the popover on top, bottom, left or the right side of the element:

از ویژگی data-placement برای تنظیم مکان Popover در بالا، پایین، چپ یا راست عنصر استفاده کنید:

مثال

1 شششششششششششششششششش

Note: The placement attributes do not work as you expect if it is not enough room for them. For example: if you use the top placement at the top of a page (where it is no room for it), it will instead display the popover below the element or to the right (wherever it is room for it).

توجه: اگر فضای کافی وجود نداشته باشد، ویژگی‌های مکانی به گونه ای که از آنها انتظار می‌رود عمل نمی‌کنند. برای مثال: اگر مکان دهی بالا در بالای یک صفحه را استفاده کنید (که جای کافی برای آن وجود نداشته باشد)، در عوض popover در پایین یا سمت راست عنصر قرار می‌گیرد (اگر فضای کافی وجود داشته باشد).

بستن Popover

By default, the popover is closed when you click on the element again. However, you can use the data-trigger="focus" attribute which will close the popover when clicking outside the element:

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

با این حال می‌توان از ویژگی”focus” data-trigger= استفاده کرد که Popover را هنگام کلیک در خارج از عنصر می‌بندد:

مثال

1 شششششششششششششششششش

Tip: If you want the popover to be displayed when you move the mouse pointer over the element, use the data-trigger attribute with a value of "hover":

نکته: اگر بخواهید هنگام قرار گرفتن اشاره گر ماوس روی عنصر، Popover نمایش داده شود، از ویژگی data-trigger با مقدار “hover” استفاده کنید:

مثال

1 شششششششششششششششششش

مرجع کامل Popover بوت استرپ

For a complete reference of all popover options, methods and events, go to our Bootstrap JS Popover Reference.

برای دستیابی به مرجع کامل همه امکانات Popover، متدها و رویداد ها(Events)، به مرجع Popover JS بوت استرپ ما مراجعه کنید.

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_toast.asp

Bootstrap 4 Toast

Toast در بوت استرپ 4

Toast در بوت استرپ 4

The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).

مؤلفه toast شبیه کادر هشدار (Alert Box) است که هنگامی که اتفاقی رخ دهد، تنها برای چند ثانیه نمایش داده می‌شود (مثلاً زمانی که کاربر برروی یک کلید کلیک کند، فرمی را ثبت کند و غیره)

نحوه ایجاد Toast

To create a toast, use the .toast class, and add a .toast-header and a .toast-body inside of it:

برای ایجاد toast از کلاس .toast استفاده کرده و .toast-header و یک .toast-body داخل آن اضافه کنید:

1 شششششششششششششششششش

Note: Toasts must be initialized with jQuery: select the specified element and call the toast() method.

نکته: toastها باید با jQuery مقداردهی اولیه (Initialize) شوند: عنصر مورد نظر را انتخاب و متد toast() را فراخوانی کنید.

The following code will show all "toasts" in the document:

کد زیر همهٔ “toast”‌های سند را نشان می‌دهد:

مثال

1 شششششششششششششششششش

آشکار و پنهان کردن Toast

Toasts are hidden by default. Use the data-autohide="false" attribute to show it by default. To close it, use a <button> element and add data-dismiss="toast":

بطور پیش فرض toastها پنهان هستند. از ویژگی data-autohide="false" برای نمایش آن بطور پیش فرض استفاده کنید. برای بستن آن از یک عنصر <button> استفاده کرده و data-dismiss="toast" را به آن اضافه کنید:

مثال

1 شششششششششششششششششش

Notice the mr-auto, ml-2 and mb-1 classes? They are used to add specific margins. You will learn more about them in the Bootstrap 4 Utilities Chapter.

به کلاس‌های mr-auto, ml-2 و mb-1 دقت می‌کنید؟ آنها برای اضافه کردن حاشیه‌های مشخص به کار می‌روند.

در مورد آنها در بخش کاربردهای بوت استرپ ۴ بیشتر خواهید آموخت.

مرجع کامل Toast بوت استرپ

For a complete reference of all toast options, methods and events, go to our Bootstrap JS Toast Reference.

برای دستیابی به مرجع کامل همهٔ امکانات toast، متدها و رویدادها (Events)، به مرجع کامل Toast JS بوت استرپ ما مراجعه کنید.

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_scrollspy.asp

Bootstrap 4 Scrollspy (Advanced)

Scrollspy در بوت استرپ ۴ (پیشرفته)

Scrollspy در بوت استرپ ۴

Scrollspy is used to automatically update links in a navigation list based on scroll position.

Scrollspy برای بروز رسانی خودکار لینک‌ها در یک لیست راهبری (Navigation) براساس مکان پیمایش (Scroll) به کار می‌رود.

نحوه ایجاد Scrollspy

The following example shows how to create a scrollspy:

مثال زیر نحوه ایجاد یک Scrollspy را نشان می‌دهد:

مثال

1 شششششششششششششششششش

مثال Explained

توضیح مثال

Add data-spy="scroll" to the element that should be used as the scrollable area (often this is the <body> element).

data-spy=”scroll” را به عنصری که قرار است به عنوان مکان قابل پیمایش (Scrollable) استفاده شود، اضافه کنید (اغلب، این عنصر <body> است).

Then add the data-target attribute with a value of the id or the class name of the navigation bar (.navbar). This is to make sure that the navbar is connected with the scrollable area.

سپس ویژگی data-target را با مقدار آی دی یا نام کلاس نوار راهبری (.navbar) اضافه کنید. این کار برای اطمینان از اتصال Navbar با مکان قابل پیمایش انجام می‌شود.

Note that scrollable elements must match the ID of the links inside the navbar's list items (&lt;div id="section1"&gt; matches <a href="#section1">).

دقت کنید که عنصرها باید با آی دی لینکهای داخل آیتم‌های Navbar مطابقت داشته باشد (<div id=”section1”> با <a href=”#section1”> مطابقت داشته باشد).

The optional data-offset attribute specifies the number of pixels to offset from top when calculating the position of scroll. This is useful when you feel that the links inside the navbar changes the active state too soon or too early when jumping to the scrollable elements. Default is 10 pixels.

ویژگی data-offset تعداد پیکسل‌های فاصله از بالا را هنگام محاسبه مکان Scroll تعیین می‌کند. این کار زمانی مفید است که احساس می‌کنید لینک‌های داخل Navbar حالت فعال را خیلی زود یا در همان ابتدا هنگام پرش به عنصرهای قابل پیمایش تغییر می‌دهند. مقدار پیش فرض ۱۰ پیکسل است.

Requires relative positioning: The element with data-spy="scroll" requires the CSS position property, with a value of "relative" to work properly.

نیازمند مکان نسبی: عنصر data-spy=”scroll” نیازمند ویژگی مکان CSS با مقدار “relative” است تا به درستی کار کند.

منوی عمودی Scrollspy

در این مثال از Pillهای راهبری عمودی بعنوان منو استفاده می‌کنیم:

مثال

1 شششششششششششششششششش

مرجع کامل Scrollspyبوت استرپ

For a complete reference of all scrollspy options, methods and events, go to our Bootstrap JS Scrollspy Reference.

برای دستیابی به مرجع کامل همه امکانات Scrollspy، متدها (Methods)و رویداد ها(Events)، به مرجع Scrollspy JS بوت استرپ ما مراجعه کنید.

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp

Bootstrap 4 Utilities

امکانات (Utilities) در بوت استرپ 4

Utilityهای بوت استرپ 4

Bootstrap 4 has a lot of utility/helper classes to quickly style elements without using any CSS code.

بوت استرپ 4 کلاس‌های helper / utility زیادی برای استایل دادن سریع به عنصرها بدون استفاده از هیچ کد CSS دارد.

کادرها (Borders)

Use the border classes to add or remove borders from an element:

کلاس‌های border برای اضافه یا حذف کادرهای یک عنصر به کار می‌روند:

مثال

مثال

1 شششششششششششششششششش

رنگ کادر

Add a color to the border with any of the contextual border color classes:

با هریک از کلاس‌های متنی رنگ کادر می‌توان کادر را رنگ آمیزی کرد:

مثال

مثال

1 شششششششششششششششششش

شعاع (Radius) کادر

Add rounded corners to an element with the rounded classes:

با کلاس‌های rounded می‌توان گوشه‌های گِرد به یک عنصر اضافه کرد:

مثال

مثال

1 شششششششششششششششششش

Float و Clearfix

Float an element to the right with the .float-right class or to the left with .float-left, and clear floats with the .clearfix class:

با کلاس .float-right می‌توان یک عنصر را به سمت راست یا با کلاس .float-left عنصر را به سمت چپ شناور کرد (Float) و با استفاده از کلاس .clearfix , Floatها را حذف کرد:

مثال.

مثال

Float leftFloat right

مثال

1 شششششششششششششششششش

Floatهای واکنش گرا

Float an element to the left or to the right depending on screen width, with the responsive float classes (.float-*-left - where * is sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):

با کلاس‌های float واکنش گرا یک عنصر را با توجه به عرض صفحه نمایش به سمت راست یا چپ شناور کنید (.float-*-left|right که * برابر sm (>= ۵۷۶ پیکسل)، md (>= ۷۶۸ پیکسل)، lg (>=۹۹۲ پیکسل) یا xl (>=۱۲۰۰پیکسل) است):

مثال

مثال

1 شششششششششششششششششش

حالت وسط-چین

Center an element with the .mx-auto class (adds margin-left and margin-right: auto):

یک عنصر با کلاس .mx-auto وسط-چین کنید (حاشیه چپ و حاشیه راست :auto اضافه می‌کند):

مثال

مثال

1 شششششششششششششششششش

عرض

Set the width of an element with the w-* classes (.w-25, .w-50, .w-75, .w-100, .mw-100):

عرض یک عنصر با کلاس‌ها w-* تنظیم می‌شود (.w-25،w-50،w-75،w-100،mw-100)

مثال

مثال

1 شششششششششششششششششش

ارتفاع

Set the height of an element with the h-* classes (.h-25, .h-50, .h-75, .h-100, .mh-100):

ارتفاع یک عنصر با کلاس هاس h-* تنظیم می‌شود (.h-25،h-50،h-75،h-100،mh-100)

مثال

مثال

1 شششششششششششششششششش

فاصله گذاری (Spacing)

Bootstrap 4 has a wide range of responsive margin and padding utility classes.

بوت استرپ 4 طیف وسیعی از کلاس کاربردی برای حاشیه درونی (Padding) و حاشیه (Margin) دارد:

They work for all breakpoints: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):

این کلاس‌ها برای همه breakpointها کار می‌کنند: (<=576px) xs ,(>=576px) sm , (>=768px) md , (>=992px) lg یا xl (>=1200px):

The classes are used in the format: {{code|code={property}{sides}-{size}|lang=css|class=|id=|style=color: #FF9933;}} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

کلاس‌ها در این فرمت‌های: {property}{sides}-{size} برای xs و فرمت‌های {property}{sides}-{breakpoint}-{size} برای sm, md, lg و xl استفاده می‌شوند.

Where property is one of:

بطوریکه property یکی از موارد زیر است:

m - sets margin

m- تنظیم حاشیه (Margin)

p - sets padding

p – تنظیم حاشیه درونی (Padding)

Where sides is one of:

و side یکی از موارد زیر است:

t - sets margin-top or padding-top

t تنظیم margin-top یا padding-top

b - sets margin-bottom or padding-bottom

b تنظیم margin-bottom یا padding-bottom

l - sets margin-left or padding-left

l تنظیم margin-left یا padding-left

r - sets margin-right or padding-right

r تنظیم margin-right یا padding-right

x - sets both padding-left and padding-right or margin-left and margin-right

x تنظیم margin-left و margin-right یا padding-left و padding-right

y - sets both padding-top and padding-bottom or margin-top and margin-bottom

y تنظیم margin-bottom و margin-top یا padding-bottom و padding-top

blank - sets a margin or padding on all 4 sides of the element

blank – تنس=ظیم margin یا padding در هر چهار طرف عنصر

Where size is one of:

و size یکی از موارد زیر است:

0 - sets margin or padding to 0

۰ تنظیم margin یا padding برابر 0

1 - sets margin or padding to .25rem (4px if font-size is 16px)

۱ تنظیم margin یا padding برابر .25rem (۴پیکسل اگر سایز خط برابر ۱۶ پیکسل باشد)

2 - sets margin or padding to .5rem (8px if font-size is 16px)

۲ تنظیم margin یا padding برابر .5rem (۸ پیکسل اگر سایز خط برابر ۱۶ پیکسل باشد)

3 - sets margin or padding to 1rem (16px if font-size is 16px)

۳ تنظیم margin یا padding برابر 1rem (۱۶ پیکسل اگر سایز خط برابر ۱۶ پیکسل باشد)

4 - sets margin or padding to 1.5rem (24px if font-size is 16px)

۴ تنظیم margin یا padding برابر 1.5rem (۲۴ پیکسل اگر سایز خط برابر ۱۶ پیکسل باشد)

5 - sets margin or padding to 3rem (48px if font-size is 16px)

۵ تنظیم margin یا padding برابر 3rem (۴۸پیکسل اگر سایز خط برابر ۱۶ پیکسل باشد)

auto - sets margin to auto

Auto تنظیم margin برابر با auto

Note: margins can also be negative, by adding an "n" in front of size:

نکته: با اضافه کردن “n” جلوی سایز، marginها می‌توانند مقدار منفی هم بگیرند:

n1 - sets margin to -.25rem (-4px if font-size is 16px)

n1- تنظیم margin برابر با -.25rem (۴- پیکسل اگر سایز خط ۱۶ پیکسل باشد)

n2 - sets margin to -.5rem (-8px if font-size is 16px)

n2- تنظیم margin برابر با -.5rem (۸- پیکسل اگر سایز خط ۱۶ پیکسل باشد)

n3 - sets margin to -1rem (-16px if font-size is 16px)

n3- تنظیم margin برابر با -1rem (۱۶- پیکسل اگر سایز خط ۱۶ پیکسل باشد)

n4 - sets margin to -1.5rem (-24px if font-size is 16px)

n4- تنظیم margin برابر با -1.5rem (۲۴- پیکسل اگر سایز خط ۱۶ پیکسل باشد)

n5 - sets margin to -3rem (-48px if font-size is 16px)

n5- تنظیم margin برابر با -3rem (۴۸- پیکسل اگر سایز خط ۱۶ پیکسل باشد)

مثال

مثال

1 شششششششششششششششششش

More Spacing Examples

مثال‌های بیشتر از فاصله گذاری

.m-# / m-*-# margin on all sides

حاشیه در همهٔ اضلاع

Try it
.mt-# / mt-*-# margin top

حاشیه بالا

Try it
.mb-# / mb-*-# margin bottom

حاشیه پایین

Try it
.ml-# / ml-*-# margin left

حاشیه چپ

Try it
.mr-# / mr-*-# margin right

حاشیه راست

Try it
.mx-# / mx-*-# margin left and right

حاشیه چپ و راست

Try it
.my-# / my-*-# margin top and bottom

حاشیه بالا و پایین

Try it
.p-# / p-*-# padding on all sides

padding در همهٔ اضلاع

Try it
.pt-# / pt-*-# padding top

padding بالا

Try it
.pb-# / pb-*-# padding bottom

padding پایین

Try it
.pl-# / pl-*-# padding left

padding چپ

Try it
.pr-# / pr-*-# padding right

padding راست

Try it
.py-# / py-*-# padding top and bottom

padding بالا و پایین

Try it
.px-# / px-*-# padding left and right

padding راست و چپ

Try it

سایه‌ها (Shadows)

Use the shadow- classes to add shadows to an element:

از کلاس‌های –shadow برای اضافه کردن سایه به یک عنصر استفاده کنید:

مثال

مثال

1 شششششششششششششششششش

Align عمودی

Use the align- classes to change the alignment of elements (only works on inline, inline-block, inline-table and table cell elements):

از کلاس‌های –align برای تغییر نحوه قرارگیری (alignment) عناصر استفاده کنید (فقط برروی عنصرهای inline, inline-block, inline-table و table cellاجرا می‌شود):

مثال

مثال

1 شششششششششششششششششش

Embedهای واکنش گرا

Create responsive video or slideshow embeds based on the width of the parent.

Embedهای ویدیویی یا اسلاید شو براساس عرض عنصر والد می‌سازد.

Add the .embed-responsive-item to any embed elements (like <iframe> or <video>) in a parent element with .embed-responsive and an aspect ratio of your choice:

.embed-responsive-item را به هر عنصر embed (مانند <iframe> یا <video>) در عنصر والد با .embed-responsive و یک نسبت ابعاد انتخاب خود اضافه کنید:

مثال

1 شششششششششششششششششش

قابلیت دیدن (Visibility)

Use the .visible or .invisible classes to control the visibility of elements. Note: These classes do not change the CSS display value. They only add visibility:visible or visibility:hidden:

از کلاس .visible یا .invisible برای کنترل قابلیت مشاهده عناصر استفاده می‌شود. توجه: این کلاس‌ها مقدار نمایش css را تغییر نمی‌دهد. آنها visibility:visible یا visibility:hidden را اضافه می‌کنند:

مثال

مثال

1 شششششششششششششششششش

مکان

Use the .fixed-top class to make any element fixed/stay at the top of the page:

از کلاس .fixed-top برای ایجاد ثابت نگه داشتن عنصر در بالای صفحه استفاده می‌شود:

مثال

1 شششششششششششششششششش

Use the .fixed-bottom class to make any element fixed/stay at the bottom of the page:

از کلاس .fixed-bottom برای ایجاد ثابت نگه داشتن عنصر در پایین صفحه استفاده می‌شود:

مثال

1 شششششششششششششششششش

Use the .sticky-top class to make any element fixed/stay at the top of the page when you scroll past it. Note: This class does not work in IE11 and earlier (will treat it as position:relative).

از کلاس .sticky-top برای ثابت کردن یک عنصر هنگام پیمایش، در بالای صفحه استفاده می‌شود. توجه: این کلاس در IE11 و نسخه‌های قدیمی تر اجرا نمی‌شود (با آن بعنوان position:relative برخورد می‌شود).

مثال

1 شششششششششششششششششش

آیکون بستن (Close)

Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the &amp;times; symbol to create the actual icon (a better looking "x"). Also note that it floats right by default:

از کلاس .close برای استایل دادن به یک آیکون بستن استفاده می‌شود. اغلب این کلاس برای هشدارها(Alerts) و modalها به کار می‌رود. دقت کنید که از سمبل &times; برای ایجاد این آیکون استفاده می‌کنیم (“x” با ظاهر بهتر). همچنین دقت داشته باشید که این آیکون بطور پیش فرض در سمت راست قرار می‌گیرد:

مثال

مثال

1 شششششششششششششششششش

صفحه خوان‌ها (Screenreaders)

Use the .sr-only class to hide an element on all devices, except screen readers:

از کلاس .sr-only برای پنهان کردن یک عنصر در همهٔ دستگاه‌ها به جز صفحه خوان‌ها استفاده می‌شود:

مثال

1 شششششششششششششششششش

رنگ‌ها

As described in the Colors chapter, here is a list of all text and background color classes:

همانطور که در بخش رنگ‌ها توضیح داده شد، لیستی از کلاس‌های رنگ پیش زمینه و متن به شرح زیر است:

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:

کلاس‌های رنگ‌های متن عبارتند از : .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (رنگ بدنهٔ پیش فرض / اغلب سیاه) و .text-light:

مثال

Contextual text classes can also be used on links, which will add a darker hover color:

کلاس‌های متن contextual را می‌توان برای لینک‌ها هم استفاده کرد، که یک hover با رنگ تیره‌تر ایجاد می‌کند:

مثال

You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

همچنین می‌توانید با کلاس .text-black-50 یا .text-white-50شفافیت ۵۰٪ برای متن‌های سفید یا سیاه ایجاد کرد:

مثال

1 شششششششششششششششششش

رنگ‌های پیش زمینه

The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

کلاس‌های رنگ‌های پیش زمینه عبارتند از :.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark و .bg-light

Note that background colors do not set the text color, so in some cases you'll want to use them together with a .text-* class.

دقت کنید که رنگ‌های پیش زمینه، رنگ متن را تعیین نمی‌کنند، بنابراین در بعضی موارد ممکن است بخواهید آنها را با کلاس .text-* با هم استفاده کنید.

مثال

کلاس‌های متن/ تایپوگرافی

همان‌طور که در بخش تایپوگرافی توضیح داده شد، لیستی از کلاس‌های متن/ تایپوگرافی به شرح زیر است:

Class Description مثال
.display-* Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are four classes to choose from: .display-1, .display-2, .display-3, .display-4عنوان‌های نمایشی کمی متفاوت تر از عنوان‌های عادی هستند (اندازه خط بزرگتر و پهنای قلم (font-weight) کمتر) و چهار کلاس برای آنها وجود دارد: .display-1،display-2،display-3،display-4 Try it
.font-weight-bold Bold text

متن برجسته (Bold)

Try it
.font-weight-bolder Bolder bold text

متن برجستهٔ برجسته تر

Try it
.font-weight-normal Normal text

متن معمولی

Try it
.font-weight-light Light weight text

متن سبک (پهنای قلم کمتر)

Try it
.font-weight-lighter Lighter weight text

متن سبکتر

Try it
.font-italic Italic text

متن Italic

Try it
.lead Makes a paragraph stand out

پاراگراف را برجسته می‌کند

Try it
.small Indicates smaller text (set to 85% of the size of the parent)

متن را کوچکتر می‌کند (به اندازه ۸۵٪ اندازه والد تنظیم می‌شود)

Try it
.text-break Prevents long text from breaking layout

از شکسته شدن چیدمان متن طولانی جلوگیری می‌کند

Try it
.text-center Indicates center-aligned text

متن را وسط-چین نشان می‌دهد

Try it
.text-decoration-none Removes the underline from a link

خط زیرین را لینک‌ها حدف می‌کند

Try it
.text-left Indicates left-aligned text

متن را چپ- چین می‌کند

Try it
.text-justify Indicates justified text

متن را بصورت justify شده نشان می‌دهد

Try it
.text-monospace Monospaced text

متن Monospace شده

Try it
.text-nowrap Indicates no wrap text

متن را بدون پوشش نشان می‌دهد

Try it
.text-lowercase Indicates lowercased text

متن را با حروف کوچک نشان می‌دهد

Try it
.text-reset Resets the color of a text or a link (inherits the color from its parent)

رنگ متن یا یک لینک را Reset می‌کند (رنگ عنصر والد را به ارث می‌برد)

Try it
.text-right Indicates right-aligned text

متن را راست-چین نشان می‌دهد

Try it
.text-uppercase Indicates uppercased text

متن را با حروف بزرگ نشان می‌دهد

Try it
.text-capitalize Indicates capitalized text

حروف اول کلمات را تبدیل به حروف بزرگ می‌کند

Try it
.initialism Displays the text inside an &lt;abbr&gt; element in a slightly smaller font size

متن درون عنصر <abbr> را با اندازه خط کمی کوچکتر نشان می دهد

Try it
.list-unstyled Removes the default list-style and left margin on list items (works on both &lt;ul&gt; and &lt;ol&gt;). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well)

استایل لیست پیش فرض و حاشیه چپ را از روی آیتم‌های لیست حذف می‌کند (بر روی هر دو تگ <ul>و <ol> عمل می کند). این کلاس فقط برروی فرزندان بلافاصله ی آیتم های لیست اعمال می شود (برای حذف استایل های لیست پیش فرض از هر لیست تو در تو، این کلاس را روی همه لیست های تو در تو اعمال کنید)

Try it
.list-inline Places all list items on a single line (used together with .list-inline-item on each <li> elements)

همهٔ آیتم‌های لیست را در یک خط قرار می‌دهد (با .list-inline-item در هر عنصر <li>با هم استفاده می شوند )

Try it
.pre-scrollable Makes a &lt;pre&gt; element scrollable

یک عنصر<pre> را قابل پیمایش می کند

Try it

عنصرهای بلاک(Block)

To make an element into a block element, add the .d-block class. Use any of the d-*-block classes to control WHEN the element should be a block element on a specific screen width:

بوسیله کلاس .d-block یک عنصر را به یک عنصر بلاک تبدیل کنید. از هر یک از کلاس‌های d-*-block برای کنترل زمانی که عنصر باید در صفحه نمایش با اندازه خاصی بلاک شود، استفاده کنید:

مثال

مثال

1 شششششششششششششششششش

کلاس‌های نمایش (Display) دیگر

Other display classes are also available:

کلاس‌های نمایش دیگری نیز وجود دارند:

Class

کلاس

Description

تعریف

مثال
.d-none Hides an element

یک عنصر را پنهان می‌کند

Try it
.d-*-none Hides an element on a specific screen size

عنصری را در صفحه نمایش با اندازه خاصی پنهان می‌کند

Try it
.d-inline Makes an element inline

عنصری را درون خطی می‌کند

Try it
.d-*-inline Makes an element inline on a specific screen size

عنصر را در صفحه نمایش با اندازه خاص، درون خطی می‌کند

Try it
.d-inline-block Makes an element inline block

عنصر را به بلاک درون خطی تبدیل می‌کند

Try it
.d-*-inline-block Makes an element inline block on a specific screen size

عنصر را در صفحه نمایش با اندازه خاص، به بلاک درون خطی تبدیل می‌کند

Try it
.d-table Makes an element display as a table

عنصری را به شکل جدول درمی‌آورد

Try it
.d-*-table Makes an element display as a table on a specific screen size

عنصر را در صفحه نمایش با اندازه خاص، به شکل جدول درمی‌آورد

Try it
.d-table-cell Makes an element display as a table cell

عنصری را به سلول جدول تبدیل می‌کند

Try it
.d-*-table-cell Makes an element display as a table cell on a specific screen size

عنصر را در صفحه نمایش با اندازه خاص، به یک سلول جدول تبدیل می‌کند

Try it
.d-table-row Makes an element display as a table row

عنصری را به ردیف جدول تبدیل می‌کند

Try it
.d-*-table-row Makes an element display as a table row on a specific screen size

عنصر را در صفحه نمایش با اندازه خاص، به یک ردیف جدول تبدیل می‌کند

Try it
.d-flex Creates a flexbox container and transforms direct children into flex items

یک ظرف flexbox ایجاد کرده و فرزندان بی واسطه را به آیتم‌های flex تبدیل می‌کند

Try it
.d-*-flex Creates a flexbox container on a specific screen size

یک ظرف flexbox در صفحه نمایش با اندازه خاص تولید می‌کند

Try it
.d-inline-flex Creates an inline flexbox container

یک ظرف flexbox درون خطی ایجاد می‌کند

Try it
.d-*-inline-flex Creates an inline flexbox container on a specific screen size

یک ظرف flexbox درون خطی در صفحه نمایش با اندازه خاص تولید می‌کند

Try it

Flex

Use .flex-* classes to control the layout with flexbox.

از کلاس‌های .flex* برای کنترل چیدمان با flexbox استفاده می‌شود.

Read more about Bootstrap 4 Flex, in our next chapter.

در مورد Flex در بوت استرپ ۴ در بخش بعدی بیشتر خواهید آموخت.

مثال

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_flex.asp

Bootstrap 4 Flex

Flex در بوت استرپ ۴

Flex در بوت استرپ ۴

Use flex classes to control the layout of Bootstrap 4 components.

از کلاس‌های flex برتی کنترل چیدمان مؤلفه‌های بوت استرپ ۴ استفاده می‌شود.

Flexbox

The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats, to handle the layout.

بزرگترین تفاوت بین بوت استرپ۳ و بوت استرپ ۴ این است که بوت استرپ ۴ بجای floatها از flexbox برای مدیریت چیدمان استفاده می‌کند.

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. If you are new to flex, you can read about it in our CSS Flexbox Tutorial.

ماژول چیدمان جعبه منعطف، طراحی ساختار چیدمتن واکنش گرا را بدون float یا مکانیابی (Positioning) بهتر می‌کند. اگر با flex ناآشنا هستید، می‌توانید درآموزش CSS Flexbox بیشتر در مورد آن مطالعه کنید.

Note: Flexbox is not supported in IE9 and earlier versions.

توجه: flexbox در IE9 و نسخه‌های قدیمی تر پشتیبانی نمی‌شود.

If you require IE8-9 support, use Bootstrap 3. It is the most stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes. However, no new features will be added to it.

اگر نیازمند پشتیبانی IE9 هستید، از بوت استرپ۳ استفاده کنید. زیرا پایدارتین نسخهٔ بوت استرپ است و همچنان توسط تیم بوت استرپ برای bugfixهای مهم و تغییرات مستندسازی پشتیبانی می‌شود. با این حال، هیچ ویژگی‌های جدیدی به آن اضافه نمی‌شود.

To create a flexbox container and to transform direct children into flex items, use the d-flex class:

برای ایجاد ظرف flexbox و تبدیل فرزندان بی واسطه به آیتم‌های flex، از کلاس d-flex استفاده کنید

مثال

مثال

1 شششششششششششششششششش

To create an inline flexbox container, use the d-inline-flex class:

برای ایجاد ظرف یک flex درون خطی، از کلاس d-inline-flex استفاده کنید:

مثال

مثال

1 شششششششششششششششششش

جهت افقی

Use .flex-row to display the flex items horizontally (side by side). This is default.

از. flex-row برای نمایش افقی آیتم‌های flex (کنار هم) استفاده کنید. این حالت پیش فرض است.

Tip: Use .flex-row-reverse to right-align the horizontal direction:

نکته: از .flex-row-reverse برای راست-چین کردن جهت افقی استفاده کنید:

مثال

مثال

1 شششششششششششششششششش

جهت عمودی

Use .flex-column to display the flex items vertically (on top of each other), or .flex-column-reverse to reverse the vertical direction:

از .flex-column برای نمایش آیتم‌های flex بطور عمودی (بالای یکدیگر) یا برای معکوس کردن جهت عمودی از. flex-column-reverse استفاده کنید:

مثال

مثال

1 شششششششششششششششششش

Justify کردن محتوا

Use the .justify-content-* classes to change the alignment of flex items. Valid classes are start (default), end, center, between or around:

از کلاس‌های .justify-content-* برای تغییر alignment آیتم‌های flex استفاده کنید. کلاس‌های معتبر شامل start (پیش فرض)، end, center, between یا around هستند:

مثال

مثال

1 شششششششششششششششششش

عرض‌های مساوی / Fill

Use .flex-fill on flex items to force them into equal widths:

از. flex-fill روی آیتم‌های flex استفاده کنید تا عرض‌های آنها مساوی شود:

مثال

مثال

1 شششششششششششششششششش

رشد

Use .flex-grow-1 on a flex item to take up the rest of the space. In the example below, the first two flex items take up their necessary space, while the last item takes up the rest of the available space:

برای اشغال کردن فضای باقیمانده، از. flex-grow-1 روی یک آیتم flex استفاده کنید. در مثال زیر، دو آیتم flex اول فضای مورد نیاز خود را اشغال می‌کنند، درحالیکه آیتم آخر همهٔ فضای باقیمانده را اشغال می‌کند:

مثال

مثال

1 شششششششششششششششششش

Tip: Use .flex-shrink-1 on a flex item to make it shrink if necessary.

نکته: از. flex-shrink-1 روی آیتم flex استفاده کنید تا در صورت لزوم آنرا فشرده کنید.

ترتیب

Change the visual order of a specific flex item(s) with the .order classes. Valid classes are from 0 to 12, where the lowest number has highest priority (order-1 is shown before order-2, etc..):

ترتیب بصری آیتم(ها) را با کلاس‌های .order می‌توان تغییر داد. کلاس‌های معتبر از ۰ تا ۱۲ هستند بطوری که کمترین عدد بالاترین اولویت را دارد (order-1 قبل از order-2 و … نمایش داده می‌شود):

مثال

مثال

1 شششششششششششششششششش

حاشیه‌های خودکار (Auto Margins)

Easily add auto margins to flex items with .mr-auto (push items to the right), or by using .ml-auto (push items to the left):

با .mr-auto به راحتی به آیتم‌های flex حاشیه اضافه کنید (آیتم را به سمت راست ببرید) یا با .ml-auto (آیتم را به سمت چپ ببرید):

مثال

مثال

1 شششششششششششششششششش

Wrap

Control how flex items wrap in a flex container with .flex-nowrap (default), .flex-wrap or .flex-wrap-reverse.

کنترل اینکه آیتم‌های flex چگونه داخل یک ظرف (Container) flex قرار بگیرند بوسیلهٔ کلاس‌های .flex-nowrap (پیش فرض)،flex-wrap یا .flex-wrap-default انجام می‌شود.

Click on the buttons below to see the difference between the three classes, by changin the wrapping of the flex items in the example box:

برای مشاهدهٔ تفاوت بین این سه کلاس با تغییر wrapping آیتم‌های flex برروی کلیدها در کادر مثال کلیک کنید:

flex-wrap flex-wrap-reverse flex-nowrap

مثال

مثال

1 شششششششششششششششششش

نحوهٔ قرارگیری (Align) محتوا

Control the vertical alignment of gathered flex items with the .align-content-* classes. Valid classes are .align-content-start (default), .align-content-end, .align-content-center, .align-content-between, .align-content-around and .align-content-stretch.

با کلاس‌های .align-content-* نحوه قرارگیری عمودی آیتم‌های جمع شده flex را می‌توان کنترل کرد. کلاس‌های معتبر عبارتند از :.align-content-start (پیش فرض)،align-content-end, .align-content-center, .align-content-between, .align-content-around و .align-content-stretch.

Note: These classes have no effect on single rows of flex items.

توجه: این کلاس‌ها هیچ اثری برروی ردیف‌های تکی آیتم‌های flex ندارند.

Click on the buttons below to see the difference between the five classes, by changing the vertical alignment of the flex items in the example box:

در مثال زیر برروی کلیدها کلیک کنید تا تفاوت بین این پنج کلاس را با تغییر alignment عمودی آیتم‌های flex مشاهده کنید:

align-content-start align-content-end align-content-center align-content-around align-content-stretch

مثال

مثال

1 شششششششششششششششششش

نحوه قرارگیری (Align)آیتم‌ها

Control the vertical alignment of single rows of flex items with the .align-items-* classes. Valid classes are .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and .align-items-stretch (default).

Alignment عمودی یک ردیف از آیتم‌های flex را با کلاس‌های .align-items-* می‌توان کنترل کرد. کلاس‌های نعتبر عبارتند از : .align-items-start, .align-items-end, .align-items-center, .align-items-baseline، و .align-items-stretch (پیش فرض).

Click on the buttons below to see the difference between the five classes:

برای مشاهده تفاوت این پنج کلاس، برروی کلیدهای زیر کلیک کنید:

align-items-start align-items-end align-items-center align-items-baseline align-items-stretch

مثال

مثال

1 شششششششششششششششششش

Align Self

Control the vertical alignment of a specified flex item with the .align-self-* classes. Valid classes are .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, and .align-self-stretch (default).

با استفاده ارز کلاس‌های .align-self-*نحوه قرارگیری یک آیتم flex خاص را می‌توان کنترل کرد. کلاس‌های معتبر عبارتند از :.align-self-start, .align-self-end, .align-self-center, .align-self-baseline، و .align-self-stretch (پیش فرض).

Click on the buttons below to see the difference between the five classes:

برای مشاهده تفاوت این پنج کلاس، برروی کلیدهای زیر کلیک کنید:

align-self-start align-self-end align-self-center align-self-baseline align-self-stretch

مثال

مثال

1 شششششششششششششششششش

کلاس‌های Flex واکنش گرا

All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size.

همهٔ کلاس‌های flex کلاس‌های واکنش گرای اضافی دارند، که تنظیم یک کلاس flex خاص را در یک صفحه نمایش خاص آسان می‌کند.

The * symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.

نماد * را می‌توان با sm, md, lg یا xl جایگزین کزد که نشان دهندهٔ صفحه نمایش‌های کوچک، متوسط، بزرگ و خیلی بزرگ هستند.

Class

کلاس

Description

توضیح

مثال
Flex Container

ظرف Flex

.d-*-flex Creates a flexbox container for different screens

طرف flexbox را برای صفحه نمایش‌های مختلف ایجاد می‌کند

Try it
.d-*-inline-flex Creates an inline flexbox container for different screens

طرف flexbox درون خطی را برای صفحه نمایش‌های مختلف ایجاد می‌کند

Try it
Direction

جهت

.flex-*-row Display flex items horizontally on different screens

آیتم‌های flex را بطور افقی در صفحه نمایش‌های مختلف نشان می‌دهد

Try it
.flex-*-row-reverse Display flex items horizontally, and right-aligned, on different screens

آیتم‌های flex را بطور افقی و راست-چین در صفحه نمایش‌های مختلف نشان می‌دهد

Try it
.flex-*-column Display flex items vertically on different screens

آیتم‌های flex را بطور عمودی در صفحه نمایش‌های مختلف نشان می‌دهد

Try it
.flex-*-column-reverse Display flex items vertically, with reversed order, on different screens screens

آیتم‌های flex را بطور عمودی و با ترتیب معکوس در صفحه نمایش‌های مختلف نشان می‌دهد

Try it
Justified Content

محتوای justify شده

.justify-content-*-start Display flex items from the start (left-aligned) on different screens

آیتم‌های flex را از ابتدا (چپ-چین) در صفحه نمایش‌های مختلف نشان می‌دهد

Try it
.justify-content-*-end Display flex items at the end (right-aligned) on different screens

آیتم‌های flex را از ابتدا (راست-چین) در صفحه نمایش‌های مختلف نشان می‌دهد

Try it
.justify-content-*-center Display flex items in the center of a flex container on different screens

آیتم‌های flex را در مرکز ظرف flex صفحه نمایش‌های مختلف نشان می‌دهد

Try it
.justify-content-*-between Display flex items in "between" on different screens

آیتم‌های flex را در "میان" در صفحه نمایش‌های مختلف نشان می‌دهد

Try it
.justify-content-*-around Display flex items "around" on different screens

آیتم‌های flex را "در اطراف" در صفحه نمایش‌های مختلف نشان می‌دهد

Try it
Fill / Equal Width

عرض برابر / Fill

.flex-*-fill Force flex items into equal widths on different screens

آیتم‌های flex را به عرض‌های برابر در صفحه نمایش‌های مختلف نمایش می‌دهد

Try it
Grow

رشد

.flex-*-grow-0 Don't make the items grow on different screens

از رشد آیتم‌ها در صفحه نمایش‌های مختلف جلوگیری می‌کند

.flex-*-grow-1 Make items grow on different screens

آیتم‌ها را در صفحه نمایش‌های مختلف رشد می‌دهد

Shrink

فشرده

.flex-*-shrink-0 Don't make the items shrink on diferent screens

از فشرده شدن آیتم‌ها در صفحه نمایش‌های مختلف جلوگیری می‌کند

.flex-*-shrink-1 Make items shrink on different screens

آیتم‌ها را در صفحه نمایش‌های مختلف فشرده می‌کند

Order

ترتیب

.order-*-۰–۱۲ Change the order from 0 to 12 on small screens

ترتیب را از ۰ تا ۱۲ در صفحه نمایش‌های کوچک تغییر می‌دهد

Try it
Wrap
.flex-*-nowrap Don't wrap items on different screens

آیتم‌ها را در صفحه نمایش‌های متفاوت wrap نمی‌کند

Try it
.flex-*-wrap Wrap items on different screens

آیتم‌ها را در صفحه نمایش‌های متفاوت wrap می‌کند

Try it
.flex-*-wrap-reverse Reverse the wrapping of items on different screens

Wrapping آیتم‌ها را در صفحه نمایش‌های متفاوت معکوس می‌کند

Try it
Align Content

نحوه قرارگیری محتوا

.align-content-*-start Align gathered items from the start on different screens

Align آیتم‌های جمع شده از ابتدا در صفحه نمایش‌های متفاوت

Try it
.align-content-*-end Align gathered items at the end on different screens

Align آیتم‌های جمع شده از در انتها در صفحه نمایش‌های متفاوت

Try it
.align-content-*-center Align gathered items in the center on different screens

Align آیتم‌های جمع شده در مرکز صفحه نمایش‌های متفاوت

Try it
.align-content-*-around Align gathered items "around" on different screens

Align آیتم‌های جمع شده "در اطراف" در صفحه نمایش‌های متفاوت

Try it
.align-content-*-stretch Stretch gathered items on different screens

کشیدن آیتم‌های جمع شده در صفحه نمایش‌های مختلف

Try it
Align Items

نحوه قرار گرفتن آیتم‌ها

.align-items-*-start Align single rows of items from the start on different screens

Align یک ردیف از آیتم‌ها از ابتدا در صفحه نمایش‌های مختلف

Try it
.align-items-*-end Align single rows of items at the end on different screens

Align یک ردیف از آیتم‌ها در انتها در صفحه نمایش‌های مختلف

Try it
.align-items-*-center Align single rows of items in the center on different screens

Align یک ردیف از آیتم‌ها در مرکز در صفحه نمایش‌های مختلف

Try it
.align-items-*-baseline Align single rows of items on the baseline on different screens

Align یک ردیف از آیتم‌ها در baseline در صفحه نمایش‌های مختلف

Try it
.align-items-*-stretch Stretch single rows of items on different screens

کشیدن ردیفی از آیتم‌ها در صفحه نمایش‌های متفاوت

Try it
Align Self
.align-self-*-start Align a flex item from the start on different screens

Align یک آیتم flex از ابتدا در صفحه نمایش‌های مختلف

Try it
.align-self-*-end Align a flex item at the end on different screens

Align یک آیتم flex در انتها در صفحه نمایش‌های مختلف

Try it
.align-self-*-center Align a flex item in the center on different screens

Align یک آیتم flex در مرکز در صفحه نمایش‌های مختلف

Try it
.align-self-*-baseline Align a flex item on the baseline on different screens

Align یک آیتم flex در baseline در صفحه نمایش‌های مختلف

Try it
.align-self-*-stretch Stretch a flex item on different screens

کشیدن یک آیتم flex در صفحه نمایش‌های متفاوت

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_icons.asp

Bootstrap 4 Icons

آیکون‌ها در بوت استرپ ۴

آیکون‌ها در بوت استرپ ۴

Bootstrap 4 does not have its own icon library (Glyphicons from Bootstrap 3 are not supported in BS4). However, there are many free icon libraries to choose from, such as Font Awesome and Google Material Design Icons.

بوت استرپ ۴ کتابخانه آیکون اختصاصی خودش را ندارد (گلیف آیکون‌های بوت استرپ۳ در بوت استرپ ۴ پشتیبانی نمی‌شوند). اما کتابخانه‌های آیکون رایگان زیادی وجود دارند که می‌توان از میان آنها انتخاب کرد، مانند Font Awesome و Google Material Design Icons.

To use Font Awesome icons, add the following to your HTML page (No downloading or installation is required):

برای استفاده ازآیکون‌های Font Awesome، کدهای زیر را به ضفحه HTML خود اضافه کنید (نیازی به دانلود و نصب نیست):
1 شششششششششششششششششش
Then, add the name of the icon class to any inline HTML element (like &lt;i&gt; or &lt;span&gt;):

سپس، نام کلاس آیکون را به هر عنصر درون خطی (Inline) HTML اضافه کنید (مانند <i> یا <span>):

مثال

1 شششششششششششششششششش
The list of all Font Awesome icons can be found here: https://www.w3schools.com/icons/default.asp

لیست همهٔ آیکون‌های Font Awesome را می‌توانید اینجا پیدا کنید: https://www.w3schools.com/icons/default.asp

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_media_objects.asp

Bootstrap 4 Media Objects

Media Objectها در بوت استرپ 4

Media objectها

Bootstrap provides an easy way to align media objects (like images or videos) together with content. Media objects are often used to display blog comments, tweets and so on:

بوت استرپ راه ساده ای را برای قرار دادن Media Objectها (مانند تصاویر و ویدیوها) در سمت چپ یا راست برخی از محتواها فراهم کرده‌است. این ویژگی را می‌توان برای نشان دادن نظرهای وبلاگ، توییت‌ها و مانند آن به کار برد.

Basic Media Object

To create a media object, add the .media class to a container element, and place media content inside a child container with the .media-body class. Add padding and margins as needed, with the spacing utilities:

برای ایجاد یک object media کلاس .media را به ظرف عنصر اضافه می‌کنیم، و محتوای media را داخل یک فرزند ظرف با کلاس .media-body قرار می‌دهیم. با استفاده از کاربردهای فاصله گذاری (Spacing Utilities) padding و حاشیه مورد نیاز را ایجاد کنید:

مثال

1 شششششششششششششششششش

Media Objectهای تودرتو

Media objects can also be nested (a media object inside a media object):

Media Objectها می‌توانند تودرتو نیز باشند (یک Media Object داخل یک Media Object):

To nest media objects, place a new .media container inside the .media-body container:

برای تودرتو ساختن media objectها، یک ظرف(Container) جدید .media داخل ظرف .media-body اضافه کنید:

مثال

1 شششششششششششششششششش

Media objectهای راست-چین

To right-align the media image, add the image after the .media-body container:

برای راست-چین کردن media image تصویر را بعد از ظرف .media-body قرار دهید:

مثال

1 شششششششششششششششششش

قرار گرفتن در بالا، وسط یا پایین

Use the flex utilities, align-self-* classes to place the media object on the top, middle or at the bottom:

از کاربردهای flex، کلاس‌های align-self-* برای قرار دادن media objectها در بالا، وسط یا پایین استفاده کنید:


مثال

1 شششششششششششششششششش

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_filters.asp

Bootstrap 4 Filters (Advanced)

فیلترها در بوت استرپ 4 (پیشرفته)

فیلترهای بوت استرپ 4

Bootstrap does not have a component that allows filtering. However, we can use jQuery to filter / search for elements.

بوت استرپ مؤلفه ای که فیلتر را اعمال کند ندارد. با این حال می‌توان از jQuery برای فیلتر / جستجوی عنصرها استفاده کرد.

فیلتر کردن جدول‌ها

Perform a case-insensitive search for items in a table:

یک جستجوی Case-insensitive (عدم حساسیت به بزرگی و کوچکی حروف) را برای آیتم‌های جدول انجام می‌دهد:

مثال

مثال

Type something in the input field to search the table for first names, last names or emails:


jQuery

1 شششششششششششششششششش
مثال explained: We use jQuery to loop through each table rows to check if there are any text values that matches the value of the input field. The toggle method hides the row (display:none) that does not match the search. We use the toLowerCase() method to convert the text to lower case, which makes the search case insensitive (allows "john", "John", and even "JOHN" on search).

توضیح مثال: از jQuery برای گشتن در هر ردیف جدول استفاده می‌شود تا وجود هرگونه متن مطابق با عبارت تایپ شده در فیلد ورودی بررسی شود.

متد toggle() ردیفی را پنهان می‌کند (display:none) که با عبارت جستجو مطابقت ندارد. از متد toLowerCase() برای تبدیل متن به حروف کوچک استفاده می‌شود که جستجو را غیرحساس به بزرگی و کوچکی حروف (insensitive) می‌کند (جستجوی “john”، “John” و حتی “JOHN” را ممکن می‌سازد).

Filter Lists

فیلتر کردن لیست‌ها

Perform a case-insensitive search for items in a list:

جستجوی غیرحساس به بزرگی و کوچکی حروف (case-insensitive) را در میان آیتم‌های لیست انجام می‌دهد:

مثال

فیلتر کردن هرچیزی

Perform a case-insensitive search for text inside a div element:

یک جستجوی غیرحساس به بزرگی و کوچکی حروف (Case-insensitive) برروی متن دورن یک عنصر div انجام می‌دهد:

مثال

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

Bootstrap 4 Grid System

سیستم شبکه بندی بوت استرپ ۴

سیستم شبکه بندی بوت استرپ ۴

Bootstrap's grid system allows up to 12 columns across the page.

سیستم شبکه ای بوت استرپ صفحه را به ۱۲ ستون تقسیم‌بندی می‌کند.

If you do not want to use all 12 column individually, you can group the columns together to create wider columns:

در صورتی که نخواهید همهٔ ۲۰ ستون را بطور مجزا استفاده کنید، می‌توانید چند ستون را با هم در یک دسته قرار دهید تا ستون‌های عریض تری ایجاد شود:


Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

سیستم شبکه ای بوت استرپ واکنش گرا است و ستون‌ها براساس اندازه صفحه نمایش مجدداً مرتب می‌شوند: ممکن است در صفحه نمایش بزرگ بهتر باشد محتوا در سه ستون مرتب شود اما در صفحه نمایش کوچک شاید بهتر باشد محتواها روی یکدیگر بصورت پشته ای (Stacked) قرار بگیرند.

کلاس‌های شبکه

The Bootstrap 4 grid system has five classes:

سیستم شبکه بندی بوت استرپ ۴ پنج کلاس دارد:

.col- (extra small devices - screen width less than 576px)

.col- (دستگاه‌های خیلی کوچک – عرض صفحه کمتر از ۵۷۶ پیکسل باشد)

.col-sm- (small devices - screen width equal to or greater than 576px)

.col-sm- (دستگاه‌های کوچک- عرض صفحه برابر با ۵۷۶ پیکسل یا بزرگتر باشد)

.col-md- (medium devices - screen width equal to or greater than 768px)

.col-md- (دستگاه ای با سایز متوسط- عرض صفحه نمایش برابر با ۷۶۸ پیکسل یا بیشتر باشد)

.col-lg- (large devices - screen width equal to or greater than 992px)

.col-lg- (دستگاه‌های بزرگ – عرض صفحه برابر با ۹۹۲ پیکسل یا بیشتر باشد)

.col-xl- (xlarge devices - screen width equal to or greater than 1200px)

.col-xl- (دستگاه‌های خیلی بزرگ – عرض صفحه برابر با ۱۲۰۰ پیکسل یا بیشتر باشد)

The classes above can be combined to create more dynamic and flexible layouts.

کلاس‌های بالا را می‌توان ترکیب کرد تا چیدمان پویاتر یا منعطف تری ایجاد شود.

Tip: Each class scales up, so if you wish to set the same widths for sm and md, you only need to specify sm.

نکته: هر کلاس را می‌توان افزایش مقیاس داد، بنابراین در صورتیکه برای sm و md عرض‌های مشابهی تنظیم کنید، تنها لازم است sm را مشخص کنید.

قواعد سیستم شبکه بندی

Some Bootstrap 4 grid system rules:

برخی از قواعد سیستم شبکه بندی بوت استرپ ۴:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding

ردیف‌ها باید داخل یک .container (با عرض ثابت) یا .container-fluid (با عرض کامل) باشند تا alignment و padding مناسب ایجاد شود

Use rows to create horizontal groups of columns

از ردیف‌ها برای ایجاد گروه‌های ستون‌ها استفاده کنید

Content should be placed within columns, and only columns may be immediate children of rows

محتوا باید داخل ستون‌ها قرار بگیرند و فقط ستون‌ها باید فرزندان بی واسطهٔ ردیف‌ها باشند

Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts

کلاس‌های از پیش تعریف شده .row و .col-sm-4 برای ایجاد سریع استایل موجود هستند

Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows

ستون‌ها gutterها (فاصله بین محتوای ستون) را از طریق padding ایجاد می‌کنند. این padding فاصلهٔ بین ردیف‌ها برای اولین و آخرین ستون از طریق حاشیه منفی در .rows است

Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4

ستون‌های شبکه از طریق انتخاب از بین ۱۲ ستون موجود ایجاد می‌شوند. برای مثال برای تعیین سه ستون موازی باید از سه تا .col-sm-4 استفاده شود

Column widths are in percentage, so they are always fluid and sized relative to their parent element

عرض ستون‌ها به درصد هستند، بنابراین همیشه شناور بوده و نسبت به عنصر والدشان سایزدهی می‌شوند.

The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats. One big advantage with flexbox is that grid columns without a specified width will automatically layout as "equal width columns" (and equal height). مثال: Three elements with .col-sm will each automatically be 33.33% wide from the small breakpoint and up. Tip: If you want to learn more about Flexbox, you can read our CSS Flexbox Tutorial.

بزرگترین تفاوت بین بوت استرپ ۳ و ۴ این است که بوت استرپ ۴ از flexboxها بجای floatها استفاده می‌کند. یکی از مزایای مهم بوت استرپ ۴ این است که ستون‌های شبکه بدون عرض مشخص، بطور خودکار بعنوان «ستون‌های دارای عرض برابر» (و ارتفاع برابر) چیده می‌شوند. مثال: سه عنصر با .col-sm هرکدام بطور اتوماتیک دارای ۳/۳۳٪ عرض breakpoint کوچک به بالا می‌شوند. نکته: اگر می‌خواهید درمورد Flexbox بیشتر بیاموزید می‌توانید به آموزش CSS Flexbox مراجعه کنید.

Note that Flexbox is not supported in IE9 and earlier versions.

دقت کنید که Flexbox در IE9 و نسخه‌های قدیمی تر پشتیبانی نمی‌شود.

If you require IE8-9 support, use Bootstrap 3. It is the most stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes. However, no new features will be added to it.

اگر نیازمند پشتیبانی IE8-9 هستید از بوت استرپ۳ استفاده کنید. زیرا پایدارترین نسخه بوت استرپ است و توسط تیم برای bugfixهای بحرانی و تغییرات مستندسازی پشتیبانی می‌شود. با این حال هیچ ویژگی جدیدی به آن اضافه نمی‌شود.

ساختار ساده یک شبکه بوت استرپ ۴

The following is a basic structure of a Bootstrap 4 grid:

کد زیر ساختار پایهٔ یک شبکه بون استرپ را نشان می‌دهد:
1 شششششششششششششششششش
First example: create a row (&lt;div class="row"&gt;). Then, add the desired number of columns (tags with appropriate .col-*-* classes). The first star (*) represents the responsiveness: sm, md, lg or xl, while the second star represents a number, which should always add up to 12 for each row.

اولین مثال: یک ردیف ایجاد کنید (<div class=”row”>). ">). سپس، تعداد مورد نظر ستون ها را اضافه کنید (تگ هایی با کلاس های .col-*-*). ستاره (*) اول واکنش گرایی (Responsiveness) را نشان می دهد: sm, md, lg یا xl ، در حالیکه ستاره دوم نشان دهنده ی تعداد است که مجموع آن به ازاء هر ردیف باید حداکثر 12 تا باشد.

Second example: instead of adding a number to each col, let bootstrap handle the layout, to create equal width columns: two "col" elements = 50% width to each col. three cols = 33.33% width to each col. four cols = 25% width, etc. You can also use .col-sm to make the columns responsive.

مثال دوم: بجای اضافه کردن عدد به هر col، بهتر است بوت استرپ برای ایجاد ستون‌های برابر چیدمان را مدیریت کند: دو عنصر “col” با عرض ۵۰٪ برای هر col. سه عنصر col با عرض ۳/۳۳ برای هرکدام. چهار عنصر col با عرض ۲۵٪ برای هر کدام و غیره. می‌توان از .col-sm|md|lg|xl برای ایجاد ستون‌های واکنش گرا استفاده کرد.

امکانات شبکه

The following table summarizes how the Bootstrap 4 grid system works across different screen sizes:

جدول زیر نحوهٔ عملکرد سیستم شبکه بندی بوت استرپ را در چند دستگاه نشان می‌دهد:

Extra small (<576px)

خیلی کوچک (<۵۷۶ پیکسل)

Small (>=576px)

کوچک (=< ۵۷۶ پیکسل)

Medium (>=768px)

متوسط (=<۷۶۸ پیکسل)

Large (>=992px)

بزرگ (=<۹۹۲ پیکسل)

Extra Large (>=1200px)

خیلی بزرگ (>= ۱۲۰۰ پیکسل)

Class prefix

پیشوند کلاس

.col- .col-sm- .col-md- .col-lg- .col-xl-
Grid behavior

رفتار شبکه

Horizontal at all times

همیشه افقس

Collapsed to start, horizontal above breakpoints

در ابتدا بصورت جمع شده (Collapsed)، بالای Breakpoint بصورت افقی

Collapsed to start, horizontal above breakpoints

در ابتدا بصورت جمع شده (Collapsed)، بالای Breakpoint بصورت افقی

Collapsed to start, horizontal above breakpoints

در ابتدا بصورت جمع شده (Collapsed)، بالای Breakpoint بصورت افقی

Collapsed to start, horizontal above breakpoints

در ابتدا بصورت جمع شده (Collapsed)، بالای Breakpoint بصورت افقی

Container width

عرض ظرف

None (auto)

هیچ (خودکار)

540px 720px 960px 1140px
Suitable for

مناسب برای

Portrait phones

موبایل‌های عمودی

Landscape phones

موبایل‌های افقی

Tablets

تبلت‌ها

Laptops

لپ تاپ‌ها

Laptops and Desktops

لپ تاپ‌ها و رایانه‌های رومیزی

# of columns

تعداد ستون‌ها

۱۲ ۱۲ ۱۲ ۱۲ ۱۲
Gutter width

عرض Gutter

30px (15px on each side of a column)

۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون)

30px (15px on each side of a column)

۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون)

30px (15px on each side of a column)

۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون)

30px (15px on each side of a column)

۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون)

30px (15px on each side of a column)

۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون)

Nestable

قابلیت تودرتو شدن

Yes

بله

Yes

بله

Yes

بله

Yes

بله

Yes

بله

Offsets

فاصله‌ها

Yes

بله

Yes

بله

Yes

بله

Yes

بله

Yes

بله

Column ordering

ترتیب ستونها

Yes

بله

Yes

بله

Yes

بله

Yes

بله

Yes

بله

مثال‌ها

The next chapters shows examples of grid systems for different devices and screen widths:

در بخش‌های بعدی مثال‌های از سیستم‌های شبکه بندی برای دستگاه‌های مختلف و صفحه نمایش‌های با عرض متفاوت را ارائه شده‌است:

Stacked-to-horizontal

بالای هم (Stacked) تا افقی

Auto Layout

چیدمان خودکار

Small devices

دستگاه‌های کوچک

Medium devices

دستگاه‌های متوسط

Large devices

دستگاه‌های بزرگ

Extra large devices

دستگاه‌های خیلی بزرگ

More grid examples

مثال‌های شبکه بندی بیشتر

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_grid_stacked_to_horizontal.asp

Bootstrap 4 Grid Stacked-to-horizontal

شبکه بندی بوت استرپ 4 Stacked-to-horizontal (بالای هم تا افقی)

مثال شبکه بندی بوت استرپ 4: Stacked-to-horizontal

We will create a basic grid system that starts out stacked on extra small devices, before becoming horizontal on larger devices.

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

The following example shows a simple "stacked-to-horizontal" two-column layout, meaning it will result in a 50%/50% split on all screens, except for extra small screens, which it will automatically stack (100%):

مثال زیر یک چیدمان دو ستونهٔ «پشته ای-تا افقی» ساده را نشان می‌دهد، یعنی در همهٔ صفحه نمایش‌ها منجر به انشعاب ۵۰٪-۵۰٪ می‌شود، به چز صفحه نمایش‌های بسیار کوچک که در آنها بطور خودکار کاملاً پشته ای می‌شود (۱۰۰٪):


مثال: Stacked-to-horizontal

1 شششششششششششششششششش
Tip: The numbers in the .col-sm-* classes indicates how many columns the div should span (out of 12). So, .col-sm-1 spans 1 column, .col-sm-4 spans 4 columns, .col-sm-6 spans 6 columns, etc.

نکته: عددها در کلاس‌های .col-sm-* نشان دهندهٔ تعداد ستون‌هایی است که در div قرار می‌گیرند (حداکثر ۱۲ تا). بنابراین .col-sm-1 یک ستون،col-sm-4 4 ستون،col-sm-6 6 ستون را دربرمی گیرد و …

Note: Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns):

نکته: مطمئن شوید که مجموع کلی همیشه حداکثر ۱۲ یا کمتر باشد (لزومی ندارد که از همهٔ ۱۲ ستون موجود استفاده کنید):

Tip: You can turn any fixed-width layout into a full-width layout by changing the .container class to .container-fluid:

نکته: با تغییر کلاس .container به کلاس .container-fluid می‌توان هر چیدمان با عرض ثابتی (fixed-width) را به چیدمان با عرض کامل(full-width) تبدیل کنید.

مثال: Fluid container

1 شششششششششششششششششش

ستون‌هایی با چیدمان خودکار (Auto Layout)

In Bootstrap 4, there is an easy way to create equal width columns for all devices: just remove the number from .col-size-* and only use the .col-size class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width. The size classes determines when the columns should be responsive:

در بوت استرپ ۴، روش ساده ای برای ایجاد ستون‌هایی با عرض مساوی در همهٔ دستگاه‌ها وجود دارد: تنها باید عدد را از .col-size-* حذف کنید و فقط از کلاس .col-size با تعداد مشخصی از عناصر col استفاده کنید. بوت استرپ تشخیص خواهد داد چند ستون وجود دارد و هر ستون عرض برابر می‌گیرد.

کلاس‌های size تشخیص می‌دهند چه زمانی ستون‌ها باید واکنش گرا باشند:
1 شششششششششششششششششش

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_grid_xsmall.asp

Bootstrap 4 Grid Extra Small

شبکه بندی خیلی کوچک در بوت استرپ ۴

مثال شبکه بندی خیلی کوچک

Extra small

خیلی کوچک

Small

کوچک

Medium

متوسط

Large

بزرگ

Extra Large

خیلی بزرگ

Class prefix

پیشوند کلاس

.col- .col-sm- .col-md- .col-lg- .col-xl-
Screen width

عرض صفحه نمایش

<576px >=576px >=768px >=992px >=1200px
Assume we have a simple layout with two columns. We want the columns to split 25%/75% for ALL devices.

فرض کنید چیدمان ساده ای با ستون داریم. می‌خواهیم ستون‌ها به صورت ۷۵٪-۲۵٪ برای همه ی دستگاه‌ها تقیسم شوند.

We will add the following classes to our two columns:

کلاس‌های زیر را به دو ستون خود اضافه خواهیم کرد:
1 شششششششششششششششششش
The following example will result in a 25%/75% split on all devices (extra small, small, medium, large and xlarge).

مثال زیر منجر به تقسیم بندی 75%-25% در همهٔ دستگاه‌ها (خیلی کوچک، کوچک، متوسط، بزرگ، خیلی بزرگ) می‌شود.


مثال

1 شششششششششششششششششش
Try it Yourself»

Note: Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns):

نکته: مطمئن شوید که مجموع کلی همیشه حداکثر 12 یا کمتر باشد (لزومی ندارد که از همهٔ 12 ستون موجود استفاده کنید):

For a 33.3%/66.6% split, you would use .col-4 and .col-8 (and for a 50%/50% split, you would use .col-6 and .col-6):

برای تقیسم بندی ۶/۶۶٪-۳/۳۳٪ از .col-sm-4 و .col-sm-8 استفاده می‌شود (و برای تقسیم‌بندی ۵۰٪-۵۰٪ از .col-6 و .col-6 استفاده می‌شود):


مثال

1 شششششششششششششششششش

ستون‌های با چیدمان خودکار (Auto Layout)

In Bootstrap 4, there is an easy way to create equal width columns for all devices: just remove the number from .col-* and only use the .col class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width:

در بوت استرپ ۴، روش ساده ای برای ایجاد ستون‌هایی با عرض مساوی در همهٔ دستگاه‌ها وجود دارد: تنها باید عدد را از .col-* حذف کنید و فقط از کلاس .col با تعداد مشخصی از عناصر col استفاده کنید. بوت استرپ تشخیص خواهد داد چند ستون وجود دارد و هر ستون عرض برابر می‌گیرد.
1 شششششششششششششششششش

The next chapter shows how to add a different split percent for small devices.

بخش بعدی نحوهٔ اضافه کردن درصد تقسیم‌بندی‌های متفاوت در دستگاه‌های کوچک را نشان می‌دهد.

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_grid_small.asp

Bootstrap 4 Grid Small

شبکه بندی کوچک در بوت استرپ ۴

مثال شبکه بندی کوچک

Extra small

خیلی موچک

Small

کوچک

Medium

متوسط

Large

بزرگ

Extra Large

خیلی بزرگ

Class prefix

پیشوند کلاس

.col- .col-sm- .col-md- .col-lg- .col-xl-
Screen width

عرض صفحه نمایش

<576px >=576px >=768px >=992px >=1200px
Assume we have a simple layout with two columns. We want the columns to be split 25%/75% for small devices.

فرض کنید چیدمان ساده ای با ستون داریم. می‌خواهیم ستون‌ها به صورت ۷۵٪-۲۵٪ برای دستگاه‌های کوچک تقیسم شوند.

Small devices are defined as having a screen width from 576 pixels to 767 pixels.

دستگاه‌های کوچک، صفحه نمایش‌هایی با عرض ۵۷۶ تا ۷۶۷ پیکسل هستند.

For small devices we will use the .col-sm-* classes.

برای دستگاه‌های کوچک از کلاس‌های .col-sm-* استفاده می‌کنیم.

We will add the following classes to our two columns:

کلاس‌های زیر را به دو ستون خود اضافه خواهیم کرد:
1 شششششششششششششششششش
Now Bootstrap is going to say "at the small size, look for classes with -sm- in them and use those".

اکنون بوت استرپ خواهد گفت «برای اندازه‌های کوچک، به دنبال کلاس‌هایی با –sm- بگردید و از آنها استفاده کنید».

The following example will result in a 25%/75% split on small (and medium, large and xlarge) devices. On extra small devices, it will automatically stack (100%):

مثال زیر منجر به تقسیم بندی 75%-25% در دستگاه‌های کوچک (و متوسط و بزرگ و خیلی بزرگ) می‌شود. در دستگاه‌های بسیار کوچک، بطور خودکار به حالت بالای هم (Stack) تبدیل خواهد شد.


مثال

1 شششششششششششششششششش
Note: Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns):

نکته: مطمئن شوید که مجموع کلی همیشه حداکثر 12 یا کمتر باشد (لزومی ندارد که از همهٔ 12 ستون موجود استفاده کنید):

For a 33.3%/66.6% split, you would use .col-sm-4 and .col-sm-8 (and for a 50%/50% split, you would use .col-sm-6 and .col-sm-6):

برای تقیسم بندی ۶/۶۶٪-۳/۳۳٪ از .col-sm-4 و .col-sm-8 استفاده می‌شود (و برای تقسیم‌بندی ۵۰٪-۵۰٪ از .col-sm-6 و .col-sm-6 استفاده می‌شود):


مثال

1 شششششششششششششششششش

ستون‌هایی با چیدمان خودکار (Auto Layout)

In Bootstrap 4, there is an easy way to create equal width columns for all devices: just remove the number from .col-sm-* and only use the .col-sm class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.

در بوت استرپ ۴، روش ساده ای برای ایجاد ستون‌هایی با عرض مساوی در همهٔ دستگاه‌ها وجود دارد: تنها باید عدد را از .col-sm-* حذف کنید و فقط از کلاس .col-sm با تعداد مشخصی از عناصر col استفاده کنید. بوت استرپ تشخیص خواهد داد چند ستون وجود دارد و هر ستون عرض برابر می‌گیرد.

If the screen size is less than 576px, the columns will stack horizontally:

اگر سایز صفحه نمایش کمتر از ۵۷۶ پیکسل باشد، ستون‌ها بطور افقی بالای هم (Stack) قرار می‌گیرند:
1 شششششششششششششششششش

The next chapter shows how to add a different split percent for medium devices.

بخش بعدی نحوهٔ اضافه کردن درصد تقسیم‌بندی‌های متفاوت در دستگاه‌های متوسط را نشان می‌دهد.

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_grid_medium.asp

Bootstrap 4 Grid Medium

شبکه بندی متوسط بوت استرپ ۴

مثال شبکه بندی متوسط

Extra small

خیلی کوچک

Small

کوچک

Medium

متوسط

Large

بزرگ

Extra Large

خیلی بزرگ

Class prefix

پیشوند کلاس

.col- .col-sm- .col-md- .col-lg- .col-xl-
Screen width

عرض صفحه نمایش

<576px >=576px >=768px >=992px >=1200px
In the previous chapter, we presented a grid example with classes for small devices. We used two divs (columns) and we gave them a 25%/75% split: در بخش قبلی، مثالی از شبکه بندی با کلاس‌های مخصوص دستگاه‌های کوچک ارائه دادیم. از دو div (ستون) استفاده کردیم و به آنها تقسیم‌بندی ۲۵٪-۷۵٪ دادیم:
1 شششششششششششششششششش
But on medium devices the design may be better as a 50%/50% split.

اما در دستگاه‌های متوسط طراحی بهتر است 50%-50% باشد.

Medium devices are defined as having a screen width from 768 pixels to 991 pixels.

دستگاه‌های متوسط بعنوان صفحه نمایش‌هایی با عرض 768 پیکسل تا 991 پیکسل تعریف می‌شوند.

For medium devices we will use the .col-md-* classes:

برای دستگاه‌های متوسط از کلاس‌های .col-md-* استفاده می‌کنیم:
1 شششششششششششششششششش

Now Bootstrap is going to say "at the small size, look at classes with -sm- in them and use those. At the medium size, look at classes with -md- in them and use those".

اکنون بوت استرپ خواهد گفت «برای اندازه‌های کوچک، به دنبال کلاس‌هایی با –sm- بگردید و از آنها استفاده کنید. در دستگاه‌های متوسط، کلاس‌های دارای عبارت –md- را جستجو کرده و از آنها استفاده کنید.»

The following example will result in a 25%/75% split on small devices and a 50%/50% split on medium (and large and xlarge) devices. On extra small devices, it will automatically stack (100%):

مثال زیر منجر به ایجاد تقسیم بندی 75%-25% در دستگاه‌های کوچک و تقسیم بندی 50%-50% در دستگاه‌های متوسط (و بزرگ و خیلی بزرگ) می‌شود. در دستگاه‌های بسیار کوچک، بطور خودکار به حالت بالای هم (stack) تبدیل می‌شود (100%).


مثال

1 شششششششششششششششششش
Note: Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns):

نکته: مطمئن شوید که مجموع کلی همیشه حداکثر 12 یا کمتر باشد (لزومی ندارد که از همهٔ 12 ستون موجود استفاده کنید):

Using Only Medium

فقط از اندازه متوسط استفاده کنید

In the example below, we only specify the .col-md-6 class (without .col-sm-*). This means that medium, large and extra large devices will split 50%/50% - because the class scales up. However, for small and extra small devices, it will stack vertically (100% width):

در مثال پایین، فقط کلاس .col-md-6 را به کار برده‌ایم (بدون استفاده از.col-sm-*). این یعنی دستگاه‌های متوسط، بزرگ و خیلی بزرگ تقسیم‌بندی ۵۰٪-۵۰٪ دارند زیرا کلاس افزایش مقیاس می‌دهد. با این حال، برای دستگاه‌های کوچک و خیلی کوچک، بطور عمودی بالای هم(stack vertically) قرار می‌گیرد (عرض ۱۰۰٪):

مثال

1 شششششششششششششششششش

ستون‌هایی با چیدمان خودکار (Auto Layout)

In Bootstrap 4, there is an easy way to create equal width columns for all devices: just remove the number from .col-md-* and only use the .col-md class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.

در بوت استرپ ۴، روش ساده ای برای ایجاد ستون‌هایی با عرض مساوی در همهٔ دستگاه‌ها وجود دارد: تنها باید عدد را از .col-md-* حذف کنید و فقط از کلاس .col-md با تعداد مشخصی از عناصر col استفاده کنید. بوت استرپ تشخیص خواهد داد چند ستون وجود دارد و هر ستون عرض برابر می‌گیرد.

If the screen size is less than 768px, the columns will stack horizontally:

اگر سایز صفحه نمایش کمتر از ۷۶۸ پیکسل باشد، ستون‌ها بطور افقی بالای هم (Stack) قرار می‌گیرند:
1 شششششششششششششششششش

بخش بعدی نحوهٔ اضافه کردن درصد تقسیم‌بندی‌های متفاوت در دستگاه‌های بزرگ را نشان می‌دهد.

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_grid_large.asp

Bootstrap 4 Grid - Large

شبکه بندی بوت استرپ ۴- بزرگ

مثال شبکه بندی بزرگ

Extra small

خیلی کوچک

Small

کوچک

Medium

متوسط

Large

بزرگ

Extra Large

خیلی بزرگ

Class prefix

پیشوند کلاس

.col- .col-sm- .col-md- .col-lg- .col-xl-
Screen width

عرض صفحه نمایش

<576px >=576px >=768px >=992px >=1200px
In the previous chapter, we presented a grid example with classes for small and medium devices. We used two divs (columns) and we gave them a 25%/75% split on small devices, and a 50%/50% split on medium devices: در بخش قبلی، مثالی از شبکه بندی با کلاس‌های مخصوص دستگاه‌های کوچک و متوسط ارائه دادیم. از دو div (ستون) استفاده کردیم و به آنها یک تقسیم‌بندی ۲۵٪-۷۵٪ در دستگاه‌های کوچک و یک تقسیم‌بندی ۵۰٪-۵۰٪ در دستگاه‌های متوسط دادیم:
1 شششششششششششششششششش
But on large devices the design may be better as a 33%/66% split.

اما بهتر است در دستگاه‌های بزرگ از طراحی 33%-66% استفاده کنیم.

Large devices are defined as having a screen width from 992 pixels to 1199 pixels.

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

For large devices we will use the .col-lg-* classes:

برای دستگاه‌های بزرگ از کلاس‌های .col-lg-* استفاده می‌کنیم:
1 شششششششششششششششششش

Now Bootstrap is going to say "at the small size, look at classes with -sm- in them and use those. At the medium size, look at classes with -md- in them and use those. At the large size, look at classes with the word -lg- in them and use those".

اکنون بوت استرپ خواهد گفت «برای اندازه‌های کوچک، به دنبال کلاس‌هایی با –sm- بگردید و از آنها استفاده کنید. در دستگاه‌های متوسط، کلاس‌های دارای عبارت –md- را جستجو کرده و از آنها استفاده کنید. در دستگاه‌های بزرگ، کلاس‌های دارای عبارت –lg- را جستجو کرده و از آنها استفاده کنید».

The following example will result in a 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%):

مثال زیر منجر به ایجاد تقسیم بندی 75%-25% در دستگاه‌های کوچک و تقسیم بندی 50%-50% در دستگاه‌های متوسط و تقسیم بندی 33%-66% در دستگاه‌های بزرگ و خیلی بزرگ می‌شود. در دستگاه‌های بسیار کوچک، بطور خودکار به حالت بالای هم (stack) تبدیل می‌شود (100%).

مثال

1 شششششششششششششششششش
Note: Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns):

نکته: مطمئن شوید که مجموع کلی همیشه حداکثر 12 یا کمتر باشد (لزومی ندارد که از همهٔ 12 ستون موجود استفاده کنید):

فقط از اندازه بزرگ استفاده کنید

In the example below, we only specify the .col-lg-6 class (without .col-md-* and/or .col-sm-*). This means that large and xlarge devices will split 50%/50%. However, for medium, small AND extra small devices, it will stack vertically (100% width):

در مثال پایین، فقط کلاس .col-lg-6 را به کار برده‌ایم (بدون استفاده از .col-md-* و/یا .col-sm-*). این یعنی دستگاه‌های بزرگ و خیلی بزرگ تقسیم‌بندی ۵۰٪-۵۰٪ دارند. با این حال، برای دستگاه‌های متوسط، کوچک و خیلی کوچک، بطور عمودی بالای هم(stack vertically) قرار می‌گیرد (عرض ۱۰۰٪):

مثال

1 شششششششششششششششششش

ستون‌هایی با چیدمات خودکار(Auto Layout)

In Bootstrap 4, there is an easy way to create equal width columns for all devices: just remove the number from .col-lg-* and only use the .col-lg class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.

در بوت استرپ ۴، روش ساده ای برای ایجاد ستون‌هایی با عرض مساوی در همهٔ دستگاه‌ها وجود دارد: تنها باید عدد را از .col-lg-* حذف کنید و فقط از کلاس .col-lg با تعداد مشخصی از عناصر col استفاده کنید. بوت استرپ تشخیص خواهد داد چند ستون وجود دارد و هر ستون عرض برابر می‌گیرد.

If the screen size is less than 992px, the columns will stack horizontally:

اگر سایز صفحه نمایش کمتر از ۹۹۲ پیکسل باشد، ستون‌ها بطور افقی بالای هم (Stack) قرار می‌گیرند:
1 شششششششششششششششششش

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_grid_xlarge.asp

Bootstrap 4 Grid - Extra Large

شبکه بندی بوت استرپ ۴- خیلی بزرگ

مثال شبکه بندی خیلی بزرگ

Extra small

خیلی کوچک

Small

کوچک

Medium

متوسط

Large

بزرگ

Extra Large

خیلی بزرگ

Class prefix

پیشوند کلاس

.col- .col-sm- .col-md- .col-lg- .col-xl-
Screen width

عرض صفحه نمایش

<576px >=576px >=768px >=992px >=1200px
In the previous chapter, we presented a grid example with classes for small and medium devices. We used two divs (columns) and we gave them a 25%/75% split on small devices, and a 50%/50% split on medium devices and a 33%/66% split on large devices: در بخش قبلی، مثالی از شبکه بندی با کلاس‌هایی برای دستگاه‌های کوچک و متوسط ارائه کردیم. از دو div (ستون) استفاده کرده و به آنها تقسیم‌بندی ۲۵٪-۷۵٪در دستگاه‌های کوچک و تقسیم‌بندی ۵۰٪-۵۰٪ در دستگاه‌های متوسط و تقسیم‌بندی ۳۳٪-۶۶٪ در دستگاه‌های بزرگ دادیم:
1 شششششششششششششششششش
But on xlarge devices the design may be better as a 20%/80% split.

اما در دستگاه‌های خیلی بزرگ بهتر است تقسیم بندی 20%-80% باشد.

Extra large devices are defined as having a screen width from 1200 pixels and above.

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

For xlarge devices we will use the .col-xl-* classes:

برای دستگاه‌های خیلی بزرگ از کلاس‌های .col-xl-* استفاده می‌کنیم:
1 شششششششششششششششششش

The following example will result in a 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and a 20%/80% split on xlarge devices. On extra small devices, it will automatically stack (100%):

مثال زیر منجر به ایجاد تقسیم بندی 75%-25% در دستگاه‌های کوچک و تقسیم بندی 50%-50% در دستگاه‌های متوسط و تقسیم بندی 33%-66% در دستگاه‌های بزرگ و تقسیم بندی 20%-80% در دستگاه‌های خیلی بزرگ می‌شود. در دستگاه‌های بسیار کوچک، بطور خودکار به حالت بالای هم (stack) تبدیل می‌شود (100%):


مثال

1 شششششششششششششششششش
Note: Make sure that the sum always adds up to 12.

نکته: مطمئن شوید که مجموع کلی همیشه حداکثر 12 باشد.

فقط از اندازه خیلی بزرگ استفاده کنید

In the example below, we only specify the .col-xl-6 class (without .col-lg-*, .col-md-* and/or .col-sm-*). This means that xlarge devices will split 50%/50%. However, for large, medium, small AND extra small devices, it will stack vertically (100% width):

در مثال پایین، فقط کلاس .col-xl-6 را به کار برده‌ایم (بدون استفاده از.col-lg-*،col-md-* و/یا .col-sm-*). این یعنی دستگاه‌های خیلی بزرگ تقسیم‌بندی ۵۰٪-۵۰٪ دارند. با این حال، برای دستگاه‌های بزرگ، متوسط، کوچک و خیلی کوچک، بطور عمودی بالای هم(stack vertically) قرار می‌گیرد (عرض ۱۰۰٪):

مثال

1 شششششششششششششششششش

ستون‌هایی با چیدمان خودکار (Auto Layout)

In Bootstrap 4, there is an easy way to create equal width columns for all devices: just remove the number from .col-xl-* and only use the .col-xl class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.

در بوت استرپ ۴، روش ساده ای برای ایجاد ستون‌هایی با عرض مساوی در همهٔ دستگاه‌ها وجود دارد: تنها باید عدد را از .col-xl-* حذف کنید و فقط از کلاس .col-xl با تعداد مشخصی از عناصر col استفاده کنید. بوت استرپ تشخیص خواهد داد چند ستون وجود دارد و هر ستون عرض برابر می‌گیرد.

If the screen size is less than 1200px, the columns will stack horizontally:

اگر سایز صفحه نمایش کمتر از ۱۲۰۰ پیکسل باشد، ستون‌ها بطور افقی بالای هم (Stack)قرار می‌گیرند:
1 شششششششششششششششششش

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_grid_examples.asp

Bootstrap 4 Grid Examples

مثال‌های شبکه بندی در بوت استرپ ۴

در ادامه چند مثال از چیدمان‌های شبکه ای بوت استرپ بیان می‌کنیم.

سه ستون برابر

Use the .col class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns). In the example below, we use three col elements, which gets a width of 33.33% each.

از کلاس .col روی تعداد مشخصی از عنصرها استفاده کنید و بوت استرپ تشخیص می‌دهد چند عنصر وجود دارد (و سه ستون با عرض برابر تولیذ می‌کند). در مثال زیر، از سه عنصر col استفاده می‌کنیم که هرکدام عرض ۳/۳۳ می‌گیرند.


مثال

1 شششششششششششششششششش
Try it Yourself»

Three Equal Columns Using Numbers

سه ستون برابر با استفاده از اعداد

You can also use numbers to control the column width. Just make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns):

می‌توانید با از عددها برای کنترل عرض ستون‌ها استفاده کنید. فقط مطمئن شوید که مجموع ستون‌ها حداکثر 12 یا کمتر شود (لزومی ندارد از همهٔ 12 ستون موجود استفاده کنید):


مثال

1 شششششششششششششششششش

سه ستون نا برابر

To create unequal columns, you have to use numbers. The following example will create a 25%/50%/25% split:

برای ایجاد ستون‌های نابرابر، باید از عددها استفاده کنید. مثال زیر یک تقسیم بندی 25%-50%-25% را ایجاد می‌کند:


مثال

1 شششششششششششششششششش

تنظیم عرض یک ستون

However, it is enough to only set the width of one column, and have the sibling columns automatically resize around it. The following example will create a 25%/50%/25% split:

با این حال، کافیست تنها عرض یک ستون را تنظیم کنید و ستون برادر آن را بطور خودکار در اطراف آن تغییر سایز می‌دهد. مثال زیر یک تقسیم بندی 25%-50%-25% را تولید می‌کند:


مثال

1 شششششششششششششششششش

ستون‌های برابر بیشتر

مثال

1 شششششششششششششششششش

ستون‌های ردیف

You can also control how many columns that should appear next to each other (regardless of how many cols), with the .row-cols-* classes:

با کلاس‌های .row-cols-* می‌توانید کنترل کنید که چه تعدادی ستون درکنار هم نمایش داده شوند (بدون توجه به تعداد colها):


مثال

1 شششششششششششششششششش

ستون‌های نابرابر بیشتر

مثال

1 شششششششششششششششششش

ارتفاع برابر

If one of the column is taller than the other (due to text or CSS height), the rest will follow:

اگر یکی از ستون‌ها بلندتر از دیگر ستون‌ها باشد (بخاطر متن یا ارتفاع CSS)، مابقی ستون‌ها از آن پیروی می‌کنند (ارتفاعشان افزایش می‌یابد تا با ستون بلندتر برابر شود):

Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse nostrum qui eu. No nostrud dolorem legendos mea, ea eum mucius oporteat platonem.Eam an case scribentur, ei clita causae cum, alia debet eu vel.


مثال

1 شششششششششششششششششش

ستون‌های تودرتو

The following example shows how to create a two column layout, with another two columns inside one of the columns:

مثال زیر نحوه ایجاد چیدمان دو ستون، با دو ستون دیگر در داخل یکی از آنها نشان می‌دهد:

مثال

1 شششششششششششششششششش

کلاس‌های واکنش گرا

The Bootstrap 4 grid system has five classes:

بوت استرپ 4 پنج کلاس شبکه بندی واکنش گرا دارد:

.col- (extra small devices - screen width less than 576px)

.col- (دستگاه‌های خیلی کوچک – عرض صفحه کمتر از ۵۷۶ پیکسل باشد)

.col-sm- (small devices - screen width equal to or greater than 576px)

.col-sm- (دستگاه‌های کوچک- عرض صفحه برابر با ۵۷۶ پیکسل یا بزرگتر باشد)

.col-md- (medium devices - screen width equal to or greater than 768px)

.col-md- (دستگاه ای با سایز متوسط- عرض صفحه نمایش برابر با ۷۶۸ پیکسل یا بیشتر باشد)

.col-lg- (large devices - screen width equal to or greater than 992px)

.col-lg- (دستگاه‌های بزرگ – عرض صفحه برابر با ۹۹۲ پیکسل یا بیشتر باشد)

.col-xl- (xlarge devices - screen width equal to or greater than 1200px)

.col-xl- (دستگاه‌های خیلی بزرگ – عرض صفحه برابر با ۱۲۰۰ پیکسل یا بیشتر باشد)

The classes above can be combined to create more dynamic and flexible layouts.

کلاس‌های بالا را می‌توان ترکیب کرد تا چیدمان پویاتر یا منعطف تری ایجاد شود.

Tip: Each class scales up, so if you wish to set the same widths for sm and md, you only need to specify sm.

نکته: هر کلاس را می‌توان افزایش مقیاس داد، بنابراین در صورتیکه برای sm و md عرض‌های مشابهی تنظیم کنید، تنها لازم است sm را مشخص کنید.

Stacked تا افقی

The following example shows how to create a column layout that starts out stacked on extra small devices, before becoming horizontal on larger devices (sm, md, lg and xl):

مثال زیر نحوه ایجاد چیدمان ستون‌ها را نشان می‌دهد که از حالت stacked (ستون‌ها بالای یکدیگر) در دستگاه‌های خیلی کوچک آغاز می‌شود، پیش از آنکه در دستگاه‌های بزرگتر به شکل افقی تبدیل شود (sm, md, lg و xl):

مثال

1 شششششششششششششششششش

ترکیب و تطبیق (Mix and Match)

مثال

1 شششششششششششششششششش

حذف Gutterها (فاصلهٔ بین محتوای ستون‌ها)

Add the .no-gutters class to the .row container to remove gutters (extra space):

کلاس .no-gutters را به ظرف .row اضافه کنید تا gutterها (فاصله‌های اضافی) حذف شوند:


مثال

1 شششششششششششششششششش

////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_templates.asp

Bootstrap 4 Templates

الگوهای بوت استرپ 4

الگوی ساده در بوت استرپ 4

We have created a responsive starter template with Bootstrap 4.

ما یک الگوی ساده واکنش گرا با بوت استرپ 4 ایجاد کرده‌ایم.

You are free to modify, save, share, and use it in your projects:

شما می‌توانید آن را تغییر دهید، دخیره کنید، به اشتراک بگذارید و در پروژهای خود استفاده کنید:


////////////////////////////////////////////////////////////////////

https://www.w3schools.com/bootstrap4/bootstrap_progressbars.asp

Bootstrap 4 Progress Bars

نوارهای پیشرفت (Progress Bars) در بوت استرپ ۴

نوار پیشرفت ساده

نوار پیشرفت را می‌توان برای نشان دادن اینکه کاربر چه میزان پردازش داشته به کار برد.


To create a default progress bar, add a .progress class to a container element and add the .progress-bar class to its child element. Use the CSS width property to set the width of the progress bar:

برای ایجاد نوار پیشرفت پیش فرض، کلاس .progress را به یک عنصر ظرف (Container) و کلاس .progress-bar را به عنصر فرزند آن اضافه کنید. از خصوصیت width (عرض) CSS برای تنظیم عرض نوار پیشرفت استفاده کنید:

مثال

1 شششششششششششششششششش

ارتفاع نوار پیشرفت

The height of the progress bar is 16px by default. Use the CSS height property to change it. Note that you must set the same height for the progress container and the progress bar:

بطو پیش فرض، ارتفاع نوار پیشرفت برابر ۱۶ پیکسل است. می‌توان از خصوصت height در CSS برای تغییر آن استفاده کرد. دقت داشته باشید که ارتفاع نوار پیشرفت و ارتفاع ظرف آن با هم برابر باشند:

مثال

1 شششششششششششششششششش

برچسب‌های نوار پیشرفت

Add text inside the progress bar to show the visible percentage:

می‌توان برای نشان دادن درصد قابل مشاهده، متنی را داخل نوار پیشرفت اضافه کرد:


مثال

1 شششششششششششششششششش

نوارهای پیشرفت رنگی

بطور پیش فرض، نوار پیشرفت به رنگ آبی (اصلی) است. می‌توان از هریک از کلاس‌های پیش زمینه متنی در بوت استرپ ۴ برای رنگ نوار پیشرفت استفاده کرد:

مثال

1 شششششششششششششششششش

نوارهای پیشرفت راه راه

Use the .progress-bar-striped class to add stripes to the progress bars:

برای اضافه کردن حالت راه راه به نوارهای پیشرفت از کلاس .progress-bar-striped استفاده می‌شود:

مثال

1 شششششششششششششششششش

نوار پیشرفت متحرک

Add the .progress-bar-animated class to animate the progress bar:

برای متحرک ساختن نوار پیشرفت از کلاس .progress-bar-animated استفاده می‌شود:

مثال

1 شششششششششششششششششش

نوارهای پیشرفت چندتایی

همچنین نوارهای پیشرفت را می‌توانند روی هم قرار گیرند (Stacked):


مثال

1 شششششششششششششششششش

////////////////////////////////////////////////////////////////////