آموزش طراحی سایت-media object در بوت استرپ 4

سلام بر دوستان عزیزم..

امروز با پست دیگری از سری پست های آموزش طراحی سایت همراه شما هستیم، در این پست سعی داریم به آموزش آبجکت های چند رسانه ای در بوت استرپ 4 بپردازیم.

آموزش Media Object ها در در بوت استرپ 4

 

بوت استرپ 4، راه حل ساده ای برای چینش Media Object یا فایل های رسانه ای مثل عکس یا ویدیو درون سایر محتواها را فراهم کرده است. از فایل های رسانه ای معمولا در بخش نظرات بلاگ ها، پست های شبکه های اجتماعی و ... استفاده می شود.

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

 

آموزش ایجاد فایل رسانه ساده Basic Media Object

شکل زیر، نحوه قرار دادن یک عکس را درون سایر محتویات صفحه متوسط کلاس های جدید بوت استرپ 4 نشان داده است :

 

برای ایجاد یک شی رسانه ای (Media Object)، کلاس media را به عنصر دربرگیرنده یا Container اضافه کرده و فایل رسانه (عکس یا ویدیو) را درون عنصر فرزند آن که دارای کلاس media-body است، قرار دهید. به میزان مورد نظر حاشیه درونی (padding) و مارجین (margin) تعیین کرده و برای این کار از کلاس های کاربری ویژه بوت استرپ 4 (utility Classes) استفاده کنید، همانند کد مثال عملی زیر :

مثال 1 :

< div class="media border p-3">
< img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle"
style="width:60px;">
< div class="media-body">
< h4>John Doe < small>< i>Posted on February 19, 2016< /i>< /small>< /h4>
< p>Lorem ipsum...< /p>
< /div>
< /div>

 

آموزش ایجاد فایل رسانه ای تو در تو Nested Media Object در Bootstrap 4 در آموزش طراحی سایت

یک فایل رسانه ای را می توانید درون یک فایل رسانه ای دیگر قرار دهید، همانند تصویر زیر :

 

 

برای تو در تو کردن فایل رسانه ای و قرار دادن یک Media Object درون یک شی دیگر (Nested)، فایل لازم را درون عنصر دربرگیرنده فایل اول که دارای کلاس media-body است، قرار دهید. همانند کد مثال عملی زیر :

مثال 2 :

< div class="media border p-3">
< img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" 
style="width:60px;">
< div class="media-body">
< h4>John Doe < small>< i>Posted on February 19, 2016< /i>< /small>< /h4>
< p>Lorem ipsum...< /p>
< div class="media p-3">
< img src="img_avatar2.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" 
style="width:45px;">
< div class="media-body">
< h4>Jane Doe < small>< i>Posted on February 20 2016< /i>< /small>< /h4>
< p>Lorem ipsum...< /p>
< /div>
< /div>
< /div>
< /div>

 

آموزش راست چین کردن فایل رسانه ای در بوت استرپ 4

می توانید فایل رسانه ای (عکس یا ویدیو) را در سمت راست محتویات قرار دهید، همانند تصویر زیر :

 

مثال 3 :

< div class="media border p-3">
< div class="media-body">
< h4>John Doe < small>< i>Posted on February 19, 2016< /i>< /small>< /h4>
< p>Lorem ipsum...< /p>
< /div>
< img src="img_avatar3.png" alt="John Doe" class="ml-3 mt-3 rounded-circle"
style="width:60px;">
< /div>

 

آموزش ترازبندی بالا، پایین یا وسط فایل رسانه در Bootstrap 4

از کلاس های کاربردی Flex Utility مخصوص بوت استرپ 4، برای تنظیم قرارگیری عمودی فایل رسانه ای استفاده کنید. برای این منظور، کلاس align-self-* را به تگ یا تگ فایل رسانه ای داده که در آن * یکی از 3 مقدار (start) بالا، وسط (center) و پایین (end) را دریافت می کند.

همانند کد مثال عملی زیر :

مثال 4 :

< !-- Media top -->
< div class="media">
< img src="img_avatar1.png" class="align-self-start mr-3" style="width:60px">
< div class="media-body">
< h4>Media Top< /h4>
< p>Lorem ipsum...< /p>
< /div>
< /div>
< !-- Media middle -->
< div class="media">
< img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
< div class="media-body">
< h4>Media Middle< /h4>
 < p>Lorem ipsum...< /p>
< /div>
< /div>
< !-- Media bottom -->
< div class="media">
< img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
< div class="media-body">
< h4>Media Bottom< /h4>
< p>Lorem ipsum...< /p>
< /div>
< /div>

 

با دیگر پست های ما در زمینه آموزش طراحی سایت همراه باشید .....

آموزش طراحی سایت-روش Flex در Bootstrap 4

​

  

سلام با آموزش Bootstrap 4 از دوره آموزش طراحی سایت در خدمت شما هستیم

 

آموزش کاربرد روش Flex در Bootstrap 4

بوت استرپ 4، از کلاس های Flex برای کنترل چیدمان (layout) اجزای صفحه استفاده می کند.

 

آموزش FlexBox با بوت استرپ 4:

بزرگترین تفاوت بین Bootstrap 3 و Bootstrap 4 این است که بوت استرپ 4 از FlexBox به جای شناورسازی (floats) جهت مدیریت و چیدمان قرارگیری عناصر صفحه، استفاده می کند.

ماژول قالب بندی Flexible Box، روش ساده تری جهت ایجاد قالب ریسپانسیو و واکنش گرا، بدون استفاده از خاصیت های شناوری (float) و موقعیت (Position)، در اختیارمان قرار داده است. اگر با ماژول Flex آشنا نیستید، به بخش آموزش FlexBox در سایت تحلیل داده بروید.

نکته :

ماژول FlexBox در نسخه های IE9 و قبلتر پشتیبانی نمی شود.

اگر نیاز دارید تا از پشتیبانی مرورگرهای IE9 و IE8 بهره گیرید، از Bootstrap 3 استفاده نمایید. بوت استرپ ورژن 3، پایدارترین نسخه بوت استرپ تا سال 2019 بوده و همچنان توسط تیم تولید کننده جهت رفع باگ های احتمالی و پشتیبانی و آموزش، مورد حمایت است اما ویژگی های جدید بوت استرپ 4، به آن اضافه نشده است!

برای ایجاد یک عنصر دربرگیرنده (Container) ماژول FlexBox و قرار دادن عناصر فرزند مورد نظر در آن، از کلاس d-flex، استفاده نمایید.

مثال: در کد مثال عملی زیر، یک عنصر FlexBox ایجاد کرده ایم که 3 عنصر دیگر درون آن قرار گرفته است.

 

 

 

آموزش طراحی سایت : مثال 1

 

 

 

 

Bootstrap Example

 

 

 

 

 

 

 

 

 

 

 

 

Flex

 

 

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

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

 

 

خروجی :

 

Flex

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

​

 

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

 

مثال 2

 

 

 

 

 

Bootstrap Example

 

 

 

 

 

 

 

 

 

 

 

 

Inline Flex

 

 

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

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

 

 

خروجی :

 

Inline Flex

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

​

 

 

آموزش طراحی سایت : آموزش چینش افقی Horizontal Direction در FlexBox:

از کلاس flex-row برای نمایش افقی (Horizontal) عناصر به صورت کنار هم استفاده نمایید (این حالت، روش پیش فرض نمایش flexBox است).

نکته :

برای نمایش عناصر از راست به چپ (برعکس حالت پیش فرض)، از کلاس flex-row-reverse استفاده نمایید.

مثال: در کد مثال عملی زیر، گروه اول عناصر را به صورت پیش فرض و از چپ به راست نمایش داده و گروه دوم را به صورت برعکس (از راست به چپ) قرار داده ایم :

 

