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

سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل صفحه بندی Pagination و ایجاد چرخنده Sppiner در Bootstrap4 آشنا شدیم.

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

آموزش کار با لیست گروهی List Group در بوت استرپ 4

ساده ترین نوع لیست گروهی یک لیست بدون نشانه و ترتیب (Unordered list) با یک یا چندین آیتم درون آن است، همانند عکس زیر:

برای ایجاد یک لیست گروهی ساده در بوت استرپ 4، از یک تگ

با کلاس list-group-item، تعیین خواهد شد، همانند کد مثال عملی زیر:

مثال

First item

Second item

Third item

آموزش فعال کردن یک آیتم در لیست Active Item:

اگر به یکی از آیتم های

درون یک لیست بوت استرپ 4، کلاس .active بدهید، آن آیتم به صورت فعال با پس زمینه رنگی (به صورت پیش فرض) و متمایز از بقیه نشان داده خواهد شد.

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

مثال2

Active item

Second item

Third item

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

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

به جای تگ

، درون آن آیتم های تعریف کنیم. همچنین در صورت تمایل می توانید برای اینکه در هنگام عبور موس کاربر از روی لینک ها، پس زمینه آن ها به صورت خاکستری داشته و حالت hover پیدا کنند، از کلاس .list-group-item-action در تگ های استفاده نمایید، همانند کد مثال عملی زیر:

آموزش ایجاد یک آیتم غیر فعال (Disabled) در لیست Bootstrap 4:

برای تعیین یک آیتم در لیست به صورت غیر فعال (Disabled) بایستی کلاس .disabled را به عنصر اضافه کنید. در این حالت، رنگ نوشته آیتم به صورت خاکستری و کم رنگ در می آید و غیر فعال خواهد بود. همچنین در لیست های لینکی، قابلیت hover آن ها نیز از بین می رود.

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

مثال 4

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 در لیست های لینک دار هم استفاده کنید، با این تفاوت که در لیست های لینک دار از تگ های

به جای

به جای تگ

برای تعریف هر آیتم استفاده می کنیم. کلاس رنگی را نیز بایستی به تگ اعمال کنید و با به کار بردن کلاس .list-group-item-action در لینک ها، خاصیت hover یا تیره شدن رنگ در هنگام عبور موس بر روی آیتم، بدان اضافه خواهد شد.

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

آموزش ایجاد لیست های گروهی نشان دار Badges List در Bootstrap 4:

می توانید با ترکیب کلاس badge و چند کلاس کمکی دیگر در بوت استرپ 4، لیست هایی دارای نشانه های عمودی یا متنی (Badge List) ایجاد نمایید، همانند عکس زیر:

مثال: در کد مثال عملی زیر یک لیست نشان دار یا Badge List ایجاد کرده ایم. روال کار همانند یک لیست ساده بوت استرپ 4 است. با این تفاوت که برای اضافه کردن Badge یک تگ مثل با کلاس .badge و یکسری کلاس کمکی دیگر، درون هر آیتم لیست قرار داده ایم:

مثال 9

Inbox

Ads

Junk

نکته :

می توانید اعداد درون 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

آموزش صفحه بندی Pagination در Bootstrap 4:

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

برای ایجاد یک صفحه بندی Pagination ساده در صفحات وب سایت تان با ستتفاده از بوت استرپ 4، ابتدا یک تگ

درون لیست، کلاس .page-item داده و برای لینک ها هم (تگ یا دکمه)، کلاس .page-link تعیین کنید.

در کد مثال عملی زیر، نحوه ایجاد یک صفحه بندی Pagination کامل در Bootstrap 4 را نشان داده ایم:

مثال 1

دوره آموزش BootStrap 4

آموزش فعال کردن شماره صفحه جاری (Active State) در Pagination:

در صورت اعمال کلاس .active به یکی از آیتم های

لیست

در صفحه بندی Bootstrap 4، شماره آن صفحه (که صفحه جاری خواهد بود) به صورت رنگی و توپر نشان داده می شود :

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

مثال 2

آموزش غیر فعال کردن لینک یک صفحه در صفحه بندی Pagination:

در صورت اعمال کلاس .disabled به لینک یک صفحه در صفحه بندی Bootstrap 4، لینک آن صفحه به صورت غیر فعال نشان داده شده و کاربر نمی تواند بر رویش کلیک نماید :

مثال : در کد مثال زیر، با استفاده از کلاس .disabled، لینک صفحه قبل (Previous) را غیر فعال کرده ایم:

مثال 3

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

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

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

با اعمال کلاس .pagination-lg به تگ مادر صفحه بندی (

)، دکمه ها به صورت بزرگ تر و با کلاس .pagination-sm، دکمه های به صورت کوچکتر نشان داده خواهند شد :

مثال 4

Large:

Default:

Small:

آموزش تعیین جهت قرارگیری صفحه بندی Pagination Alignment:

به صورت پیش فرض در بوت استرپ 4، دکمه های صفحه بندی Pagination از سمت چپ تراز می شوند اما از کلاس های ویژه utility در Bootstrap 4 برای وسط چین یا راست چین کردن آن ها می توانید استفاده کنید :

مثال: در کد مثال عملی زیر، از کلاس ویژه کاربردی بوت استرپ 4 (utility Classess) استفاده کرده و جهت چینش در منوی صفحه بندی دوم و سوم را به دلخواه تغییر داده ایم :

مثال 5

...

راهنمایی :

در بخش آموزش کلاس های کاربردی بوت استرپ 4 به آموزش کار با Bootstrap Utility Class پرداخته شده است.

آموزش ایجاد صفحه بندی خطی Breadcrumb Pagination:

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

مثال : برای ایجاد یک منوی خطی Breadcrumb در بوت استرپ 4، بایستی کلاس .breadcrumb را به تگ

لیست

مثال 6

دوره آموزش بوت استرپ 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

دوره آموزش 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

دوره آموزش 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 کردن عکس استفاده کرده ایم. همانطور که در خروجی مشاهده می کنید، با بزرگ و کوچک کردن صفحه، عکس نیز تغییر کرده و بزرگ و کوچک می شود.

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

آموزش کار با 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 :

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

مثال حالت Circle

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

مثال حالت Thumbnail

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

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

مثال حالت Center

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

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

مثال jumbotronBootstrap Tutorial Bootstrap is the most popular HTML, CSS...

Bootstrap Tutorial

Bootstrap Tutorial

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

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

Bootstrap Tutorial

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

مثال 1

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

مثال 2

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

مثال 3

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

مثال 4

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

آخرين نظرات

درباره من

موضوعات

نويسندگان

آرشيو

برچسب ها

خلاصه آمار

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

پيوندها

مثال jumbotron

Bootstrap Tutorial

Bootstrap is the most popular HTML, CSS...