آموزش Bootstrap 4

به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی

تازه ترين مطالب

پربازديدترين مطالب

محبوب ترين مطالب

آموزش طراحی سایت-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,

آموزش Bootstrap-کار با List Group در بوت استرپ 4

پیمان کلانتری دوشنبه ۰۹ دی ۹۸ | ۱۲:۴۶ ۱۰۵ بازديد
سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل صفحه بندی Pagination و ایجاد چرخنده Sppiner در Bootstrap4 آشنا شدیم.
حال با ادامه آموزش بوت استرپ 4 همراه باشید:
آموزش کار با لیست گروهی List Group در بوت استرپ 4
ساده ترین نوع لیست گروهی یک لیست بدون نشانه و ترتیب (Unordered list) با یک یا چندین آیتم درون آن است، همانند عکس زیر:

 

 

 

 
برای ایجاد یک لیست گروهی ساده در بوت استرپ 4، از یک تگ
    با کلاس list-group، استفاده می شود که هر آیتم درون آن با یک تگ
  • با کلاس list-group-item، تعیین خواهد شد، همانند کد مثال عملی زیر:
مثال
1
  • First item
  • Second item
  • Third item
    •  
    آموزش فعال کردن یک آیتم در لیست Active Item:
    اگر به یکی از آیتم های
  • درون یک لیست بوت استرپ 4، کلاس .active بدهید، آن آیتم به صورت فعال با پس زمینه رنگی (به صورت پیش فرض) و متمایز از بقیه نشان داده خواهد شد.

    •  

     

     

     
    مثال: در کد مثال زیر، یک لیست گروهی در Bootstrap 4 ایجاد کرده ایم که آیتم اول آن به صورت فعال درآمده است :
    مثال2
     
    • Active item
    • Second item
    • Third item
      •  
      آموزش ایجاد لیست با آیتم های لینک در Bootstrap 4:
      برای ایجاد یک لیست گروهی با آیتم های لینک، از یک تگ
      مثال 3
       
      First item
      Second item
      Third item
       
      آموزش ایجاد یک آیتم غیر فعال (Disabled) در لیست Bootstrap 4:
      برای تعیین یک آیتم در لیست به صورت غیر فعال (Disabled) بایستی کلاس .disabled را به عنصر اضافه کنید. در این حالت، رنگ نوشته آیتم به صورت خاکستری و کم رنگ در می آید و غیر فعال خواهد بود. همچنین در لیست های لینکی، قابلیت hover آن ها نیز از بین می رود.

       

       

       

       
      مثال: در مثال زیر، یک لیست در بوت استرپ 4، ایجاد کرده ایم که آیتم اول و دوم آن، غیر فعال است.
      مثال 4
       
      Disabled item
      Disabled item
      Third item
       
      آموزش حذف خطوط حاشیه (border) لیست در بوت استرپ 4:
      در صورت استفاده از کلاس .list-group-flush در عنصر مادر لیست تگ
        ، خطوط حاشیه یا Border دور لیست حذف شده و دیگر نوشته های آن گرد نیز نخواهد بود، همانند کد عملی مثال زیر :

       

       

       

      مثال 5
       
      • First item
      • Second item
      • Third item
      • Fourth item
        •  
        آموزش ایجاد لیست افقی Horizontal List در بوت استرپ 4:
        دوره آموزش BootStrap 4
         
        اگر می خواهید آیتم های لیست در بوت استرپ 4، به صورت افقی یا Horizontal به جای عمودی Vertical (در کنار هم به جای قرار گرفتن بر روی هم) نمایش داده شوند، کلاس .list-group-horizontal را به عنصر مادر لیست (تگ
          یا
          با کلاس list-group)، اضافه نمایید، همانند کد مثال عملی زیر:

         

         

         

        مثال 6
         
        • First item
        • Second item
        • Third item
        • Fourth item
          •  
          آموزش استفاده از کلاس های رنگی متنی در لیست بوت استرپ 4:
          از کلاس های متنی رنگی ویژه بوت استرپ 4، یا کلاس های Contextual Classes که در بخش های قبل معرفی کردیم، برای تعیین رنگ پس زمینه آیتم های لیست استفاده نمایید. این رنگ ها مفهومی هستند و هریک پیام خاصی مثل موفقیت یا خطر را به کاربر نشان می دهد:

           

           

           

          مثال: کلاس های رنگی متنی ویژه بوت استرپ 4، عبارتند از .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-dark و list-group-item-light، که از هریک از آن ها در لیست زیر برای تعیین رنگ یک آیتم لیست، استفاده کرده ایم :
          مثال 7
           
          • Success item
          • Secondary item
          • Info item
          • Warning item
          • Danger item
          • Primary item
          • Dark item
          • Light item
            •  
            آموزش ایجاد لیست لینک دار رنگی در Bootstrap 4:
            همانند مثال بخش های قبلی، می توانید از کلاس های رنگی ویژه بوت استرپ 4 در لیست های لینک دار هم استفاده کنید، با این تفاوت که در لیست های لینک دار از تگ های
            مثال: به کد مثال عملی زیر دقت کنید و خروجی را مشاهده نمایید :
             
            Action item
            Success item
            Secondary item
            Info item
            Warning item
            Danger item
            Primary item
            Dark item
            Light item
             
            آموزش ایجاد لیست های گروهی نشان دار Badges List در Bootstrap 4:
            می توانید با ترکیب کلاس badge و چند کلاس کمکی دیگر در بوت استرپ 4، لیست هایی دارای نشانه های عمودی یا متنی (Badge List) ایجاد نمایید، همانند عکس زیر:

             

             

             

            مثال: در کد مثال عملی زیر یک لیست نشان دار یا Badge List ایجاد کرده ایم. روال کار همانند یک لیست ساده بوت استرپ 4 است. با این تفاوت که برای اضافه کردن Badge یک تگ مثل با کلاس .badge و یکسری کلاس کمکی دیگر، درون هر آیتم لیست قرار داده ایم:
            مثال 9
             
            • Inbox
              12
            • Ads
              50
            • Junk
              99
               
              نکته :
              می توانید اعداد درون Badge را به صورت ایستاتیک تعریف کرده یا با استفاده از jQuery و Ajax آن را به صورت دینامیک نیز تغییر دهید.
              آموزش بوت استرپ 4 ادامه دارد
              برچسب ها: آموزش طراحی سایت, دوره آموزش BootStrap 4, آموزش bootstrap 4, آموزش بوت استرپ, کتاب آموزش بوت استرپ, فیلم آموزش بوت استرپ, فیلم آموزش bootstrap 4, دانلود آموزش bootstrap 4,

              آموزش Bootstrap- ایجاد چرخنده Sppiner در Bootstrap 4

              پیمان کلانتری جمعه ۰۶ دی ۹۸ | ۱۳:۲۳ ۹۳ بازديد
              سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل کار با نوار پیشرفت در Bootstrap4 آشنا شدیم.
              حال با ادامه آموزش بوت استرپ 4 همراه باشید:
              آموزش ایجاد چرخنده Sppiner در Bootstrap 4:
              برای ایجاد یک شکلک چرخنده (Sppiner) یا آیکون لود (loader) در بوت استرپ 4، از یک المنت با کلاس spinner-border، استفاده کنید.
              مثال: در کد مثال زیر، به وسیله یک تگ
              با کلاس .spinner-boarder، یک چرخنده در حال لود ایجاد کرده ایم:
              دوره آموزش BootStrap 4
               
              مثال 1
              نکته :
              رنگ پیش فرض چرخنده (Spiner) در بوت استرپ 4، مشکی (Black) است.
              آموزش ساخت چرخنده Spiner رنگی در بوت استرپ 4:
              با استفاده از کلاس های رنگی متنی ویژه بوت استرپ 4 (سری- text)، همانند کد مثال عملی زیر، می توانید چرخنده Spiner با رنگ های مختلف و مفهومی ایجاد کنید :
              آموزش ساخت چرخنده های بزرگ شونده Growing Spinner:
              اگر از کلاس .spinner-grow به جای .spinner-border استفاده کنید، چرخنده یا Spiner ایجاد شده، به جای چرخیدن، از سایز کوچک شروع شده و بزرگ می شود. در کد مثال عملی زیر، نحوه استفاده از این کلاس و خروجی آن را نشان داده ایم:
              مثال 3
              آموزش ساخت دکمه با چرخنده های متحرک در بوت استرپ 4:
              می توانید یک المنت با کلاس .spinner-border یا .spinner-grow را درون یک دکمه یا button قرار داده و آن را به یک دکمه لود تبدیل کنید. در این حالت می توانید برای دکمه متن نیز تعیین کرده یا خالی بگذارید.
              مثال: در کد مثال عملی زیر، نحوه ایجاد انواع دکمه با چرخنده های متحرک در Bootstrap 4 را نشان داده ایم:
              مثال 5
               
              Loading..
               
              Loading..
               
              Loading..
              آموزش صفحه بندی Pagination در Bootstrap 4:
              اگر سایتی دارید که دارای تعدادی زیادی صفحه است، حتما نیاز پیدا خواهید کرد صفحه بندی یا Pagination ی همانند زیر را برای پیمایش صفحات سایت ایجاد نمایید :

               

               

               

              برای ایجاد یک صفحه بندی Pagination ساده در صفحات وب سایت تان با ستتفاده از بوت استرپ 4، ابتدا یک تگ
              در کد مثال عملی زیر، نحوه ایجاد یک صفحه بندی Pagination کامل در Bootstrap 4 را نشان داده ایم:
              مثال 1
              • Previous
              • 1
              • 2
              • 3
              • Next
                • دوره آموزش BootStrap 4
                آموزش فعال کردن شماره صفحه جاری (Active State) در Pagination:
                در صورت اعمال کلاس .active به یکی از آیتم های
              • لیست
                  در صفحه بندی Bootstrap 4، شماره آن صفحه (که صفحه جاری خواهد بود) به صورت رنگی و توپر نشان داده می شود :

                •  

                 

                 

                مثال : در کد مثال زیر، صفحه 2 را با استفاده از کلاس .active، به عنوان صفحه جاری نشان داده ایم :
                مثال 2
                • Previous
                • 1
                • 2
                • 3
                • Next
                  • آموزش غیر فعال کردن لینک یک صفحه در صفحه بندی Pagination:
                  در صورت اعمال کلاس .disabled به لینک یک صفحه در صفحه بندی Bootstrap 4، لینک آن صفحه به صورت غیر فعال نشان داده شده و کاربر نمی تواند بر رویش کلیک نماید :

                   

                   

                   

                   
                  مثال : در کد مثال زیر، با استفاده از کلاس .disabled، لینک صفحه قبل (Previous) را غیر فعال کرده ایم:
                  مثال 3
                  • Previous
                  • 1
                  • 2
                  • 3
                  • Next
                    • آموزش تعیین سایز دکمه های صفحه بندی Pagination:
                    اندازه دکمه ها که در مثال های صفحه بندی Pagination Bootstrap 4، تاکنون در این درس مشاهده کردید، سایز متوسط یا پیش فرض بوت استرپ 4 است.
                    می توانید سایز بزرگ تر یا کوچک تر از حالت پیش فرض نیز برای دکمه ها تعیین کنید :

                     

                     

                     

                    با اعمال کلاس .pagination-lg به تگ مادر صفحه بندی (
                      )، دکمه ها به صورت بزرگ تر و با کلاس .pagination-sm، دکمه های به صورت کوچکتر نشان داده خواهند شد :
                    مثال 4

                    Large:

                    • Previous
                    • 1
                    • 2
                    • 3
                    • Next
                      •  

                      Default:

                      • Previous
                      • 1
                      • 2
                      • 3
                      • Next
                        •  

                        Small:

                        • Previous
                        • 1
                        • 2
                        • 3
                        • Next
                          • آموزش تعیین جهت قرارگیری صفحه بندی Pagination Alignment:
                          به صورت پیش فرض در بوت استرپ 4، دکمه های صفحه بندی Pagination از سمت چپ تراز می شوند اما از کلاس های ویژه utility در Bootstrap 4 برای وسط چین یا راست چین کردن آن ها می توانید استفاده کنید :

                           

                           

                           

                          مثال: در کد مثال عملی زیر، از کلاس ویژه کاربردی بوت استرپ 4 (utility Classess) استفاده کرده و جهت چینش در منوی صفحه بندی دوم و سوم را به دلخواه تغییر داده ایم :
                          مثال 5
                          • ...
                            •  
                            • ...
                              •  
                              • ...
                                • راهنمایی :
                                در بخش آموزش کلاس های کاربردی بوت استرپ 4 به آموزش کار با Bootstrap Utility Class پرداخته شده است.
                                آموزش ایجاد صفحه بندی خطی Breadcrumb Pagination:
                                مدل دیگه ای از صفحه بندی و ایجاد منوی صفحات در Bootstrap 4، منوی خطی یا نوار پیمایش افقی (به انگلیسی Breadcrumb) است. در این مدل منو، کل مسیر طی شد تا صفحه جاری نمایش داده می شود :

                                 

                                 

                                 

                                مثال : برای ایجاد یک منوی خطی Breadcrumb در بوت استرپ 4، بایستی کلاس .breadcrumb را به تگ
                                  بدهید، پس برای هریک از آیتم های
                                • لیست
                                    ، کلاس .breadcrumb-item را تعیین کنید :
                                مثال 6
                                • Photos
                                • Summer 2017
                                • Italy
                                • Rome
                                  • دوره آموزش بوت استرپ 4 ادامه دارد
                                  برچسب ها: آموزش طراحی سایت, دوره آموزش BootStrap 4, آموزش bootstrap 4, آموزش بوت استرپ, کتاب آموزش بوت استرپ, فیلم آموزش بوت استرپ, فیلم آموزش bootstrap 4, دانلود آموزش bootstrap 4,

                                  آموزش Bootstrap- کار با نوار پیشرفت در Bootstrap 4

                                  پیمان کلانتری جمعه ۰۶ دی ۹۸ | ۱۰:۵۷ ۱۰۶ بازديد
                                  سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل گروه بندی دکمه ها Button و کار با نشان برجسته Badges در Bootstrap4 آشنا شدیم.
                                  حال با ادامه آموزش بوت استرپ 4 همراه باشید:
                                  آموزش کار با نوار پیشرفت Progress Bar در Bootstrap 4
                                  از نوار پیشرفت یا Progress Bar می توان برای نشان دادن میزان پیشرفت یک عملیات یا حجم انجام شده یک پروسه توسط کاربر، استفاده کرد.

                                   

                                   

                                   

                                  برای ایجاد یک نوار پیشرفت یا Progress Bar در Bootstrap 4، کلاس .progress را به عنصر مادر یا Container و کلاس .progress-bar را به عنصر یا عناصر فرزند آن، اعمال کنید.
                                  همچنین از خاصیت width نوار پیشرفت، از که 0 تا 100 درصد تعیین می شود، می توانید برای نمایش میزان کار، استفاده کنید.
                                  نکته :
                                  توجه داشته باشید که خاصیت width در نوار پیشرفت Bootstrap 4 را هم می توانید به صورت ثابت یا دستی و هم به صورت خودکار و لحظه ای تنظیم نمایید.
                                  مثال: در کد مثال عملی زیر، یک نوار پیشرفت یا Progress Bar ساده با حجم 70 درصد پیشرفت را در بوت استرپ 4 ، ایجاد کرده ایم:
                                  دوره آموزش BootStrap 4
                                   
                                  مثال 1
                                  آموزش تنظیم ارتفاع Progress Bar در Bootstrap 4:

                                   

                                   

                                   

                                  ارتفاع نوار پیشرفت یا Progress Bar به صورت پیش فرض در بوت استرپ 4 ، مقدار 16 پیکسل است. می توانید از خاصیت ارتفاع CSS height برای تغییر آن به میزان دلخواه استفاده کنید. فقط توجه داشته باشید که مقدار خاصیت ارتفاع (height) در عنصر دربرگیرنده یا Container و عنصر یا عناصر فرزند، بایستی به یک اندازه باشد.
                                  مثال عملی: در کد مثال عملی زیر، یک نوار پیشرفت Progress Bar با ارتفاع 20 پیکسل را ایجاد کرده ایم:
                                  مثال 2
                                  آموزش نمایش متن در Progress Bar بوت استرپ 4 :

                                   

                                   

                                   

                                  می توانید با قرار دادن متن درون عنصر فرزند آیتم نوار پیشرفت در Bootstrap 4 میزان پیشرفت کار را به صورت متنی نیز نشان دهید.
                                  دقت نمایید که این متن را می توانید با استفاده از جاوا اسکریپت یا jQuery به صورت داینامیک نیز تغییر دهید.
                                  مثال: در کد مثال عملی زیر، با قرار دادن عدد 70% درون تگ
                                  عنصر فرزند نوار پیشرفت، میزان حجم جلورفت کار را به صورت متنی نیز نشان داده ایم:
                                  مثال 3
                                   
                                  70%
                                  آموزش ایجاد نوار پیشرفت رنگی در Bootstrap 4:

                                   

                                   

                                   

                                  در Bootstrap 4 به صورت پیش فرض رنگ نوار پیشرفت آبی (کلاس primary) است. می توانید از کلاس های متنی رنگی بوت استرپ 4 ، که در بخش های گذشته آموزش دادیم، برای تعیین رنگ دلخواه Progress Bar استفاده کنید.
                                  مثال: در کد مثال عملی زیر، با استفاده از کلاس های متنی رنگی Bootstrap 4 رنگ پس زمینه (برای مثال .bg-success برای رنگ سبز)، نوار پیمایش ها را تغییر داده ایم:
                                  مثال 4
                                   
                                   
                                   
                                   
                                   
                                   
                                   
                                   
                                   
                                  ایجاد نوار پیشرفت راه راه Striped Progress Bar در بوت استرپ 4 :

                                   

                                   

                                   

                                  از کلاس ویژه .progress-bar-striped می توانید جهت راه راه کردن بخش رنگی نوار پیشرفت در Bootstrap 4 استفاده کنید:
                                  مثال 5
                                   
                                  نکته :
                                  کلاس .progress-bar-striped بایستی به عنصر یا عناصر فرزند نوار پیشرفت بوت استرپ 4 ، اضافه شوند نه عنصر مادر یا Container.
                                  آموزش bootstrap 4
                                   
                                  آموزش ایجاد نوار پیشرفت متحرک Animated Progress Bar:
                                  در صورت اضافه کردن کلاس .progress-bar-animated به عنصر سازنده نوار پیشرفت و استفاده همزمان از کلاس .progress-bar-strped، خط های راه راه قسمت پر شده در نوار پیشرفت، حالت متحرک و پویا پیدا می کنند. برای درک بهتر مثال عملی زیر را مشاهده کنید :
                                  مثال 6
                                  آموزش ایجاد نوار پیمایش چندگانه Multiple Progress Bar:
                                  می توانید با قرار دادن چندین المنت با کلاس .progress-bar درون یک المنت مادر با کلاس .progress که هر کدام از عناصر فرزند درصدی بین 0 تا 100 دارند، یک نوار پیمایش چندگانه و با رنگ های مختلف (با استفاده از کلاس های رنگی متنی ویژه Bootstrap 4)، همانند عکس زیر ایجاد نمایید :

                                   

                                   

                                   

                                  Free Space
                                  Warning
                                  Danger
                                  آموزش بوت استرپ ادامه دارد
                                  برچسب ها: دوره آموزش BootStrap 4, آموزش bootstrap 4, آموزش بوت استرپ, کتاب آموزش بوت استرپ, آموزش طراحی سایت, فیلم آموزش bootstrap 4, دانلود آموزش bootstrap 4,

                                  آموزش Bootstrap -کار با دکمه Button در Bootstrap 4

                                  پیمان کلانتری چهارشنبه ۰۴ دی ۹۸ | ۱۳:۰۳ ۸۵ بازديد
                                  سلام با

                                  آموزش Bootstrap 4

                                  در خدمت شما هستیم در قسمت قبل با کار با عکس و تصویر , jumbotron و کار با کادر هشدار Alert Box در Bootstrap4 آشنا شدیم.
                                  آموزش کار با دکمه Button در Bootstrap 4:
                                  چهارچوب کاری بوت استرپ 4، چندین استایل و رنگ مختلف دکمه دارد که از هر کدام می توانید برای منظور خاصی استفاده کنید.مثلا یک دکمه برای عملیات تأیید مناسب است و دکمه دیگر برای اعلام خطر به کاربر. در شکل زیر، انواع مختلف دکمه های Bootstrap 4 با ظاهرهای گوناگون را نشان داده ایم:
                                   
                                  مثال: در کد مثال عملی زیر، نحوه ایجاد انواع مختلف دکمه های (Button) بوت استرپ 4 به همراه خروجی آن را نشان داده ایم:
                                  مثال:
                                  کلاس های ویژه دکمه (Button) در بوت استرپ را می توانید به تگ های لینک ، دکمه
                                  مثال 2
                                  Link Button
                                  راهنمایی : چرا در خاصیت آدرس برخی لینک ها (href) مقدار # قرار می دهیم؟
                                  چنانچه برای یک لینک آدرس مشخصی وجود ندارد و نمی خواهید کاربر با کلیک بر روی آن، خطای یافت نشدن صفحه (Error 404) را مشاهده نماید، می توانید یک کاراکتر # را در خاصیت آدرس یا href لینک قرار دهید. در مدل های طراحی حرفه ای تر، بهتر است اینگونه لینک ها را به صفحه جستو سایت، هدایت نمایید.
                                  آموزش ایجاد دکمه های بی رنگ outline Button در Bootstrap 4:
                                  دوره آموزش BootStrap 4
                                   
                                  علاوه بر دکمه های رنگی که در بخش قبل اشاره کردیم، بوت استرپ 4 ، هشت مدل دکمه بدون رنگ با خطوط حاشیه و نوشته رنگی را نیز معرفی کرده است، که در شکل زیر مشاهده می کنید:
                                   
                                  مثال: در کد مثال عملی زیر، نحوه ایجاد دکمه های بی رنگ (outline Button) در بوت استرپ را نشان داده ایم:
                                  مثال 3
                                  آموزش تعیین سایز دکمه Button در Bootstrap 4:
                                  با استفاده از 3 کلاس .btn-lg(دکمه بزرگ)، .btn(اندازه عادی) و btn-sm(دکمه کوچک)، می توانید سایز دکمه ها در Bootstrap 4 را تعیین نمایید، همانند شکل زیر:
                                   
                                  کد مثال عملی زیر، نحوه استفاده از کلاس های مختلف اندازه دکمه بوت استرپ را نشان داده است :
                                  مثال 4
                                  آموزش ایجاد دکمه تمام عرض در بوت استرپ:
                                  در صورت اضافه کردن کلاس .btn-block، دکمه به صورت تمام عرض نشان داده شده و کل عرض عنصر دربرگیرنده خود یا صفحه را اشغال می کند. طرز استفاده از این کلاس و خروجی آن را در کد مثال عملی زیر نشان داده ایم:
                                   
                                  آموزش ایجاد دکمه فعال/غیر فعال در بوت استرپ 4 :
                                  در Bootstrap 4 می توانید یک دکمه را به حالت فعال (انگار که کلیک شده) و یا غیر فعال (غیر قابل کلیک کردن) در بیاورید، همانند دو دکمه زیر :
                                   
                                  مثال 6
                                  Disabled Link
                                  کلاس .active، دکمه مورد نظر را به صورت فعال (انگار که کلیک شده است) نشان داده و کلاس .disabled آن را غیر فعال می کند به طوری که کاربر نمی تواند روی آن کلیک نماید. دقت داشته باشید که تگ از خاصیت disabled در HTML پشتیبانی نمی کند بنابراین استفاده از کلاس disabled. در آن، فقط لینک را به صورت ظاهری غیر فعال نشان داده و در عمل، قابل کلیک کردن خواهد بود.
                                  آموزش ایجاد دکمه های چرخنده (spinrer Button) در Bootstrap 4:
                                  در بوت استرپ 4 ، می توانید آیکون های چرخنده (Spinrer) را به یک دکمه اضافه کنید، برای دریافت اطلاعات بیشتر به بخش کار با چرخنده در Bootstrap 4 بروید. شکل زیر، انواع دکمه های Bootstrap 4 را با دکمه چرخنده نشان می دهد :
                                   
                                  در کد مثال عملی زیر، نحوه استفاده از کلاس چرخنده Spinrer در یک دکمه بوت استرپ و خروجی آن را نشان داده ایم:
                                  مثال 7
                                  Loading..
                                  Loading..
                                  Loading..
                                   
                                  دوره آموزش BootStrap 4 ادامه دارد
                                   
                                   
                                  برچسب ها: دوره آموزش BootStrap 4, آموزش bootstrap 4, آموزش بوت استرپ, کتاب آموزش بوت استرپ, فیلم آموزش بوت استرپ, آموزش طراحی سایت, دانلود آموزش bootstrap 4, کتاب آموزش bootstrap 4,

                                  آموزش Bootstrap -عکس و تصویر در Bootstrap 4

                                  پیمان کلانتری سه شنبه ۰۳ دی ۹۸ | ۱۱:۵۹ ۱۰۶ بازديد

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

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

                                  • عکس با گوشه های گرد
                                  • عکس کاملا گرد
                                  • عکس با حالت نمایش کوچک thumbnail

                                   

                                   

                                  آموزش ایجاد تصویر با گوشه های گرد در Bootstrap 4 :

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

                                  انواع نمایش عکس در بوت استرپ 4

                                   


                                  آموزش نمایش عکس به صورت گرد در Bootstrap 4:

                                  کلاس rounded-circle در Bootstrap 4 باعث می شود تا عکس در تصویر (تگ  ) به صورت تمام گرد و دایره نمایش داده شود. همانند کد مثال عملی زیر:

                                  مثال حالت Circle

                                   

                                  آموزش نمایش عکس به صورت بند انگشتی یا thumbnail:

                                  به کار بردن کلاس .img-thumbnail در تگ ، باعث می شود تا عکس به صورت پیش نمایش، کوچکتر و بند انگشتی همراه با خطوط حاشیه ای باریک نمایش داده شود. همانند کد مثال عملی زیر:

                                  مثال حالت Thumbnail

                                  Cinque Terre
                                   

                                  دوره آموزش BootStrap 4

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

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

                                  مثال تراز کردن عکس در بوت استرپ

                                  از طرف دیگر، با به کار بردن کلاس های .mx-auto (معادل حالت margin:auto) و کلاس .d-block معادل (خاصیت display : block) در Bootstrap 4، می توان یک عکس را در وسط صفحه یا عنصر مادر قرار داد، همانند کد مثال عملی زیر:

                                  مثال حالت Center

                                   

                                  عکس ها دارای سایزهای مختلفی هستند و صفحه نمایش ها هم عرض و طول های گوناگونی دارند. عکس های واکنش گرا یا Responsive Image به طور خودکار اندازه خود را برای بهترین حالت نمایش در صفحه، بزرگ و کوچک کرده و تنظیم می کنند.
                                  با اضافه کردن کلاس .img-fluid در Bootstrap به تگ ، یک عکس را واکنش گرا می کنید. عکس هدف اندازه خود را بر حسب اندازه عنصر دربرگیرنده اش تنظیم کرده و نمایش می دهد.
                                  به کار بردن کلاس .img-fluid برای یک عکس، خواص max-width:100% و height:auto را به آن می دهد.
                                  در کد مثال عملی زیر، از کلاس .img-fluid برای Responsive کردن عکس استفاده کرده ایم. همانطور که در خروجی مشاهده می کنید، با بزرگ و کوچک کردن صفحه، عکس نیز تغییر کرده و بزرگ و کوچک می شود.

                                  مثال ریسپانسیو کردن عکس

                                  Chania
                                   

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

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

                                  نکته :

                                  درون یک jumbotron می توانید تقریبا هر تگ معتبر HTML ای قرار داده و از المنت های Bootstrap با کلاس مختلف نیز استفاده کنید.

                                  برای ایجاد یک jumbotron بایستی از تگ

                                  با کلاس .jumbotron استفاده نمایید، همانند کد مثال عملی زیر:

                                  مثال jumbotron


                                  Bootstrap Tutorial



                                  Bootstrap is the most popular HTML, CSS...



                                  Bootstrap Tutorial

                                   
                                   

                                  Bootstrap is the most popular HTML, CSS...

                                  آموزش ایجاد یک jumbotron تمام عرض در Bootstrap 4:

                                  اگر می خواهید jumbotron ایجاد شده، تمامی عرض صفحه یا عنصر مادر خود را اشغال کرده و در گوشه های آن گرد نباشد، بایستی از کلاس .jumbotron-fluid با یک عنصر داخلی (مثل تگ) با کلاس .container یا .container-fluid استفاده نمایید. همانند کد مثال عملی زیر:

                                  مثال jumbotron تمام عرض

                                   
                                   

                                  Bootstrap Tutorial

                                   

                                  Bootstrap is the most popular HTML, CSS...


                                  آموزش کار با کادر هشدار Alert Box در Bootstrap4:

                                  چهارچوب کاری بوت استرپ4، روش بسیار ساده ای برای ایجاد کادر هشدار یا Alert Box فراهم کرده است.
                                  کادر هشدار Alert توسط یک تگ

                                  با کلاس .alert ایجاد می شود و از کلاس های متنی کمکی می توانید برای تعیین رنگ نوشته و پس زمینه آن نیز استفاده کنید. این کلاس ها عبارتند از .alert-success، .alert-info، .alert-warning، .alert-danger، .alert-primary، .alert-secondary، .alert-light و .alert-dark که هر کدام مفهوم خاصی را به کاربر نشان می دهند.
                                  در مثال های عملی زیر، انواع کادرهای هشدار با رنگ های مختلف به همراه توضیح و کاربرد هر کدام را نشان داده ایم:

                                   

                                   

                                  موفقیت Success : کادر هشدار بیان گر عمل مثبت یا انجام موفقیت آمیز عملیات است.

                                  اطلاع Info : کادر هشدار نشان دهنده یک عمل عادی یا اطلاعات کم اهمیت تر است.

                                  اخطار Warning : کادر هشدار اعلام می کند یک اتفاق به ظاهر خطرناک افتاده و نیازمند توجه کاربر است.

                                  خطر Danger : این کادر بیان گر عمل منفی یا انجام یک عملیات خطرناک است.

                                  مهم Primary : کادر هشدار نشان دهنده یک عمل مهم و قابل توجه است.

                                  رده 2 secondary : در این حالت کادر هشدار اعلام می کند یک عمل با درجه اهمیت کمتر رخ داده است.

                                  تیره Dark : یک کادر هشدار با پس زمینه خاکستری یا تیره نشان داده می شود.

                                  مثال عملی: در کد زیر، یک کادر هشدار را با کلاس های .alert و .alert-success ایجاد کرده و خروجی آن را نشان داده ایم:

                                  مثال 1

                                  Success! You should read this message.
                                   
                                  Success! You should read this message.

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

                                  می توانید درون کادر هشداری که در Bootstrap 4 ایجاد کرده ایم، یک تگ لینک یا با کلاس .alert-link قرار دهید. برنامه لینک را به صورت توپر و با رنگی مشابه رنگ نوشته کادر هشدار نشان می دهد.
                                  در مثال های زیر، انواع حالت لینک در کادرهای هشدار را نشان داده ایم:

                                   

                                   

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

                                  مثال 2

                                   
                                  ×Success! Indicates a successful or positive action.

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

                                  برای این که کادر هشدار ایجاد شده، قابلیت بسته شدن داشته باشد، بایستی کلاس .alert-dismissible را به تگ Alert Box اضافه کنید.
                                  سپس یک لینک یا دکمه (Button) که می خواهید با کلیک بر روی آن، کادر هشدار بسته شده را با کلاس class=”close” و خاصیت data-dismiss=”alert” درون عنصر اصلی کادر هشدار قرار می دهید، همانند کد مثال عملی زیر:

                                  مثال 3

                                  div class="alert alert-success alert-dismissible">
                                    
                                    Success! Indicates a successful or positive action.
                                   
                                   
                                  1Success! Indicates a successful or positive action.
                                   

                                  موجودیت × یا (x) یک HTML Entity یا خاصیت ذاتی HTML است که بیشتر به جای حرف X برای ایجاد یک آیکون یا دکمه بستن، از آن استفاده می شود.

                                  اضافه کردن جلوه های نمایشی به کادر هشدار در Bootstrap 4:

                                  با اضافه کردن کلاس های .fade و .show کادر هشدار با جلوه نمایشی و به صورت محو شدن یا ظاهر شدن تدریجی، نمایش داده می شود. نحوه استفاده از این دو کلاس و خروجی آن در مثال زیر نشان داده شده است:

                                  مثال 4

                                   

                                  برای دریافت اطلاعات بیشتر راجع به کادرهای هشدار در بوت استرپ 4 ، به مرجع آموزش کادر هشدار Alert Box در Bootstrap 4 بروید.

                                   

                                   

                                  آموزش bootstrap 4 ادامه دارد



                                  برچسب ها: دوره آموزش BootStrap 4, آموزش bootstrap 4, آموزش بوت استرپ, کتاب آموزش بوت استرپ, آموزش طراحی سایت, فیلم آموزش bootstrap 4, دانلود آموزش bootstrap 4, کتاب آموزش bootstrap 4,

                                  آموزش bootstrap 4 -آموزش کار با جدول

                                  پیمان کلانتری دوشنبه ۰۲ دی ۹۸ | ۱۶:۲۷ ۱۱۰ بازديد
                                  آموزش کار با جدول
                                   
                                   
                                   
                                  سلام با آموزش BootStrap 4 قسمت چهارم در خدمت شما هستیم .در قسمت قبل با آموزش رنگ در بوت استرپ آشنا شدیم.
                                  آموزش کار با جدول (Table) در Bootstrap4:
                                  آموزش ساخت جدول ساده در Bootstrap4:
                                  یک جدول ساده در Bootstrap 4 دارای حاشیه درونی کم و جداکننده های افقی است. کلاس .table، استایل ساده ای همانند خروجی زیر را به جدول ها می دهد :
                                  مثال آموزش ساخت جدول ساده:

                                  Basic Table

                                   

                                  The .table class adds basic styling (light padding and horizontal dividers) to a table:

                                   
                                  Firstname Lastname Email
                                  John Doe john@example.com
                                  Mary Moe mary@example.com
                                  July Dooley july@example.com
                                  آموزش ساخت ردیف های راه راه در جدول Bootstrap 4 :
                                  دوره آموزش BootStrap 4
                                  با اضافه کردن کلاس .table-striped به جدول در Bootstrap 4 ، ردیف های جدول به صورت یک در میان رنگی و سفید (راه راه) می شود. در کد مثال عملی زیر، نحوه استفاده از کلاس .table-striped به صورت عملی نشان داده شده است :
                                  مثال جدول Striped در بوت استرپ

                                  Striped Rows

                                   

                                  The .table-striped class adds zebra-stripes to a table:

                                   
                                  Firstname Lastname Email
                                  John Doe john@example.com
                                  Mary Moe mary@example.com
                                  July Dooley july@example.com
                                  آموزش ساخت جدول با خطوط حاشیه در Bootstrap 4 :
                                  با اضافه کردن کلاس .table-bordered به جدول، خطوط حاشیه به دور کل جدول اضافه می شود. در مثال زیر، نحوه استفاده از این کلاس در عمل نشان داده شده است:
                                  مثال جدول با خطوط حاشیه در بوت استرپ

                                  Bordered Table

                                  The .table-bordered class adds borders on all sides of the table and the cells:

                                  Firstname Lastname Email
                                  John Doe john@example.com
                                  Mary Moe mary@example.com
                                  July Dooley july@example.com
                                  آموزش ساخت ردیف های hover در جدول:
                                  دوره آموزش BootStrap 4
                                  در صورت استفاده از کلاس .table-hover در یک جدول Bootstrap 4 ، در صورت عبور موس (hover) از روی هر ردیف جدول، رنگ پس زمینه آن به خاکستری تغییر می کند، هماننند کد مثال عملی زیر :
                                  مثال جدول hover در بوت استرپ

                                  Hover Rows

                                   

                                  The .table-hover class enables a hover state (grey background on mouse over) on table rows:

                                   
                                  Firstname Lastname Email
                                  John Doe john@example.com
                                  Mary Moe mary@example.com
                                  July Dooley july@example.com
                                  آموزش ساخت جدول سیاه و تیره در Bootstrap 4 :
                                  با اضافه کردن کلاس .table-dark به جدول در Bootstrap 4، جدول با پس زمینه تیره، نوشته سفید و خطوط حاشیه روشن به صورت زیر نمایش داده خواهد شد :
                                  مثال جدول دو رنگ در بوت استرپ

                                  Black/Dark Table

                                  The .table-dark class adds a black background to the table:

                                  Firstname Lastname Email
                                  John Doe john@example.com
                                  Mary Moe mary@example.com
                                  July Dooley july@example.com
                                  آموزش ساخت جدول تیره و راه راه در Bootstrap 4:
                                  در صورت استفاده همزمان از کلاس های .table-darkو .table-striped، جدول با پس زمینه تیره، نوشته سفید و ردیف های یک در میان روشن تر و تیره تر، به صورت راه راه همانند کد زیر، نشان داده می شود :
                                  مثال جدول تیره و راه راه در بوت استرپ

                                  Dark Striped Table

                                   

                                  Combine .table-dark and .table-striped to create a dark, striped table:

                                   
                                  Firstname Lastname Email
                                  John Doe john@example.com
                                  Mary Moe mary@example.com
                                  July Dooley july@example.com
                                  آموزش ساخت جدول تیره با قابلیت hover:
                                  در صورت استفاده همزمان از کلاس های .table-hover و .table-dark جدول به صورت تیره نشان داده شده ولی در هنگام عبور موس از روی هر ردیف، رنگ ردیف کلی روشن تر می شود. همانند کد مثال عملی زیر:
                                  مثال جدول تیره hover در bootstrap


                                  Hoverable Dark Table


                                  The .table-hover class adds a hover effect (grey background color) on table rows:



























                                  Firstname Lastname Email
                                  John Doe john@example.com
                                  Mary Moe mary@example.com
                                  July Dooley july@example.com

                                  آموزش ساخت جدول بدون خطوط در Bootstrap 4 :
                                  اضافه کردن کلاس .table-bordeless، باعث از بین رفتن خطوط درونی و خطوط حاشیه در جدول شده و به صورت ساده نشان داده خواهد شد. همانند کد مثال عملی زیر:
                                  مثال جدول بدون خطوط حاشیه در بوت استرپ

                                  Borderless Table

                                  The .table-borderless class removes borders from the table:

                                  Firstname Lastname Email
                                  John Doe john@example.com
                                  Mary Moe mary@example.com
                                  July Dooley july@example.com
                                  آموزش بوت استرپ ادامه دارد
                                  برچسب ها: دوره آموزش BootStrap 4, آموزش bootstrap 4, آموزش بوت استرپ, کتاب آموزش بوت استرپ, فیلم آموزش بوت استرپ, آموزش طراحی سایت, فیلم آموزش bootstrap 4,

                                  دوره آموزش BootStrap 4:آموزش رنگ

                                  پیمان کلانتری دوشنبه ۰۲ دی ۹۸ | ۱۳:۴۰ ۹۶ بازديد

                                   

                                   

                                  سلام با آموزش BootStrap 4 قسمت سوم در خدمت شما هستیم .در قسمت قبل با آموزش مقدماتی سیستم گرید بندی (Grid System) و آموزش کار با متن (Text) و فن چاپ در بوت استرپ آشنا شدیم.

                                  آموزش کار با رنگ در Bootstrap4:

                                  چهارچوب کاری بوت استرپ 4 دارای تعدادی کلاس متنی است که با توجه به نام آن ها، رنگ های مفهومی و مرتبط به نوشته و سایر عناصر در صفحه می دهند.
                                  برای مثال کلاس text-success داریم که به معنای متن موفق است و رنگ آن سبز است که به علامت و مفهوم موفقیت اشاره دارد.
                                  کلاس های مختلف برای رنگ متن ها در Bootstrap 4 عبارتند از : .text-muted، .text-primary، .text-success، .text-info، .text-warning، .text-danger، .text-secondary، .text-while، .text-dark، .text-light و در نهایت کلاس .text-body ( که رنگ پیش فرض body صفحه خواهد شد که غالبا مشکی است) .
                                  در کد مثال عملی زیر، نحوه استفاده از این کلاس ها برای تعیین رنگ نوشته در بوت استرپ 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 را در لینک ها نیز می توانید به کار ببرید. این کلاس ها معمولا رنگ تیره تری را در هنگام عبور موس از روی نوشته به آن ها می دهند.
                                  در کد مثال زیر، نحوه استفاده عملی از کلاس های متنی رنگ درBootstrap 4 برای لینک ها و خروجی آن ها را نشان داده ایم :

                                  مثال 2

                                   

                                  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.

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

                                  مثال 3

                                  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 Color) در بوت استرپ 4:

                                  دوره آموزش BootStrap 4

                                   

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

                                  نکته :

                                  راهنمایی: توجه داشته باشید که کلاس های رنگ پس زمینه درBootstrap 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.

                                   

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

                                  برچسب ها: دوره آموزش BootStrap 4, آموزش bootstrap 4, آموزش بوت استرپ, کتاب آموزش بوت استرپ, فیلم آموزش بوت استرپ, آموزش طراحی سایت,

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

                                  پیمان کلانتری دوشنبه ۰۶ آبان ۹۸ | ۱۴:۰۳ ۱۰۲ بازديد

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

                                  آموزش Bootstrap 4
                                  آموزش Bootstrap 4

                                   

                                  سلام با بخش دوم آموزش Bootstrap 4 همراه ما باشید . در بخش اول با مفهوم Bootstrap آشنا شدیم و فرق Bootstrap 4 و Bootstrap 3 را متوجه شدیم و در بخش اول چند مثال را دیدیم و به جواب سوال (چرا بایستی از Bootstrap استفاده کنیم؟ ) رسیدیم .در ادامه :

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

                                  آموزش سیستم گرید بندی (Grid System) در Bootstrap 4:

                                  سیستم گرید بندی Bootstrap Bootstrap 4 مبتنی بر Flexbox ساخته شده و به شما امکان می دهد تا 12 ستون (Column) را در هر سطر (Row) داشته باشید.
                                  اگر نمی خواهید در هر سطر (Row) از هر 12 ستون (Column) استفاده نمایید می توانید آن ها را 2 یا چندتایی با هم یک گروه کرده و ستون هایی عریض تر ایجاد نمایید.
                                  شکل زیر، ایده کلی سیستم گریدبندی در Bootstrap 4 را نشان می دهد. همانطور که مشاهده می کنید می توانید ستون هایی با عرض 1 از 12 واحد یا 2، 3 و ... از 12 واحد را ایجاد نمایید:

                                  آموزش سیستم گرید بندی (Grid System) در Bootstrap 4:
                                  آموزش سیستم گرید بندی (Grid System) در Bootstrap 4:

                                   

                                  سیستم گریدبندی Bootstrap کاملا واکنش گرا یا Responsive است و ستون ها در هنگام تغییر عرض صفحه، به صورت خودکار، تنظیم شده و بهترین حالت نمایش را نشان می دهند.
                                  فقط بایستی توجه داشته باشید حداکثر تعداد ستون ها در هر سطر از 12 واحد بیشتر نباشد (ولی می تواند از 12 کمتر بوده و نیازی نیست که از تمامی 12 ستون استفاده کنید).

                                  آموزش کلاس های گرید (Grid Class) در سیستم گریدبندی Bootstrap 4:

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

                                  سیستم گریدبندی بوت استرپ (Bootstrap 4 Grid System) دارای کلاس مختلف برای ستون ها به شرح زیر است :

                                  • کلاس col. : مخصوص دستگاه بسیار کوچک (extra Small devices) که عرض صفحه نمایش آن ها معادل 575 پیکسل یا کمتر است.
                                  • کلاس .col-sm-: مخصوص دستگاه هایی با صفحه نمایش کوچک (small devices) که عرض صفحه نمایش آن ها 576 پیکسل یا بیشتر است.
                                  • کلاس .col-md-: مخصوص دستگاه هایی با صفحه نمایش متوسط (medium devices) که عرض صفحه نمایش آن ها 768 پیکسل یا بیشتر باشد.
                                  • کلاس .col-lg-: مخصوص دستگاه هایی با صفحه نمایش بزرگ (large devices) که عرض صفحه نمایش آن ها 992 پیکسل یا بیشتر باشد.
                                  • کلاس .col-xl: مخصوص دستگاه هایی با صفحه نمایش بسیار بزرگ (xlarge devices) که عرض صفحه نمایش آن ها از 1200 پیکسل بیشتر است.

                                  نکته :

                                  کلاس های فوق را می توانید به صورت ترکیبی و همزمان نیز در یک عنصر به کار برده و صفحاتی کاملا واکنش گرا (Responsive) و انعطاف پذیر (flexible) ایجاد نمایید.

                                  تذکر

                                  تأثیر کلاس های فوق و اولویت اهمیت آن ها در اجرا، از اندازه کوچک به بالا است. یعنی قاعده کلاس های کوچکتر به کلاس های بزرگ تر اولویت داشته و تعمیم داده می شود.

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

                                  آشنایی با ساختار پایه سیستم گریدبندی Bootstrap 4:

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

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

                                  class="row">

                                  class="col-*-*">

                                  class="col-*-*">

                                  class="row">

                                  class="col-*-*">

                                  class="col-*-*">

                                  class="col-*-*">

                                  class="row">

                                  class="col">

                                  class="col">

                                  class="col">

                                  توضیح مثال اول : ابتدا یک سطر (کد div class=”row”) ایجاد نمایید. سپس به تعداد دلخواه و مورد نظرتان ستون (Column) را با کلاس .col-*-* در هر سطر اضافه نمایید. * اول در کلاس فوق، تعیین کننده صفحه نمایش هدف برای عرض ستون است (مقادیر sm، md، lg یا xl). در حالی که * دوم یک عدد بیانگر اندازه ستون از 12 واحد کل در هر سطر است (مثلا 4 از 12).

                                  توضیح مثال 2: همانند مثال قبل یک سطر (row) مادر ایجاد می کنید. این بار به جای تعیین عدد برای هر .col اجازه دهید Bootstrap قالب سایت را مدیریت کرده و ستون های میانی ایجاد نماید.
                                  برای مثال اگر 2 ستون با کلاس .col تعیین کنید، عرض هرکدام، 50درصد خواهد بود. برای 3 ستون عرض هر ستون 32% و در حالت 4 ستون 25% می شود. همچنین می توانید از مقادیر sm، md، lg یا xl نیز استفاده کرده تا نحوه نمایش را در هر اندازه صفحه نمایش، دقیق کنترل نمایید.

                                  در ادامه چند مثال عملی با سورس کد را ارائه کرده ایم تا سناریوهای مختلف قالب بندی گرید ها در Bootstrap 4 را در عمل نشان دهیم.

                                  آموزش ایجاد 3 ستون مساوی در Bootstrap 4:

                                  در کد مثال عملی زیر، 3 ستون با کلاس col در سطر تعریف کرده ایم که همواره هر ستون 33% عرض را در هر صفحه نمایش و دستگاهی خواهند داشت.

                                  مثال 1

                                  class="row">

                                  class="col">.col

                                  class="col">.col

                                  class="col">.col

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

                                  در کد مثال زیر، 4 ستون با عرض مساوی 3 واحد از 12 واحد تعریف کرده ایم که دارای کلاس sm است. ستون ها در تمامی صفحات از موبایل تا کامپیوترهای بزرگ، همواره 25% عرض سطر را اشغال خواهند کرد.
                                  نکته مهم : در دستگاه هایی با عرض صفحه نمایش کمتر از 576 پیکسل، ستون ها به صورت اتوماتیک بر روی هم قرار گرفته و هر ستون، عرض کل صفحه را اشغال می کند :

                                  مثال 2

                                  class="row">

                                  class="col-sm-3">.col-sm-3

                                  class="col-sm-3">.col-sm-3

                                  class="col-sm-3">.col-sm-3

                                  class="col-sm-3">.col-sm-3

                                  آموزش ایجاد 2 ستون غیر هم اندازه Responsive در Bootstrap 4:

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

                                   

                                  در کد مثال عملی زیر، دو ستون غیر هم اندازه (یکی 4 واحد از 12 و یکی 8 واحد از 12 واحد ستون) ایجاد کرده ایم.
                                  با تعیین پارامتر sm، مشخص کرده ایم اولویت اجرای گرید در موبایل های کوچک است و به طور خودکار به تمامی دستگاه ها با عرض بیشتر نیز انتقال می یابد.

                                  مثال 3

                                  class="row">

                                  class="col-sm-4">.col-sm-4

                                  class="col-sm-8">.col-sm-8

                                  در بخش آموزش کامل سیستم گرید بندی Bootstrap 4، به توضیح جامع Grid System خواهیم پرداخت.

                                  برچسب ها: آموزش Bootstrap 4, آموزش طراحی سایت, آموزش بوت استرپ, آموزش طراحی وب, آموزش Bootstrap,

                                  پربحث ترين مطالب

                                  آخرين نظرات

                                  درباره من

                                  آموزشگاه تحلیل داده ارایه دهنده به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی است که در این زمینه بی رقیب است
                                  یکشنبه ۲۳ اردیبهشت ۰۳

                                  موضوعات

                                  نويسندگان

                                  آرشيو

                                  برچسب ها

                                  خلاصه آمار

                                  • مجموع نمایش‌ ۲۰,۴۲۱
                                  • مجموع بازدید ۱۳,۱۳۵
                                  • بازدید امروز ۳۶
                                  • بازدید دیروز ۳۸
                                  • مجموع مطالب ۹۴
                                  • مجموع نظرات ۲۱
                                  • افراد آنلاین ۱

                                  من در شبكه هاي اجتماعي

                                  پيوندها

                                  فارسي بلاگ : رسـانه وبلاگ نويسان حرفـه اي