مثال 3

 

 

 

 

Bootstrap Example

 

 

 

 

 

 

 

 

 

 

 

 

Horizontal Direction

 

 

Use .flex-row to make the flex items appear side by side (default):

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

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

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

 

 

خروجی :

 

Horizontal Direction

Use .flex-row to make the flex items appear side by side (default):

​

 

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

​

 

 

آموزش چینش عمودی عناصر Vertical Direction در FlexBox:

از کلاس flex-column برای نمایش عناصر به صورت عمودی (بر روی هم) استفاده کنید. همچنین کلاس flex-column-reverse، عناصر را به صورت عمودی، ولی با ترتیب برعکس از پایین به بالا، نشان می دهد. همانند کد مثال عملی زیر :

 

مثال 4

 

 

 

 

Bootstrap Example

 

 

 

 

 

 

 

 

 

 

 

 

Vertical Direction

 

 

Use .flex-column to display the flex items vertically (on top of each other):

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

Use .flex-column-reverse to reverse the vertical direction:

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

 

 

خروجی :

 

Vertical Direction

Use .flex-column to display the flex items vertically (on top of each other):

​

 

Use .flex-column-reverse to reverse the vertical direction:

​

 

 

آموزش طراحی سایت : آموزش ترازبندی خطی (Justify) عناصر در FlexBox:

از کلاس های justify-content-* برای تنظیم ترتیب قرارگیری افقی (Justify) عناصر FlexBox استفاده می شود که در آن * می تواند یکی از مقادیر زیر را داشته باشد :

• مقدار start : حالت پیش فرض. در این حالت عناصر از سمت چپ به راست مرتب می شوند.

• مقدار end : در این حالت، عناصر در سمت راست عنصر دربرگیرنده تراز می شوند.

• مقدار Center: در این حالت عناصر در وسط عنصر دربرگیرنده قرار می گیرند.

• مقدار between: در این حالت، عنصر اول و آخر به لبه های عنصر مادر چسبیده و سایر عناصر در بین آن ها با فاصله تراز می شوند.

• مقدار around: در این حالت، عناصر به همراه فضای خالی به صورت مساوی درون عنصر مادر قرار می گیرند.

تمامی موارد فوق را در کد مثال عملی زیر نشان داده ایم :

 

مثال 5

 

 

 

 

Bootstrap Example

 

 

 

 

 

 

 

 

 

 

 

 

Justify content

 

 

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

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

 

 

خروجی :

 

Justify content

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

​

 

​

 

​

 

 

آموزش طراحی سایت ادامه دارد.

​

آموزش طراحی سایت-Bootstrap 4

​

  

سلام با آموزش Bootstrap 4 از دوره آموزش طراحی سایت در خدمت شما هستیم

آموزش تعیین جهت شناوری Float عنصر در بوت استرپ 4:

در قسمت قبل با کار با کلاس های کاربردی Utility Classes در Bootstrap 4 آشنا شدید

در شکل زیر، انواع حالت شناوری یک عنصر یا float آن در عنصر دربرگیرنده را نشان داده ایم :

​

 

به وسیله کلاس float-right می توانید عنصر را در جهت راست و با کلاس float-left، عنصر را در جهت چپ، تراز نمایید.

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

مثال : در کد مثال عملی زیر، انواع حالت float را با مثال و سورس کد نشان داده ایم :

 

مثال

 

 

Float left

Float right

 

 

 

آموزش طراحی سایت : آموزش تعیین float به صورت ریسپانسیو Responsive:

می توانید به وسیله کلاس هایی خاص، شناوری یا Float عنصر را بر حسب سایز صفحه نمایش تغییر دهید. برای این منظور از کلاس float-*-left/right استفاده می شود که در آن * می تواند یکی از مقادیر زیر را داشته و جهت هم بایستی یا چپ (left) و یا راست (right) باشد :

• اندازه sm برای صفحه نمایش های بزرگتر از 576 پیکسل.

• اندازه md برای صفحه نمایش های بزرگتر از 768 پیکسل.

• اندازه lg برای صفحه نمایش های بزرگتر از 992 پیکسل.

• اندازه xl برای صفحه نمایش بزرگتر از 1200 پیکسل و ... .

مثال : در کد مثال عملی زیر، نحوه استفاده از انواع کلاس های ریسپانسیو responsive float را در عمل نشان داده ایم :

 

مثال

 

Float right on small screens or wider

 

 

 

 

Float right on medium screens or wider

 

 

 

 

Float right on large screens or wider

 

 

 

 

Float right on extra large screens or wider

 

 

 

 

Float none

 

 

آموزش طراحی سایت : آموزش تعیین چیدمان وسط Center Align در Bootstrap 4:

نحوه تراز شدن مرکزی یک عنصر در صفحه به شکل زیر است :

​

 

با اعمال کلاس mx-auto به یک عنصر (که باعث می شود مارجین چپ و راست آن برابر صفر شود)، وسط چین شده و در مرکز صفحه یا عنصر دربرگیرنده خود، قرار می گیرد. همانند کد مثال عملی زیر :

 

مثال

 

Centered

 

 

آموزش تعیین عرض (width) یک عنصر در Bootstrap 4:

در بوت استرپ 4، می توانید با کلاس های خاصی، عرض یک عنصر را سریع تعیین نمایید، همانند شکل زیر :

​

 

برای تعیین عرض عناصر در Bootstrap 4، می توانید از کلاس w-* استفاده نمایید که در آن * نشان دهنده میزان درصد عرض عنصر از 100 درصد عرض ممکن است. برای مثال کلاس هایی مثل w-25، w-50، w-100 و یا mw-100 که مورد آخر خلاصه حداکثر عرض مجاز یا max width است.

مثال : در کد مثال عملی زیر، چندین عنصر با عرض های 25 درصد تا 100 درصد، ایجاد کرده ایم :

 

مثال

 

Width 25%

 

 

Width 50%

 

 

Width 75%

 

 

Width 100%

 

 

Max Width 100%

 

 

آموزش تعیین ارتفاع (Hight) عنصر در بوت استرپ 4:

به وسیله کلاس های خاصی در Bootstrap 4، می توانید ارتفاع یک عنصر را بسیار ساده تعیین نمایید، مثل شکل زیر :

​

 

برای تعیین ارتفاع عناصر در Bootstrap 4، می توانید از کلاس h-* استفاده نمایید که در آن * نشان دهنده میزان درصد ارتفاع عنصر از 100 درصد ارتفاع ممکن است. برای مثال کلاس هایی مثل h- 25، h-50، h-75 و یا mh-100 که مورد آخر خلاصه حداکثر ارتفاع مجاز یا Max height است.

مثال : در کد مثال عملی زیر، چندین عنصر با ارتفاع های بین 25 درصد تا 100 درصد را به وسیله کلاس های جدید بوت استرپ 4، ایجاد کرده ایم :

 

مثال

 

 

 

Height 25%

 

 

Height 50%

 

 

Height 75%

 

 

Height 100%

 

 

Max Height 100%

 

 

 

 

آموزش تعیین فاصله (Spacing) در Bootstrap 4:

بوت استرپ 4، دارای رنج گسترده ای از کلاس های کمکی ویژه جهت تعیین فاصله بیرونی (margin) و حاشیه درونی (padding) می باشد.

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

• حالت xs برای صفحات کوچکتر از عرض 576 پیکسل.

• حالت sm برای صفحات یزرگتر از عرض 576 پیکسل.

• حالت md برای صفحات بزرگتر از عرض 768 پیکسل.

• حالت lg برای صفحات بزرگتر از عرض 992 پیکسل.

• حالت xl برای صفحات یزرگتر از عرض 1200 پیکسل.

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

• فرمت حالت xs: {properts} {sides} -{size} = {خاصیت} {جهت ها}- {اندازه}

• - فرمت حالت های sm، md، lg و xl :

• دستور {property} {sides} -{brealpoint} -{size} = {خاصیت} {جهت ها}{سایز صفحه نمایش}- {اندازه}

در فرمول فوق، property یا خاصیت می تواند یکی از دو مقدار زیر را داشته باشد :

• مقدار m که تنظیم کننده حاشیه بیرونی یا margin است.

• مقدار p که تنظیم کننده حاشیه درونی یا padding است.

همچنین مقدار sides یا جهت ها هم می تواند یکی از مقادیر زیر را داشته باشد :

• مقدار t که تنظیم کننده حاشیه درونی بالا padding-top یا حاشیه بیرونی بالا margin-top است.

• مقدار b که تعیین کننده حاشیه درونی پایین padding-bottom یا حاشیه بیرونی پایین margin-bottom است.

• مقدار l که تنظیم کننده حاشیه درونی چپ padding-left و حاشیه بیرونی چپ margin-left است.

• مقدار r که تعیین کننده حاشیه درونی راست padding-right و حاشیه بیرونی راست margin-right است.

• مقدار x که می تواند هر دو حاشیه درونی راست و چپ (padding-right و padding-left) و هر دو حاشیه بیرونی راست و چپ (margin-right و margin-left) را تنظیم نماید.

• مقدار y که می تواند هر دو حاشیه درونی بالا وپایین (padding-top و padding-bottom) و هر دو حاشیه بیرونی بالا و پایین (margin-top و margin-left) را تنظیم نماید.

• مقدار خالی، اگر مقداری برای آن تعیین نشود، حاشیه درونی (padding) و حاشیه بیرونی (margin) هر 4 طرف عنصر را به اندازه تعیین شده، به صورت یکسان تنظیم می کند.

همچنین پارامتر اندازه یا Size نیز می تواند یکی از مقادیر زیر را داشته باشد :

• مقدار 0، که حاشیه درونی (padding) و حاشیه بیرونی (margin) را برابر صفر، تنظیم می کند.

• مقدار 1، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر مقدار 0.25rem یا معادل 4 پیکسل در حالتی که اندازه فوت 16 پیکسل باشد، تنظیم می کند.

• مقدار 2، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر با مقدار 0.5rem یا معادل 8 پیکسل، در حالتی که اندازه فونت 16 پیکسل باشد، تنظیم می کند.

• مقدار 3، که حاشیه بیرونی (margin) و حاشیه درونی (padding) عنصر را برابر مقدار 1rem یا معادل 16 پیکسل، در صورتی که فونت نوشته 16 پیکسل باشد، تنظیم می کند.

• مقدار 4، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر مقدار 1.5rem یا معادل 24 پیکسل، در صورتی که فونت نوشته 16 پیکسل باشد، تنظیم می کند.

• مقدار 5، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر مقدار 3rem یا معادل 48 پیکسل، در صورتی که فونت نوشته 16 پیکسل باشد، تنظیم می کند.

• مقدار auto که مارجین و padding عنصر را به صورت اتوماتیک تنظیم می کند.

نکته :

حاشیه بیرونی یا margin می تواند مقادیر منفی نیز داشته باشد. برای این منظور بایستی عدد n را در مقابل سایز هدف، قرار دهید، به صورت زیر :

• مقدار n1، که مارجین را برابر مقدار منفی 0.25 rem یا منفی 4 پیکسل تعیین می کند.

• مقدار n2، که مارجین را برابر مقدار منفی -0.5 rem یا منفی 8 پیکسل تعیین می کند.

• مقدار n3، که مارجین را برابر مقدار منفی -1 rem یا منفی 16 پیکسل تعیین می کند.

• مقدار n4، که مارجین را برابر مقدار منفی 1.5 rem یا منفی 24 پیکسل تعیین می کند.

• مقدار n5، که مارجین را برابر مقدار منفی 3 rem یا منفی 48 پیکسل تعیین می کند.

مثال : در کد مثال عملی زیر، چند مثال از کلاس کاربردی ویژه تعیین فاصله را به کار برده و خروجی آن را نشان داده ایم :

 

مثال

 

I only have a top padding (1.5rem = 24px)

 

 

I have a padding on all sides (3rem = 48px)

 

 

I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)

 

 

سایر کلاس های تعیین مارجین و Padding در بوت استرپ 4، به صورت زیر هستند :

​

 

 

آموزش طراحی سایت : آموزش تعیین سایه Shadow برای عنصر در Bootstrap 4:

شکل زیر، انواع حالت های ایجاد سایه برای یک عنصر را در بوت استرپ 4، نشان می دهد :

​

 

از کلاس های shadow-*، می توانید برای تعیین سایه یک عنصر در Bootstrap 4 استفاده نمایید که در آن، * می تواند یکی از مقادیر زیر باشد :

• مقدار none: در این حالت عنصر فاقد سایه یا shadow خواهد بود.

• مقدار sm: در این حالت عنصر دارای سایه ی کوچک خواهد بود.

• بدون مقدار : حالت پیش فرض بوده و عنصر دارای سایه یا shadow با اندازه معمول است.

• مقدار Lg: در این حالت، عنصر دارای سایه ی بزرگتر از حالت معمول می شود.

مثال: در کد مثال عملی زیر : نحوه مختلف تعیین سایه یا shadow را برای یک عصنر آموزش داده ایم :

 

مثال

 

No shadow

 

 

Small shadow

 

 

Default shadow

 

 

Large shadow

 

 

آموزش ترازبندی عمومی Vertical Align در بوت استرپ 4:

به وسیله کلاس های align-*، می توانید ترازبندی عمودی عناصر را در یک خط، تعیین نمایید (این کلاس ها فقط بر روی عناصر درون خطی Inline، درون خطی تمام عرض inline-block، درون خطی جدولی Inline-table و عناصر درون خانه های جدول اثر دارد). مقدار * می تواند یکی از مقادیر زیر باشد :

​

 

مثال

baseline

top

middle

bottom

text-top

text-bottom

 

آموزش ایجاد فایل های embed ریسپانسیو در Bootstrap4:

در بوت استرپ 4، می توانید فایل های الحاق شده به صفحه یا embed، مثل ویدیو یا اسلاید شو را به صورت ریسپانسیو و بر حسب عرض عنصر مادر آن نمایش دهید.

برای این منظور بایستی کلاس embed-responsive-item را به عنصر الحاق شده (embed) مثل تگ video یا iframe اضافه کرده آن را در یک عنصر مادر یا دربرگیرنده که دارای کلاس embed-responsive-* قرار دهید. علامت * هم تعیین کننده نسبت نمایش عرض و طول مثلا 16 در 9 یا 4 در 3 و ... می باشد.

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

 

مثال

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

آموزش نمایش یا عدم نمایش آیتم (Visibility) در Bootstrap 4:

به وسیله کلاس های visible (نمایان) و invisible (مخفی)، می توانید نمایش یا عدم نمایش عنصر را در بوت استرپ 4، کنترل نمایید.

نکته :

کلاس های visible و invisible، مقدار خاصیت CSS display را تغییر نمی دهند. آن ها فقط حالت عنصر را به visibility برابر visible یا hidden تغییر می دهند.

مثال : در کد مثال زیر، عنصر اول را نمایان و عنصر دوم را مخفی کرده ایم :

 

مثال

 

I am visible

 

 

I am invisible

 

 

آموزش تعیین موقعیت Position عنصر در بوت استرپ 4:

می توانید با استفاده از کلاسfixed-top در بوت استرپ 4 ، کاری کنید که عنصر به بالای صفحه چسبیده و همواره (حتی با اسکرول صفحه به پایین)، در جای خود ثابت نشان داده شود.

در کد مثال زیر، منوی navbar را با کلاس fixed-top، در بالای صفحه ثابت کرده ایم :

 

مثال

 

 

...

 

 

همچنین با استفاده از کلاس fixed-bottom، می توانید یک عنصر را در پایین صفحه چسبانده و همواره (حتی با اسکرول صفحه به بالا)، به طور ثابت در انتهای صفحه نمایش دهید.

در کد مثال دوم، منوی navbar را به انتهای صفحه، چسبانده ایم :

 

مثال

 

 

...

 

 

در حالت سوم، به وسیله کلاس sticky-top، می توانید کاری کنید تا یک عنصر، هنگامی که موقعیت اسکرول صفحه به آن رسید، به بالای صفحه چسبیده و تا زمان برگشت به موقعیت اسکرول آن، ثابت در بالای صفحه بماند.

نکته :

این کلاس در مرورگر IE 11 کار نمی کند.

مثال : در کد مثال زیر، به منوی navbar کلاس sticky-top داده ایم. هنگامی که کاربر به پایین اسکرول کرده و موقعیت صفحه به آن می رسد، به بالای صفحه پرش کرده و به صورت ثابت در آنجا نمایش داده می شود :

 

 

...

 

 

می توانید از کلاس close، برای ایجاد یک دکمه بستن استفاده کنید. معمولا از این دکمه ها در کادرهای هشدار alert یا پیام modal، استفاده می شود.

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

 

مثال

×

 

آموزش تعیین متن برای دستگاه های نابینایان Screen readers :

می توانید از کلاس sr-only برای مخفی کردن یک عنصر یا نوشته، در کلیه دستگاه ها و صفحه نمایش ها به جز صفحه نمایش های Screen Reader که مختص نابینایان است، استفاده نمایید. همانند کد مثال عملی زیر :

 

مثال

I will be hidden on all screens except for screen readers.

 

آموزش کار با رنگ ها Colors در بوت استرپ 4:

همانطور که در بخش های آموزشی قبل توضیح دادیم، بوت استرپ دارای یک سری کلاس متنی رنگی ویژه است که بر حسب رنگ آن ها، مفهوم خاصی را به کاربر القا کرده و برای تعیین رنگ نوشته و یا پس زمینه بسیار مناسب هستند.

این کلاس ها به همراه توضیح مختصری راجع به آن ها، عبارتند از :

​

 

مثال

 

 

 

Contextual Colors

 

 

Use the contextual classes to provide "meaning through colors":

 

 

This text is muted.

 

 

This text is important.

 

 

This text indicates success.

 

 

This text represents some information.

 

 

This text represents a warning.

 

 

This text represents danger.

 

 

Secondary text.

 

 

This text is dark grey.

 

 

Default body color (often black).

 

 

This text is light grey (on white background).

 

 

This text is white (on white background).

 

 

 

کلاس های رنگی متنی ویژه بوت استرپ 4 را می توانید درون لینک ها (تگ a یا Link) نیز به کار ببرید. در این صورت، در هنگام عبور موس از روی نوشته (hover)، رنگ نوشته لینک کمی تیره تر هم می شود. همانند مثال عملی زیر :

 

مثال

 

 

 

Contextual Link Colors

 

 

Hover over the links.

 

Muted link.

Primary link.

Success link.

Info link.

Warning link.

Danger link.

Secondary link.

Dark grey link.

Body/black link.

Light grey link.

 

 

همچنین می توانید با استفاده از کلاس های text-black-50 و text-white-50 به نوشته های سیاه یا سفید، پس زمینه و مقدار وضوح 50 درصد بدهید. نحوه کاربرد این کلاس ها را در کد مثال عملی زیر، نشان داده ایم :

 

مثال

 

 

 

Opacity Text Colors

 

 

Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

 

 

Black text with 50% opacity on white background

 

 

White text with 50% opacity on black background

 

 

 

 

آموزش کار با رنگ های پس زمینه background Colors در بوت استرپ 4:

از کلاس های متنی رنگی ویژه بوت استرپ، برای تعیین رنگ پس زمینه عناصر می توانید استفاده نمایید. این کلاس ها استفاده از رنگ های محبوب را سریع کرده و همچنین بر حسب رنگ خود، پیام های مفهومی به کاربران القا می کنند. فقط توجه داشته باشید که کلاس های رنگ پس زمینه، رنگ نوشته عنصر را تعیین نمی کنند، بنابراین لازم است تا گاهی آن ها را به همراه یک کلاس text-* برای تعیین رنگ نوشته به کار ببرید.

کلاس های رنگی مخصوص پس زمینه در بوت استرپ 4 به همراه توضیح مختصر آن ها به شرح زیر هستند :

​

 

مثال : در کد مثال عملی زیر، انواع کلاس های مختلف رنگی بوت استرپ 4 برای پس زمینه را در عمل به کار برده ایم :

 

مثال

 

 

 

Contextual Backgrounds

 

 

Use the contextual background classes to provide "meaning through colors".

 

 

Note that you can also add a .text-* class if you want a different text color:

 

 

This text is important.

 

 

This text indicates success.

 

 

This text represents some information.

 

 

This text represents a warning.

 

 

This text represents danger.

 

 

Secondary background color.

 

 

Dark grey background color.

 

 

Light grey background color.

 

 

 

 

بررسی کلاس کار با متن و فن چاپ در بوت استرپ 4 :

همانطور که در بخش آموزش کار با متن و فن چاپ در Bootstrap 4 نشان داده ایم، از کلاس های ویژه typography برای کار با متن و نوشته در بوت استرپ 4 استفاده می شود. لیست زیر، تمامی این کلاس ها را به ترتیب معرفی کرده است :

​

 

​

 

 

آموزش کار با عناصر تمام عرض (Block) در بوت استرپ 4:

برای این که یک عنصر به صورت تمام عرض در صفحه یا عنصر دربرگیرنده آن نمایش داده شود، بایستی کلاس d-block را به آن اضافه کنید. همچنین می توانید از کلاس های d-*-block برای کنترل نمایش تمام عرض عنصر در هر یک از سایزهای صفحه نمایش نیز استفاده کنید که در آن * می تواند یکی از مقادیر sm، md، Lg یا xl باشد.

مثال : در کد مثال عملی زیر، یک عنصر تمام عرض (Block) و چند عنصر دیگر که در صفحه نمایش های مختلف تمام عرض هستند را ایجاد کرده ایم :

مثال

d-block

d-sm-block

d-md-block

d-lg-block

d-xl-block

 

معرفی سایر کلاس های نمایش Display عنصر در Bootstrap 4 :

سایر کلاس های کنترل نمایش (Display) عناصر در بوت استرپ 4 را در جدول زیر معرفی کرده ایم :

​

 

 

آموزش طراحی سایت : آموزش کار با Flex در Bootstrap 4 :

می توانید از کلاس flex-* برای کنترل نحوه نمایش و قالب بندی (layout) یک عنصر توسط FlexBox، استفاده کنید.

برای دریافت اطلاعات بیشتر، به بخش آموزش کاربرد FlexBox در سایت تحلیل داده بروید.

علامت * در کلاس فوق می تواند یکی از مقادیر sm، md، lg و یا xl را داشته باشد که تعیین کننده سایز صفحه نمایش است.

در عکس زیر ، مثال های مختلفی از تراز بندی عناصر با FlexBox را نشان داده ایم :

​

 

آموزش طراحی سایت ادامه دارد

​

آموزش طراحی سایت-کلاس های کاربردی در بوت استرپ 4

​

  

سلام با آموزش Bootstrap 4 از دوره آموزش طراحی سایت در خدمت شما هستیم

 

آموزش کار با Scrollspy در بوت استرپ 4:

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

 

آموزش نحوه ایجاد یک Scrollspy در بوت استرپ 4:

از کد زیر برای ایجاد یک Scrollspy در Bootstrap 4 استفاده می شود. به کد دقت نمایید، سپس به تشریح نکات مهم آن پرداخته ایم :

 

مثال 1

<!-- The scrollable area -->

<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">

...

<ul class="navbar-nav">

<li><a href="#section1">Section 1</a></li>

...

</ul></nav>

<!-- Section 1 -->

<div id="section1">

<h1>Section 1</h1>

<p>Try to scroll this page and look at the navigation bar while scrolling!</p>

</div>

...

خاصیت data-spy=” Scroll” را به المنتی که دربرگیرنده منطقه اسکرول و پرش لینک ها و درواقع عنصر حاوی محتویات هدف است، اعمال کنید.

سپس خاصیت data-target را که مقدار آن برابر با Id یا کلاس عنصر منوی Navigation Bar است، اضافه کنید (کلاس navbar).

این کار برای اطمینان از اتصال منوی navbar به منطقه اسکرول شونده و دربرگیرنده محتوی است.

دقت کنید که المنت های اسکرول شونده دارای id ای معادل خاصیت href لینک لیست آیتم های درون منوی navbar باشند، مثلا تگ div دارای id معادل “section1” بوده که با خاصیت href تگ a معادل #section1 برابر است.

در نهایت خاصیت اختیاری data-offset تعیین کننده تعداد پیکسل فاصله از بالای عنصر اسکرول شونده است که در هنگام محاسبه موقعیت آن، لحاظ خواهد شد. این خاصیت زمانی کاربرد دارد که شما احساس می کنید لینک های درون منوی navbar، حالت فعال بودن (active state) خود را در هنگام پرش به عناصر اسکرول شونده، خیلی زود، تغییر می دهند. مقدار پیش فرض آن 10 پیکسل است.

نکته :

المنت با خاصیت data-spy=”scroll” نیازمند خاصیت موقعیت CSS Position برابر با حالت relative است تا درست کار کند.

 

ایجاد Scrollspy عمودی در آموزش طراحی سایت

در کد مثال عملی زیر، از دکمه های pills بوت استرپ 4، برای ایجاد Scrollspy عمودی استفاده کرده ایم. به کد مثال و تفاوت آن با کد قبل دقت نمایید :

مثال 2

<div class="container-fluid">

<div class="row">

<nav class="col-sm-3 col-4" id="myScrollspy">

<ul class="nav nav-pills flex-column">

<li class="nav-item">

<a class="nav-link active" href="#section1">Section 1</a>

</li>

...

</ul>

</nav>

<div class="col-sm-9 col-8">

<div id="section1">

<h1>Section 1</h1>

<p>Try to scroll this page and look at the menu while scrolling!</p>

</div>

...

</div>

</div>

</div>

 

آموزش کار با کلاس های کاربردی Utility Classes در Bootstrap 4

بوت استرپ 4، دارای تعداد زیادی کلاس کاربردی / کمکی موسوم به Utility Classes است که به شما امکان می دهد بدون استفاده از هیچ کد یا استایل CSS، قالب مورد نظرتان را به المنت هدف، اعمال کنید.

 

آموزش کار با کلاس خطوط حاشیه border در بوت استرپ 4:

به وسیله کلاس border در بوت استرپ 4، می توانید خطوط حاشیه برای یک المنت اضافه یا حذف نمایید.

شکل زیر، مدل های مختلف تعیین خطوط حاشیه در Bootstrap 4 را نشان می دهد.

​

 

مثال : در کد مثال عملی زیر، نحوه تعیین خطوط حاشیه به دور یک عنصر را نشان داده ایم. در مثال اول، المنت span در هر چهار طرف دارای خطوط حاشیه خواهد بود ولی در مثال های بعد با اعمال عدد صفر و تعیین جهت، خطوط حاشیه مورد نظر را حذف کرده ایم :

 

مثال 1

<span class="border"></span>

<span class="border border-0"></span>

<span class="border border-top-0"></span>

<span class="border border-right-0"></span>

<span class="border border-bottom-0"></span>

<span class="border border-left-0"></span>

 

آموزش تعیین رنگ خطوط حاشیه با کلاس border در بوت استرپ 4:

به وسیله کلاس اصلی border و کلاس های متنی رنگی ویژه بوت استرپ 4، می توانید رنگ های خاص و مفهومی را برای خطوط حاشیه المنت تعیین نمایید. در عکس زیر، مدل های مختلف تعیین رنگ برای خطوط حاشیه عنصر، نشان داده شده است :

​

 

مثال: در کد مثال عملی زیر : برای چندین المنت Span خطوط حاشیه رنگی با استفاده از کلاس متنی رنگی ویژه بوت استرپ 4، تعیین کرده ایم :

 

مثال 2

<span class="border border-primary"></span>

<span class="border border-secondary"></span>

<span class="border border-success"></span>

<span class="border border-danger"></span>

<span class="border border-warning"></span>

<span class="border border-info"></span>

<span class="border border-light"></span>

<span class="border border-dark"></span>

<span class="border border-white"></span>

 

تعیین خطوط حاشیه گرد Border Radius در آموزش طراحی سایت:

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

​

 

به وسیله کلاس rounded و سایر کلاس های وابسته می توانید تعیین کنید گوشه های خطوط حاشیه یک عنصر به صورت گرد باشد. با اعمال کلاس rounded، هر چهارگوش عنصر گرد خواهد شد، اما با تعیین جهت بالا (top)، پایین (bottum) و چپ (left) و راست (right) می توانید گرد شدن هر طرف را به صور مجزا مشخص نمایید.

همچنین به وسیله اضافه کردن مقادیری مثل sm یا Lg تعیین کنید فقط در برخی سایز صفحه های نمایش، خطوط حاشیه گرد شوند. انواع حالت های مختلف و خروجی آن ها را در کد مثال عملی زیر، نشان داده ایم :

 

مثال 3

<span class="rounded-sm"></span>

<span class="rounded"></span>

<span class="rounded-lg"></span>

<span class="rounded-top"></span>

<span class="rounded-right"></span>

<span class="rounded-bottom"></span>

<span class="rounded-left"></span>

<span class="rounded-circle"></span>

<span class="rounded-0"></span>

آموزش طراحی سایت ادامه دارد

​

آموزش طراحی سایت- Popover و Toast در بوت استرپ 4

سلام با آموزش Bootstrap 4 از دوره آموزش طراحی سایت در خدمت شما هستیم

کامپوننت Popover بسیار شبیه کادر راهنما tooltip است که در درس قبل به آموزش آن پرداختیم. Popover یک کادر ظاهر شونده pop up است که در هنگام کلیک کاربر بر روی یک المنت، ظاهر می شود. با tooltip دو فرق عمده دارد : یکی این که با کلیک بر روی المنت فعال می شود ؟؟؟؟ عبور موس از روی آن و دوم این که می تواند حاوی محتویات بیشتری باشد.

در عکس زیر، دو نمونه کادر محاوره Popover را نشان داده ایم :

 

 

آموزش نحوه ایجاد کادر Popover در بوت استرپ 4:

برای ایجاد یک کادر Popover در بوت استرپ 4، خاصیت data-toggle=” Popover” را به المنت مورد نظر بدهید.

سپس از خاصیت title برای تعیین متن هدر (Header) کادر Popover استفاده کرده و به وسیله خاصیت data-content، متن ی که می خواهید درون بدنه (body) آن نمایش داده شود را تعیین نمایید.

مثال: در کد مثال عملی، توسط یک تگ a یک کادر محاوره ای Popover را ایجاد کرده ایم :

<a href="#" data-toggle="popover" title="Popover Header"

data-content="Some content inside the popover">Toggle popover</a>

نکته :

برای اجرای درست کادر محاوره ای Popover بایستی آن را توسط jQuery در صفحه لود اولیه بکنید. برای این منظور بایستی از متد Popover() استفاده کرده و کد زیر را درون صفحه قرار دهید :

 

مثال 1

<div class="container">

<h3>Popover Example</h3>

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

</div>

 

<script>

$(document).ready(function(){

$('[data-toggle="popover"]').popover();

});

</script>

 

تعیین جهت باز شدن منوی محاوره ای Popover در آموزش طراحی سایت:

به صورت پیش فرض، کادر محاوره ای در سمت راست المنت باز می شود.

اما به وسیله خاصیت data-placement می توانید جهت باز شدن آن را به بالا (top)، راست (right)، زیر (buttom) و چپ (left) تغییر دهید، همانند کد مثال عملی زیر :

 

مثال 2

<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>

<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>

<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>

<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>

نکته :

اگر فضای کافی برای باز شدن کادر Popover وجود نداشته باشد خاصیت Placement آن به درستی کار نخواهد کرد. برای مثال، اگر المنت Popover در بالاترین نقطه صفحه باشد و خاصیت placement روی مقدار بالا (top) تنظیم شده باشد، برنامه کادر را در پایین المنت و سمت راست آن (هر جایی که فضا برایش فراهم باشد)، باز خواهد کرد.

 

آموزش ایجاد کادر Popover با قابلیت بسته شدن :

به صورت پیش فرض، المنت Popover در هنگام کلیک مجدد بر روی آن، بسته می شود. اما می توانید با تنظیم خاصیت data-trigger آن روی مقدار focus، کاری کنید با کلیک در ناحیه ای خارج از المنت، کادر بسته شود. همانند مثال عملی زیر :

 

مثال 3

<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>

نکته :

اگر می خواهید کادر Popover با عبور موس بر روی المنت ظاهر شود، بایستی خاصیت data-trigger آن را بر روی hover قرار دهید، همانند کد مثال عملی زیر :

 

مثال 4

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>

 

 

آموزش کار با Toast در Bootstrap 4

کامپوننت Toast همانند یک کادر اخطار alert box است با این تفاوت که فقط برای چند ثانیه و در کنار المنت موردنظر نمایش داده می شود. این کامپوننت در هنگام بروز یک رویداد، مثلا کلیک کاربر بر روی یک دکمه، ارسال یک فرم و ... ظاهر و فعال می شود.

 

آموزش ایجاد یک Toast در بوت استرپ 4:

برای ایجاد کادر محاوره ای Toast، از یک المنت با کلاس toast، یک المنت با کلاس toast-header جهت تعیین عنوان یا هدر آن و یک المنت toast-body جهت تعیین محتوا و body آن، استفاده نمایید. همانند کد مثال عملی زیر :

<div class="toast">

<div class="toast-header">

Toast Header

</div>

<div class="toast-body">

Some text inside the toast body

</div>

</div>

نکته :

برای اجرای صحیح، کادر toast بایستی از قبل توسط jQuery در صفحه مقداردهی اولیه شود. برای این منظور از متد toast() به صورت زیر، استفاده می شود. قطعه کد jQuery زیر را بایستی درون صفحه قرار دهید :

کد زیر برای اجرای اولیه tooltip در Bootstrap 4 توسط jQuery بایستی به صفحه اضافه شود :

<script>

$(document).ready(function(){

$('.toast').toast('show');

});

</script>

مثال 1

<button type="button" class="btn btn-primary" id="myBtn">Show Toast</button>

 

<div class="toast">

<div class="toast-header">

Toast Header

</div>

<div class="toast-body">

Some text inside the toast body

</div>

</div>

 

آموزش ظاهر و مخفی کردن کادر Toast در بوت استرپ 4:

المنت های Toasts به صورت پیش فرض، مخفی هستند. اگر مقدار خاصیت data-antohide را بر روی faile تنظیم کنید، به صورت پیش فرض نمایش داده خواهد شد. برای بسته شدن المنت Toast نیز از یک دکمه button با خاصیت data-dismiss برابر با toast استفاده نمایید، همانند کد مثال عملی زیر :

 

مثال 2

<div class="toast" data-autohide="false">

<div class="toast-header">

<strong class="mr-auto text-primary">Toast Header</strong>

<small class="text-muted">5 mins ago</small>

<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>

</div>

<div class="toast-body">

Some text inside the toast body

</div>

</div>

راهنمایی :

همانطور که در کد مثال عملی فوق مشاهده کردید، از کلاس mr-auto، ml-2 و mb-1 استفاده شده است. این کلاس ها مارجین های متفاوتی را به المنت اعمال می کنند. در بخش آموزش کلاس های کاربردی Bootstrap 4 utilities به تشریح و آموزش کامل آن ها پرداخته شده است.

 

 

 

آموزش طراحی سایت ادامه دارد

آموزش طراحی سایت-آموزش ساخت اسلایدر در Bootstrap 4

سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل با مفهوم زیر آشنا شدیم

• کار با فرم Form در Bootstrap 4
• آموزش اعتبارسنجی فرم ها (Form Validation) در Bootstrap
• آموزش کار با کنترل های ورود اطلاعات Input در بوت استرپ 4

 

حال با ادامه آموزش بوت استرپ 4 از دوره آموزش طراحی سایت همراه باشید:

 

 

آموزش ساخت اسلایدر Carousel در Bootstrap 4

یک اسلایدر یا carousel در بوت استرپ 4، یک اسلاید شو برای نمایش دو یا چند عکس پشت سر هم و تکرار وار است.

 

نحوه ایجاد یک اسلایدر carousel در بوت استرپ 4:

در کد مثال عملی، نحوه ساخت یک اسلایدر carousel را که دارای فلش های حرکت بین عکس ها و کنترل های لازم است را آموزش داده ایم.

به کد مثال و خروجی آن دقت نمایید. در ادامه به تشریح هر بخش پرداخته ایم :

 

مثال 1

<div id="demo" class="carousel slide" data-ride="carousel">

 

<!-- Indicators -->

<ul class="carousel-indicators">

<li data-target="#demo" data-slide-to="0" class="active"></li>

<li data-target="#demo" data-slide-to="1"></li>

<li data-target="#demo" data-slide-to="2"></li>

</ul>

 

<!-- The slideshow -->

<div class="carousel-inner">

<div class="carousel-item active">

<img src="la.jpg" alt="Los Angeles">

</div>

<div class="carousel-item">

<img src="chicago.jpg" alt="Chicago">

</div>

<div class="carousel-item">

<img src="ny.jpg" alt="New York">

</div>

</div>

 

<!-- Left and right controls -->

<a class="carousel-control-prev" href="#demo" data-slide="prev">

<span class="carousel-control-prev-icon"></span>

</a>

<a class="carousel-control-next" href="#demo" data-slide="next">

<span class="carousel-control-next-icon"></span>

</a>

 

</div>

توضیح مثال : در ادامه به تشریح و آموزش کارکرد هریک از کلاس های استفاده شده در carousel پرداخته ایم :

 

آموزش اضافه کردن عنوان (Caption) به هر عکس اسلایدر:

معمولا در زیر هر عکس یک عنوان یا Caption که در مورد اسلایدر توضیح می دهد، قرار می گیرد.

با استفاده از کلاس های carousel-caption و carousel-item در یک تگ div می توانید توضیح یا Caption برای هر اسلاید تعیین کنید، همانند مثال زیر:

 

مثال 2

<div class="carousel-item">

  <img src="la.jpg" alt="Los Angeles">

  <div class="carousel-caption">

    <h3>Los Angeles</h3>

    <p>We had such a great time in LA!</p>

  </div>

</div>

 

آموزش طراحی سایت آموزش کار با کادر پیام Modal در Bootstrap 4

کامپوننت Modal در چهارچوب کاری بوت استرپ 4، یک کادر نمایش popup است که در بالای صفحه جاری ظاهر شده و نمایش داده می شود. عملکرد Modal شبیه کادر اخطار alert در جاوا اسکریپت است، ولی با ظاهری مدرن تر و زیباتر.

 

آموزش ساخت یک کادر نمایش Modal در بوت استرپ 4:

در کد مثال عملی زیر، نحوه ساخت یک کادر نمایش Modal در Bootstrap 4 را نمایش داده ایم، کد را مطالعه کرده و خروجی را مشاهده نمایید، نکات مهم کد عبارتند از :

• برای فراخوانی و اجرای کادر نمایش Modal معمولا از یک دکمه button یا تگ link استفاده می شود که با کلیک بر روی آن، کادر ظاهر می شود. این المنت بایستی درای خاصیت data-toggle برابر modal بوده و مقدار خاصیت data-target آن نیز برابر با id المنت Modal تنظیم شود.
• کادر نمایش Modal در یک تگ یا عنصر دربرگیرنده (مثل تگ div) با کلاس modal قرار گرفته و بدنه اصلی آن را نیز 2 تگ با کلاس های modal-dialog و modal-content تعیین می کنند.
• یک کادر نمایش Modal می تواند دارای 3 بخش اصلی هدر، بدنه و فوتر باشد که به ترتیب با المنت هایی با کلاس modal-header با modal-body و modal-footer تعریف می شوند.
• برای تعیین عنوان کادر نمایش Modal از یک عنصر با کلاس modal-tittle استفاده می شود.

 

مثال 1

<!-- Button to Open the Modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">

Open modal

</button>

 

<!-- The Modal -->

<div class="modal" id="myModal">

<div class="modal-dialog">

<div class="modal-content">

 

<!-- Modal Header -->

<div class="modal-header">

<h4 class="modal-title">Modal Heading</h4>

<button type="button" class="close" data-dismiss="modal">×</button>

</div>

 

<!-- Modal body -->

<div class="modal-body">

Modal body..

</div>

 

<!-- Modal footer -->

<div class="modal-footer">

<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

</div>

 

</div>

</div>

</div>

 

اضافه کردن افکت animation به کادر نمایش Modal:

می توانید افکت fade یا محو و ظاهر شدن تدریجی را با اعمال کلاس fade. به کادر نمایش Modal، بدان اضافه نمایید.

مثال: در کد مثال عملی زیر، در کادر نمایش Modal یکی با افکت fade و دیگری بدون افکت ایجاد کرده ایم که می توانید تفاوت در ظاهر شدن را مقایسه نمایید :

 

مثال 2

<!-- Fading modal -->

<div class="modal fade"></div>

 

<!-- Modal without animation -->

<div class="modal"></div>

 

آموزش تعیین سایز کادر نمایش Modal در Bootstrap 4:

می توانید با تعیین کلاس modal-sm، اندازه کادر نمایش Modal را کوچک کرده و با کلاس modal-lg سایزی بسیار بزرگ برایش تعیین نمایید.

کلاس اندازه مورد نظر را بایست به عنصر با کلاس modal-dialog اضافه نمایید. در کد مثال های عملی زیر، سایز مختلف Modal را ایجاد کرده ایم :

مثال 1: حالت کوچک sm

 

مثال sm

<div class="modal-dialog modal-sm">

</div>

مثال2: حالت بزرگ Lg

 

مثال lg

<div class="modal-dialog modal-lg">

</div>

مثال 3: حالت بسیار بزرگ xl

 

مثال xl

<div class="modal-dialog modal-xl">

</div>

نکته :

در حالت پیش فرض، بوت استرپ 4، کادرهای نمایش Modal را در اندازه متوسط md یا medium نمایش می دهد.

 

آموزش وسط نمایش دادن کادر نمایش Modal در بوت استرپ 4:

می توایند با اعمال کلاس modal-dialog-centred به کادر نمایش Modal، هم به صورت افقی و هم عمودی، آن را در وسط صفحه نمایش دهید. همانند کد مثال عملی زیر :

 

مثال center

<div class="modal-dialog modal-dialog-centered">

</div>

 

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

هنگامی که محتویات درون کادر Modal زیاد باشد، به طوری که در ارتفاع عنصر جا نشود، نوار اسکرول به کادر نمایش اضافه می شود. برای درک بهتر به کد مثال عملی زیر و خروجی آن دقت نمایید :

 

مثال scroll

<div class="modal-dialog">

</div>

در حالت قبل، برای دیدن ادامه محتویات کادر نمایش Modal صفحه رو به پایین و بالا اسکرول می شود. اما می توانید با اضافه کردن کلاس modal-dialog-scrollable به عنصر دارای کلاس modal-dialog، کاری کنید خود کادر نمایش Modal دارای نوار اسکرول شده و بدون اسکرول صفحه، مابقی محتویات آن را ببینید. همانند کد مثال عملی زیر :

 

مثال scroll 2

<div class="modal-dialog modal-dialog-scrollable">

</div>

 

آموزش کار با عنوان راهنما tooltip در Bootstrap 4

کامپوننت عنوان راهنما یا tooltip یک کادر کوچک popup است که در هنگام عبور موس از روی یک المنت، ظاهر شده و معمولا توضیحاتی راجع به آن ارائه می دهد.

 

آموزش ایجاد عنوان راهنما tooltip در بوت استرپ 4:

برای ایجاد یک tooltip، خاصیت data-toggle=” tooltip” را به المنت مورد نظرتان اضافه کنید. سپس متن ی که می خواهید در tooltip نمایش داده شود را درون خاصیت title تعیین نمایید. نحوه انجام کار را در کد مثال عملی زیر نشان داده ایم :

 

مثال 1

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

نکته :

برای اجرای صحیح کادر عنوان tooltip در بوت استرپ 4، بایستی آن را توسط jQuery فراخوانی اولیه نمایید. به این صورت که المنت مورد نظر را انتخاب کرده و متد tooltip() را بر رویش اجرا نمایید.

کد زیر برای اجرای اولیه tooltip در Bootstrap 4 توسط jQuery بایستی به صفحه اضافه شود :

<script>

$(document).ready(function(){

$('[data-toggle="tooltip"]').tooltip();

});

</script>

 

آموزش تعیین موقعیت قرارگیری tooltip در بوت استرپ 4:

به صورت پیش، کادر متن راهنما tooltip در بالای عنصر نمایش داده می شود.

اما می توانید از خاصیت data-placement برای قرارگرفتن کادر tooltip در بالا (top)، پایین (bottom)، راست (right) و چپ (left) عنصر استفاده نمایید. همانند کد مثال عملی زیر :

 

مثال 2

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>

<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>

<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>

<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>

آموزش طراحی سایت ادامه دارد

آموزش طراحی سایت-آموزش کار با فرم در Bootstrap 4

سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل با مفهوم زیر آشنا شدیم

• کار با منو بار Navs در Bootstrap 4
• آموزش کار با لبه ها Tabs در Bootstrap 4
• آموزش کار با Pills در بوت استرپ 4
• آموزش کاربرد Dropdown با منوی pills
• آموزش کاربرد Dropdown با منوی Tabs

حال با ادامه آموزش بوت استرپ 4 از دوره آموزش طراحی سایت همراه باشید:

 

 

آموزش کار با فرم Form در Bootstrap 4

بوت استرپ 4، کلاس ها و امکانات ویژه ای برای کار با فرم ها (تگ <form>) فراهم کرده است.

کنترل های درون تگ Form در بوت استرپ 4، به صورت خودکار کلیه ی استایل عمومی را دریافت می کند. برای مثال کلیه کادرهای متن در فرم ها مثل تگ <input>، تگ <teatarea> و تگ <select> در صورت دریافت کلاس form control، عرضی برابر 100 درصد خواهند داشت.

بوت استرپ 4 دو نوع قالب یا layout در نمایش اجرای فرم به کار می برد :

1-حالت تمام عرض برای هر کنترل (stacked full width) : در این حالت، کنترل های فرم بر روی هم و با عرض 100 درصد صفحه یا عنصر دربرگیرنده، نمایش داده می شوند.

2- حالت درون خطی (inline form): در این حالت کنترل های فرم در کنار هم و در یک خط، حالت چپ چین نمایش داده می شوند.

 

آموزش حالت تمام عرض در فرم های بوت استرپ 4:

 

در کد مثال عملی زیر، یک فرم بوت استرپ با 2 کنترل ورودی کادر متن، یک دکمه checkbox و یک دکمه ارسال submit button ایجاد کرده ایم که در حالت تمام عرض (full width) نمایش داده می شوند.

برای اطمینان از نمایش درست کنترل ها و رعایت مارجین و Padding، هر کنترل را درون یک عنصر دربرگیرنده با کلاس form-group قرار دهید :

 

مثال 1

<div class="form-group">

<label for="email">Email address:</label>

<input type="email" class="form-control" id="email">

</div>

<div class="form-group">

<label for="pwd">Password:</label>

<input type="password" class="form-control" id="pwd">

</div>

<div class="form-group form-check">

<label class="form-check-label">

<input class="form-check-input" type="checkbox"> Remember me

</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

 

 

آموزش حالت درون خطی inline form در آموزش طراحی سایت :

 

در حالت نمایش درون خطی (inline form)، تمامی کنترل ها در یک خط و با حالت پیش فرض چپ چین نمایش داده می شوند.

نکته :

حالت inline فقط در صفحه نمایش های بزرگتر از عرض 576 پیکسل کار می کند. در صفحات موبایلی و کمتر از عرض 576 پیکسل، به صورت خودکار فرم ها به صورت تمام عرض و هر کنترل در یک خط نمایش داده می شود.

برای نمایش المنت های فرم به صورت درون خطی در Bootstrap 4، بایستی کلاس form-inline. را به تگ <form> اضافه نمایید.

مثال عملی : در کد مثال عملی زیر، دو کنترل کادر متن، یک chechbox و دکمه ارسال submit را در یک فرم به صورت خطی (inline) نمایش داده ایم :

 

مثال 2

<form class="form-inline" action="/action_page.php">

<label for="email">Email address:</label>

<input type="email" class="form-control" id="email">

<label for="pwd">Password:</label>

<input type="password" class="form-control" id="pwd">

<div class="form-check">

<label class="form-check-label">

<input class="form-check-input" type="checkbox"> Remember me

</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

 

آموزش چیدمان بهتر کنترل ها در حالت inline با استفاده از کلاس های کمکی utilities بوت استرپ 4:

کنترل های فرم در مثال آموزشی قبلی، بسیار به هم چسبیده و فشرده هستند. شما می توانید از کلاس های کمکی بوت استرپ (utility classes) برای چیدمان بهتر این کنترل ها در فرم استفاده کنید.

مثلا در کد مثال زیر، از کلاس کمکی mr-sm-2. استفاده کرده ایم که در تمامی دستگاه و اندازه های صفحه نمایش، یک مارجین راست 2 پیکسلی را به تمامی کنترل ها می دهد.

همچنین کلاس کمکی mb-2.، در صورتی که کنترل ها در حالت stacked و بر روی هم قرار بگیرند (به دلیل عرض کم جهت نمایش همه آن ها در یک خط)، یک مارجین زیر (bottom margin) به اندازه 2 پیکسل را به همه کنترل ها اضافه کردند. برای درک بهتر به خروجی و کد مثال دقت نمایید :

 

مثال 3

<form class="form-inline" action="/action_page.php">

<label for="email" class="mr-sm-2">Email address:</label>

<input type="email" class="form-control mb-2 mr-sm-2" id="email">

<label for="pwd" class="mr-sm-2">Password:</label>

<input type="password" class="form-control mb-2 mr-sm-2" id="pwd">

<div class="form-check mb-2 mr-sm-2">

<label class="form-check-label">

<input class="form-check-input" type="checkbox"> Remember me

</label>

</div>

<button type="submit" class="btn btn-primary mb-2">Submit</button>

</form>

راهنمایی :

راهنمایی : به طور کامل در بخش آموزش کلاس های کمکی (Bootstrap 4 utilities classes) به آموزش استفاده از این کلاس ها خواهیم پرداخت.

 

آموزش اعتبارسنجی فرم ها (Form Validation) در Bootstrap 4:

در بوت استرپ 4، می توانید از کلاس اعتبارسنجی (Validation Classes) برای ارسال فیدبک های چک کردن اطلاعات وارد شده در فرم، به کاربر، استفاده کنید.

می توانید کلاس های was-validated یا needs-validation را به المنت form اضافه کرده، بسته به این که بخواهید فرم را قبل یا بعد از زدن دکمه ارسال یا submit، چک کرده و پیام های اعتبارسنجی را به کاربر نشان دهید.

در صورت ورود اطلاعات درست در هر کادر متن یا input فرم، کنترل دارای خطوط حاشیه سبز (valid) و در صورت ورود اطلاعات اشتباه یا عدم ورود اطلاعات لازم، دارای خطوط حاشیه قرمز (invalid) خواهد بود.

همچنین می توانید از المنت هایی با کلاس valid-feedback یا invalid-feedback برای اعلام دقیق پیام خطا به کاربر و یا اعلام اینکه چه چیزی فراموش شده یا نادرست است، استفاده کنید.

مثال عملی : در کد مثال عملی زیر، تمامی موارد گفته شده فوق را در عمل به کار برده ایم. در این کد از کلاس was-validated استفاده کرده ایم که اطلاعات را قبل از ارسال و زدن دکمه submit، چک خواهد کرد :

 

مثال 4

<form action="/action_page.php" class="was-validated">

<div class="form-group">

<label for="uname">Username:</label>

<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required="">

<div class="valid-feedback">Valid.</div>

<div class="invalid-feedback">Please fill out this field.</div>

</div>

<div class="form-group">

<label for="pwd">Password:</label>

<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required="">

<div class="valid-feedback">Valid.</div>

<div class="invalid-feedback">Please fill out this field.</div>

</div>

<div class="form-group form-check">

<label class="form-check-label">

<input class="form-check-input" type="checkbox" name="remember" required=""> I agree on blabla.

<div class="valid-feedback">Valid.</div>

<div class="invalid-feedback">Check this checkbox to continue.</div>

</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

 

آموزش کار با کادرهای ورود اطلاعات فرم در Bootstrap 4

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

• ورود متن input.
• ورود متن چند خطی textarea.
• کنترل انتخاب گزینه checkbox.
• کنترل های رادیویی radio.
• کنترل کادر کشویی select.

در ادامه به آموزش کار با هر یک از کنترل های فوق و ارائه مثال های عملی خواهیم پرداخت.