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

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

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

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

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

 

 

برای ایجاد یک لیست گروهی ساده در بوت استرپ 4، از یک تگ <ul> با کلاس list-group، استفاده می شود که هر آیتم درون آن با یک تگ <li> با کلاس list-group-item، تعیین خواهد شد، همانند کد مثال عملی زیر:

مثال

1

<ul class="list-group">

<li class="list-group-item">First item</li>

<li class="list-group-item">Second item</li>

<li class="list-group-item">Third item</li>

</ul>

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

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

 

 

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

مثال2

<ul class="list-group">

<li class="list-group-item active">Active item</li>

<li class="list-group-item">Second item</li>

<li class="list-group-item">Third item</li>

</ul>

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

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

مثال 3

<div class="list-group">

<a href="#" class="list-group-item list-group-item-action">First item</a>

<a href="#" class="list-group-item list-group-item-action">Second item</a>

<a href="#" class="list-group-item list-group-item-action">Third item</a>

</div>

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

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

 

 

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

مثال 4

<div class="list-group">

<a href="#" class="list-group-item disabled">Disabled item</a>

<a href="#" class="list-group-item disabled">Disabled item</a>

<a href="#" class="list-group-item">Third item</a>

</div>

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

در صورت استفاده از کلاس .list-group-flush در عنصر مادر لیست تگ <ul>، خطوط حاشیه یا Border دور لیست حذف شده و دیگر نوشته های آن گرد نیز نخواهد بود، همانند کد عملی مثال زیر :

 

مثال 5

<ul class="list-group list-group-flush">

<li class="list-group-item">First item</li>

<li class="list-group-item">Second item</li>

<li class="list-group-item">Third item</li>

<li class="list-group-item">Fourth item</li>

</ul>

آموزش ایجاد لیست افقی Horizontal List در بوت استرپ 4:

دوره آموزش BootStrap 4

 

اگر می خواهید آیتم های لیست در بوت استرپ 4، به صورت افقی یا Horizontal به جای عمودی Vertical (در کنار هم به جای قرار گرفتن بر روی هم) نمایش داده شوند، کلاس .list-group-horizontal را به عنصر مادر لیست (تگ <ul> یا <div> با کلاس list-group)، اضافه نمایید، همانند کد مثال عملی زیر:

 

مثال 6

<ul class="list-group list-group-horizontal">

<li class="list-group-item">First item</li>

<li class="list-group-item">Second item</li>

<li class="list-group-item">Third item</li>

<li class="list-group-item">Fourth item</li>

</ul>

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

<ul class="list-group">

<li class="list-group-item list-group-item-success">Success item</li>

<li class="list-group-item list-group-item-secondary">Secondary item</li>

<li class="list-group-item list-group-item-info">Info item</li>

<li class="list-group-item list-group-item-warning">Warning item</li>

<li class="list-group-item list-group-item-danger">Danger item</li>

<li class="list-group-item list-group-item-primary">Primary item</li>

<li class="list-group-item list-group-item-dark">Dark item</li>

<li class="list-group-item list-group-item-light">Light item</li>

</ul>

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

همانند مثال بخش های قبلی، می توانید از کلاس های رنگی ویژه بوت استرپ 4 در لیست های لینک دار هم استفاده کنید، با این تفاوت که در لیست های لینک دار از تگ های <div> به جای <ul> در عنصر مادر لیست و تگ <a> به جای تگ <li> برای تعریف هر آیتم استفاده می کنیم. کلاس رنگی را نیز بایستی به تگ <a> اعمال کنید و با به کار بردن کلاس .list-group-item-action در لینک ها، خاصیت hover یا تیره شدن رنگ در هنگام عبور موس بر روی آیتم، بدان اضافه خواهد شد.

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

<div class="list-group">

<a href="#" class="list-group-item list-group-item-action">Action item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>

</div>

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

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

 

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

مثال 9

<ul class="list-group">

<li class="list-group-item d-flex justify-content-between align-items-center">

Inbox

<span class="badge badge-primary badge-pill">12</span>

</li>

<li class="list-group-item d-flex justify-content-between align-items-center">

Ads

<span class="badge badge-primary badge-pill">50</span>

</li>

<li class="list-group-item d-flex justify-content-between align-items-center">

Junk

<span class="badge badge-primary badge-pill">99</span>

</li>

</ul>

نکته :

می توانید اعداد درون Badge را به صورت ایستاتیک تعریف کرده یا با استفاده از jQuery و Ajax آن را به صورت دینامیک نیز تغییر دهید.

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

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

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

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

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

برای ایجاد یک شکلک چرخنده (Sppiner) یا آیکون لود (loader) در بوت استرپ 4، از یک المنت با کلاس spinner-border، استفاده کنید.

مثال: در کد مثال زیر، به وسیله یک تگ <div> با کلاس .spinner-boarder، یک چرخنده در حال لود ایجاد کرده ایم:

دوره آموزش BootStrap 4

 

مثال 1

<div class="spinner-border"></div>

نکته :

رنگ پیش فرض چرخنده (Spiner) در بوت استرپ 4، مشکی (Black) است.

آموزش ساخت چرخنده Spiner رنگی در بوت استرپ 4:

با استفاده از کلاس های رنگی متنی ویژه بوت استرپ 4 (سری- text)، همانند کد مثال عملی زیر، می توانید چرخنده Spiner با رنگ های مختلف و مفهومی ایجاد کنید :

<div class="spinner-border text-muted"></div>

<div class="spinner-border text-primary"></div>

<div class="spinner-border text-success"></div>

<div class="spinner-border text-info"></div>

<div class="spinner-border text-warning"></div>

<div class="spinner-border text-danger"></div>

<div class="spinner-border text-secondary"></div>

<div class="spinner-border text-dark"></div>

<div class="spinner-border text-light"></div>

آموزش ساخت چرخنده های بزرگ شونده Growing Spinner:

اگر از کلاس .spinner-grow به جای .spinner-border استفاده کنید، چرخنده یا Spiner ایجاد شده، به جای چرخیدن، از سایز کوچک شروع شده و بزرگ می شود. در کد مثال عملی زیر، نحوه استفاده از این کلاس و خروجی آن را نشان داده ایم:

مثال 3

<div class="spinner-grow text-muted"></div>

<div class="spinner-grow text-primary"></div>

<div class="spinner-grow text-success"></div>

<div class="spinner-grow text-info"></div>

<div class="spinner-grow text-warning"></div>

<div class="spinner-grow text-danger"></div>

<div class="spinner-grow text-secondary"></div>

<div class="spinner-grow text-dark"></div>

<div class="spinner-grow text-light"></div>

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

می توانید یک المنت با کلاس .spinner-border یا .spinner-grow را درون یک دکمه یا button قرار داده و آن را به یک دکمه لود تبدیل کنید. در این حالت می توانید برای دکمه متن نیز تعیین کرده یا خالی بگذارید.

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

مثال 5

<button class="btn btn-primary">

<span class="spinner-border spinner-border-sm"></span>

</button>

<button class="btn btn-primary">

<span class="spinner-border spinner-border-sm"></span>

Loading..

</button>

<button class="btn btn-primary" disabled="">

<span class="spinner-border spinner-border-sm"></span>

Loading..

</button>

<button class="btn btn-primary" disabled="">

<span class="spinner-grow spinner-grow-sm"></span>

Loading..

</button>

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

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

 

برای ایجاد یک صفحه بندی Pagination ساده در صفحات وب سایت تان با ستتفاده از بوت استرپ 4، ابتدا یک تگ <ul> با کلاس Pagination. ایجاد نمایید. سپس به هر یک از <li> درون لیست، کلاس .page-item داده و برای لینک ها هم (تگ <a> یا دکمه)، کلاس .page-link تعیین کنید.

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

مثال 1

<ul class="pagination">

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

<li class="page-item"><a class="page-link" href="#">1</a></li>

<li class="page-item"><a class="page-link" href="#">2</a></li>

<li class="page-item"><a class="page-link" href="#">3</a></li>

<li class="page-item"><a class="page-link" href="#">Next</a></li>

</ul>

دوره آموزش BootStrap 4

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

در صورت اعمال کلاس .active به یکی از آیتم های <li> لیست <ul> در صفحه بندی Bootstrap 4، شماره آن صفحه (که صفحه جاری خواهد بود) به صورت رنگی و توپر نشان داده می شود :

 

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

مثال 2

<ul class="pagination">

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

<li class="page-item"><a class="page-link" href="#">1</a></li>

<li class="page-item active"><a class="page-link" href="#">2</a></li>

<li class="page-item"><a class="page-link" href="#">3</a></li>

<li class="page-item"><a class="page-link" href="#">Next</a></li>

</ul>

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

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

 

 

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

مثال 3

<ul class="pagination">

<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>

<li class="page-item"><a class="page-link" href="#">1</a></li>

<li class="page-item"><a class="page-link" href="#">2</a></li>

<li class="page-item"><a class="page-link" href="#">3</a></li>

<li class="page-item"><a class="page-link" href="#">Next</a></li>

</ul>

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

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

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

 

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

مثال 4

<p>Large:</p>

<ul class="pagination pagination-lg">

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

<li class="page-item"><a class="page-link" href="#">1</a></li>

<li class="page-item"><a class="page-link" href="#">2</a></li>

<li class="page-item"><a class="page-link" href="#">3</a></li>

<li class="page-item"><a class="page-link" href="#">Next</a></li>

</ul>

<p>Default:</p>

<ul class="pagination">

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

<li class="page-item"><a class="page-link" href="#">1</a></li>

<li class="page-item"><a class="page-link" href="#">2</a></li>

<li class="page-item"><a class="page-link" href="#">3</a></li>

<li class="page-item"><a class="page-link" href="#">Next</a></li>

</ul>

<p>Small:</p>

<ul class="pagination pagination-sm">

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

<li class="page-item"><a class="page-link" href="#">1</a></li>

<li class="page-item"><a class="page-link" href="#">2</a></li>

<li class="page-item"><a class="page-link" href="#">3</a></li>

<li class="page-item"><a class="page-link" href="#">Next</a></li>

</ul>

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

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

 

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

مثال 5

<!-- Default (left-aligned) -->

<ul class="pagination" style="margin:20px 0">

<li class="page-item">...</li>

</ul>

<!-- Center-aligned -->

<ul class="pagination justify-content-center" style="margin:20px 0">

<li class="page-item">...</li>

</ul>

<!-- Right-aligned -->

<ul class="pagination justify-content-end" style="margin:20px 0">

<li class="page-item">...</li>

</ul>

راهنمایی :

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

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

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

 

مثال : برای ایجاد یک منوی خطی Breadcrumb در بوت استرپ 4، بایستی کلاس .breadcrumb را به تگ <ul> بدهید، پس برای هریک از آیتم های <li> لیست <ul>، کلاس .breadcrumb-item را تعیین کنید :

مثال 6

<ul class="breadcrumb">

<li class="breadcrumb-item"><a href="#">Photos</a></li>

<li class="breadcrumb-item"><a href="#">Summer 2017</a></li>

<li class="breadcrumb-item"><a href="#">Italy</a></li>

<li class="breadcrumb-item active">Rome</li>

</ul>

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

<div class="progress">

<div class="progress-bar" style="width:70%"></div>

</div>

آموزش تنظیم ارتفاع Progress Bar در Bootstrap 4:

 

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

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

مثال 2

<div class="progress" style="height:20px">

<div class="progress-bar" style="width:40%;height:20px"> </div>

</div>

آموزش نمایش متن در Progress Bar بوت استرپ 4 :

 

می توانید با قرار دادن متن درون عنصر فرزند آیتم نوار پیشرفت در Bootstrap 4 میزان پیشرفت کار را به صورت متنی نیز نشان دهید.

دقت نمایید که این متن را می توانید با استفاده از جاوا اسکریپت یا jQuery به صورت داینامیک نیز تغییر دهید.

مثال: در کد مثال عملی زیر، با قرار دادن عدد 70% درون تگ <div> عنصر فرزند نوار پیشرفت، میزان حجم جلورفت کار را به صورت متنی نیز نشان داده ایم:

مثال 3

 

<div class="progress">

<div class="progress-bar" style="width:70%">70%</div>

</div>

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

 

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

مثال: در کد مثال عملی زیر، با استفاده از کلاس های متنی رنگی Bootstrap 4 رنگ پس زمینه (برای مثال .bg-success برای رنگ سبز)، نوار پیمایش ها را تغییر داده ایم:

مثال 4

 

<!-- Blue -->

<div class="progress">

<div class="progress-bar" style="width:10%"></div>

</div>

<!-- Green -->

<div class="progress">

<div class="progress-bar bg-success" style="width:20%"></div>

</div>

<!-- Turquoise -->

<div class="progress">

<div class="progress-bar bg-info" style="width:30%"></div>

</div>

<!-- Orange -->

<div class="progress">

<div class="progress-bar bg-warning" style="width:40%"></div>

</div>

<!-- Red -->

<div class="progress">

<div class="progress-bar bg-danger" style="width:50%"></div>

</div>

<!-- White -->

<div class="progress border">

<div class="progress-bar bg-white" style="width:60%"></div>

</div>

<!-- Grey -->

<div class="progress">

<div class="progress-bar bg-secondary" style="width:70%"></div>

</div>

<!-- Light Grey -->

<div class="progress border">

<div class="progress-bar bg-light" style="width:80%"></div>

</div>

<!-- Dark Grey -->

<div class="progress">

<div class="progress-bar bg-dark" style="width:90%"></div>

</div>

ایجاد نوار پیشرفت راه راه Striped Progress Bar در بوت استرپ 4 :

 

از کلاس ویژه .progress-bar-striped می توانید جهت راه راه کردن بخش رنگی نوار پیشرفت در Bootstrap 4 استفاده کنید:

مثال 5

 

<div class="progress">

<div class="progress-bar progress-bar-striped" style="width:40%"></div>

</div>

نکته :

کلاس .progress-bar-striped بایستی به عنصر یا عناصر فرزند نوار پیشرفت بوت استرپ 4 ، اضافه شوند نه عنصر مادر یا Container.

آموزش bootstrap 4

 

آموزش ایجاد نوار پیشرفت متحرک Animated Progress Bar:

در صورت اضافه کردن کلاس .progress-bar-animated به عنصر سازنده نوار پیشرفت و استفاده همزمان از کلاس .progress-bar-strped، خط های راه راه قسمت پر شده در نوار پیشرفت، حالت متحرک و پویا پیدا می کنند. برای درک بهتر مثال عملی زیر را مشاهده کنید :

مثال 6

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>

آموزش ایجاد نوار پیمایش چندگانه Multiple Progress Bar:

می توانید با قرار دادن چندین المنت با کلاس .progress-bar درون یک المنت مادر با کلاس .progress که هر کدام از عناصر فرزند درصدی بین 0 تا 100 دارند، یک نوار پیمایش چندگانه و با رنگ های مختلف (با استفاده از کلاس های رنگی متنی ویژه Bootstrap 4)، همانند عکس زیر ایجاد نمایید :

 

<div class="progress">

<div class="progress-bar bg-success" style="width:40%">

Free Space

</div>

<div class="progress-bar bg-warning" style="width:10%">

Warning

</div>

<div class="progress-bar bg-danger" style="width:20%">

Danger

</div>

</div>

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

آموزش Bootstrap-گروه بندی دکمه ها در Bootstrap 4

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

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

آموزش گروه بندی دکمه ها Button در Bootstrap 4:

چهارچوب کاری بوت استرپ 4، این امکان را فراهم کرده تا چندین کنترل را با هم در یک گروه قرار داده و مثلا آن ها را در یک خط کنار هم نشان دهید. همانند شکل زیر:

برای گروه بندی دکمه ها در Bootstrap 4، از یک تگ <div> با کلاس .btn-group استفاده کرده و Button ها را درون آن قرار می دهید، همانند کد مثال عملی زیر:

مثال 1

<div class="btn-group">

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

<button type="button" class="btn btn-primary">Sony</button>

</div>

نکته :

به جای تعیین کلاس سایز در هر دکمه گروه، کافی است برای بزرگ بودن دکمه ها کلاس .btn-group-lg و برای کوچک بودن آن ها، کلاس .btn-group-sm را به تگ <div> یا عنصر دربرگیرنده دکمه ها، اضافه کنید. در شکل زیر سایز انواع دکمه های بوت استرپ 4 را نشان داده ایم:

آموزش bootstrap

مثال عملی: در کد مثال عملی زیر، 3 دکمه (Button) را با استفاده از کلاس btn-group-lg تگ <div>، در سایز بزرگ دسته بندی کرده ایم:

مثال 2

<div class="btn-group btn-group-lg">

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

<button type="button" class="btn btn-primary">Sony</button>

</div>

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

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

برای این منظور، بایستی مثل کد مثال عملی زیر، دکمه ها را درون یک تگ <div> با کلاس .btn-group-vertical قرار دهید :

مثال 3

<div class="btn-group-vertical">

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

<button type="button" class="btn btn-primary">Sony</button>

</div>

آموزش گروه بندی تو در تو (Nested) دکمه ها و ساخت منوی کشویی (DropDown) در بوت استرپ 4:

با گروه بندی تو در تو دکمه ها (Nested Buttons) در Bootstrap 4، می توانید منوهای کرکره ای یا DropDown ایجاد نمایید. در بخش های بعدی به آموزش کامل کار با DropDown در بوت استرپ خواهیم پرداخت.

مثال: در کد مثال عملی زیر، درون دکمه با عنوان Sony یک گروه دکمه قرار داده ایم که باعث شده تا این دکمه به صورت منوی کرکره ای در بیاید:

دوره آموزش BootStrap 4

مثال 4

<div class="btn-group">AppleSamsung

<div class="btn-group">Sony

<div class="dropdown-menu"><a class="dropdown-item" href="#">Tablet</a> <a class="dropdown-item" href="#">Smartphone</a></div>

</div>

</div>

با استفاده از یک تگ <span> با کلاس Caret می توانید بین عنوان منوی کرکره ای و فلش آن، کمی فاصله ایجاد کنید، همانند کد مثال و خروجی زیر:

<div class="btn-group">Sony

<div class="dropdown-menu"><a class="dropdown-item" href="#">Tablet</a> <a class="dropdown-item" href="#">Smartphone</a></div>

</div>

همچنین در صورت استفاده از کلاس .btn-group-vertical، می توانید منوی کرکره ای و سایر دکمه ها را به صورت عمودی نشان دهید، همانند کد مثال زیر:

مثال 6

<div class="btn-group-vertical">AppleSamsung

<div class="btn-group">Sony

<div class="dropdown-menu"><a class="dropdown-item" href="#">Tablet</a> <a class="dropdown-item" href="#">Smartphone</a></div>

</div>

</div>

قرار دادن دو گروه دکمه در کنار هم در Bootstrap 4:

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

مثال 7

<div class="btn-group">

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

<button type="button" class="btn btn-primary">Sony</button>

</div>

<div class="btn-group">

<button type="button" class="btn btn-primary">BMW</button>

<button type="button" class="btn btn-primary">Mercedes</button>

<button type="button" class="btn btn-primary">Volvo</button>

</div>

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

از امکان برجسته یا به انگلیسی Badges در بوت استرپ 4، می توان برای اضافه کردن اطلاعات بیشتر به یک محتوا استفاده کرد.

برای مثال می توانید از یک عنصر با کلاس .badges به همراه یک عنصر دیگر که دارای کلاس های رنگی متنی (مثلا کلاس .badges-secondary) است مثل یک المنت <span> برای ایجاد یک نشان مستطیل رنگی، استفاده کنید.

توجه داشته باشید که چنانچه عنصر badge درون یک عنصر مادر یا parent باشد، اندازه خود را بر حسب بزرگی یا کوچکی آن ، تنظیم می کند.

مثال عملی: در کد مثال عملی زیر، نحوه ایجاد یک عنصر badge را درون تگ های عنوان <h1> تا <h6> نشان داده ایم:

مثال 1

<h1>Example heading New</h1>

<h2>Example heading New</h2>

<h3>Example heading New</h3>

<h4>Example heading New</h4>

<h5>Example heading New</h5>

<h6>Example heading New</h6>

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

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

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

دوره آموزش BootStrap 4

مثال 2

<span class="badge badge-primary">Primary</span>

<span class="badge badge-secondary">Secondary</span>

<span class="badge badge-success">Success</span>

<span class="badge badge-danger">Danger</span>

<span class="badge badge-warning">Warning</span>

<span class="badge badge-info">Info</span>

<span class="badge badge-light">Light</span>

<span class="badge badge-dark">Dark</span>

آموزش ساخت نشانه های گرد (Pill Badges) در بوت استرپ 4 :

از کلاس .badges-pill می توانید برای گرد کردن گوشه های عنصر badge در Bootstrap 4 استفاده کنید.

مثال: در کد مثال عملی زیر، نحوه استفاده از کلاس .badge-pill و ساخت Pill Badge را نشان داده ایم :

<span class="badge badge-pill badge-primary">Primary</span>

<span class="badge badge-pill badge-secondary">Secondary</span>

<span class="badge badge-pill badge-success">Success</span>

<span class="badge badge-pill badge-danger">Danger</span>

<span class="badge badge-pill badge-warning">Warning</span>

<span class="badge badge-pill badge-info">Info</span>

<span class="badge badge-pill badge-light">Light</span>

<span class="badge badge-pill badge-dark">Dark</span>

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

در کد مثال عملی زیر، از یک عنصر Badge در یک دکمه استفاده کرده ایم:

مثال 4

<p>Messages 4</p>

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

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

سلام با

آموزش Bootstrap 4

در خدمت شما هستیم در قسمت قبل با کار با عکس و تصویر , jumbotron و کار با کادر هشدار Alert Box در Bootstrap4 آشنا شدیم.

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

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

 

مثال: در کد مثال عملی زیر، نحوه ایجاد انواع مختلف دکمه های (Button) بوت استرپ 4 به همراه خروجی آن را نشان داده ایم:

مثال:

<button type="button" class="btn">Basic</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-link">Link</button>

کلاس های ویژه دکمه (Button) در بوت استرپ را می توانید به تگ های لینک <a>، دکمه <button> و کادرهای ورودی <input> اعمال کنید. در کد مثال عملی زیر، نحوه انجام این کار در تگ های مختلف در خروجی آن، نشان داده شده است :

مثال 2

<a href="#" class="btn btn-info" role="button">Link Button</a>

<button type="button" class="btn btn-info">Button</button>

<input type="button" class="btn btn-info" value="Input Button">

<input type="submit" class="btn btn-info" value="Submit Button">

راهنمایی : چرا در خاصیت آدرس برخی لینک ها (href) مقدار # قرار می دهیم؟

چنانچه برای یک لینک آدرس مشخصی وجود ندارد و نمی خواهید کاربر با کلیک بر روی آن، خطای یافت نشدن صفحه (Error 404) را مشاهده نماید، می توانید یک کاراکتر # را در خاصیت آدرس یا href لینک قرار دهید. در مدل های طراحی حرفه ای تر، بهتر است اینگونه لینک ها را به صفحه جستو سایت، هدایت نمایید.

آموزش ایجاد دکمه های بی رنگ outline Button در Bootstrap 4:

دوره آموزش BootStrap 4

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

 

مثال: در کد مثال عملی زیر، نحوه ایجاد دکمه های بی رنگ (outline Button) در بوت استرپ را نشان داده ایم:

مثال 3

<button type="button" class="btn btn-outline-primary">Primary</button>

<button type="button" class="btn btn-outline-secondary">Secondary</button>

<button type="button" class="btn btn-outline-success">Success</button>

<button type="button" class="btn btn-outline-info">Info</button>

<button type="button" class="btn btn-outline-warning">Warning</button>

<button type="button" class="btn btn-outline-danger">Danger</button>

<button type="button" class="btn btn-outline-dark">Dark</button>

<button type="button" class="btn btn-outline-light text-dark">Light</button>

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

با استفاده از 3 کلاس .btn-lg(دکمه بزرگ)، .btn(اندازه عادی) و btn-sm(دکمه کوچک)، می توانید سایز دکمه ها در Bootstrap 4 را تعیین نمایید، همانند شکل زیر:

 

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

مثال 4

<button type="button" class="btn btn-primary btn-lg">Large</button>

<button type="button" class="btn btn-primary">Default</button>

<button type="button" class="btn btn-primary btn-sm">Small</button>

آموزش ایجاد دکمه تمام عرض در بوت استرپ:

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

 

<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>

آموزش ایجاد دکمه فعال/غیر فعال در بوت استرپ 4 :

در Bootstrap 4 می توانید یک دکمه را به حالت فعال (انگار که کلیک شده) و یا غیر فعال (غیر قابل کلیک کردن) در بیاورید، همانند دو دکمه زیر :

 

مثال 6

<button type="button" class="btn btn-primary active">Active Primary</button>

<button type="button" class="btn btn-primary" disabled Primary</button>

<a href="#" class="btn btn-primary disabled">Disabled Link</a>

کلاس .active، دکمه مورد نظر را به صورت فعال (انگار که کلیک شده است) نشان داده و کلاس .disabled آن را غیر فعال می کند به طوری که کاربر نمی تواند روی آن کلیک نماید. دقت داشته باشید که تگ <a> از خاصیت disabled در HTML پشتیبانی نمی کند بنابراین استفاده از کلاس disabled. در آن، فقط لینک را به صورت ظاهری غیر فعال نشان داده و در عمل، قابل کلیک کردن خواهد بود.

آموزش ایجاد دکمه های چرخنده (spinrer Button) در Bootstrap 4:

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

 

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

مثال 7

<button class="btn btn-primary">

<span class="spinner-border spinner-border-sm"></span>

</button>

<button class="btn btn-primary">

<span class="spinner-border spinner-border-sm"></span>

Loading..

</button>

<button class="btn btn-primary" disabled>

<span class="spinner-border spinner-border-sm"></span>

Loading..

</button>

<button class="btn btn-primary" disabled>

<span class="spinner-grow spinner-grow-sm"></span>

Loading..

</button>

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

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

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

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

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

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

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

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

1<p><img alt="Cinque Terre" class="rounded" src="cinqueterre.jpg"></p>

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

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

مثال حالت Circle

1<p><img alt="Cinque Terre" class="rounded-circle" src="cinqueterre.jpg"></p>

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

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

مثال حالت Thumbnail

1<p><img alt="Cinque Terre" class="img-thumbnail" src="cinqueterre.jpg"></p>

دوره آموزش BootStrap 4

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

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

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

1<p><img class="float-left" src="paris.jpg"> <img class="float-right" src="paris.jpg"></p>

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

مثال حالت Center

1<p><img class="d-block mx-auto" src="paris.jpg"></p>

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

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

1<img alt="Chania" class="img-fluid" src="img_chania.jpg">

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

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

نکته :

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

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

مثال jumbotron

1<div class="jumbotron">

1<h1>Bootstrap Tutorial</h1>

1 

1<p>Bootstrap is the most popular HTML, CSS...</p>

1</div>

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

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

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

1<div class="jumbotron jumbotron-fluid">

1  <div class="container">

1    <h1>Bootstrap Tutorial</h1>

1    <p>Bootstrap is the most popular HTML, CSS...</p>

1  </div>

1</div>

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

چهارچوب کاری بوت استرپ4، روش بسیار ساده ای برای ایجاد کادر هشدار یا Alert Box فراهم کرده است.
کادر هشدار Alert توسط یک تگ <div> با کلاس .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

1<div class="alert alert-success"><strong>Success!</strong> You should <a class="alert-link" href="#">read this message</a>.</div>

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

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

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

مثال 2

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

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

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

مثال 3

1<div class="alert alert-success alert-dismissible">

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

1  <strong>Success!</strong> Indicates a successful or positive action.

1</div>

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

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

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

مثال 4

1<div class="alert alert-danger alert-dismissible fade show">

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

1</div>

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

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

سلام با آموزش BootStrap 4 قسمت چهارم در خدمت شما هستیم .در قسمت قبل با آموزش رنگ در بوت استرپ آشنا شدیم.

آموزش کار با جدول (Table) در Bootstrap4:

آموزش ساخت جدول ساده در Bootstrap4:

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

1مثال آموزش ساخت جدول ساده:

1<div class="container">

1<h2>Basic Table</h2>

1 

1<p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>

1 

1<table class="table">

1    <thead>

1        <tr>

1            <th>Firstname</th>

1            <th>Lastname</th>

1            <th>Email</th>

1        </tr>

1    </thead>

1    <tbody>

1        <tr>

1            <td>John</td>

1            <td>Doe</td>

1            <td>[e-mail]</td>

1        </tr>

1        <tr>

1            <td>Mary</td>

1            <td>Moe</td>

1            <td>[e-mail]</td>

1        </tr>

1        <tr>

1            <td>July</td>

1            <td>Dooley</td>

1            <td>[e-mail]</td>

1        </tr>

1    </tbody>

1</table>

12</div>

آموزش ساخت ردیف های راه راه در جدول Bootstrap 4 :

دوره آموزش BootStrap 4

با اضافه کردن کلاس .table-striped به جدول در Bootstrap 4 ، ردیف های جدول به صورت یک در میان رنگی و سفید (راه راه) می شود. در کد مثال عملی زیر، نحوه استفاده از کلاس .table-striped به صورت عملی نشان داده شده است :

1مثال جدول Striped در بوت استرپ

1<div class="container">

1<h2>Striped Rows</h2>

1 

1<p>The .table-striped class adds zebra-stripes to a table:</p>

1 

1<table class="table table-striped">

1    <thead>

1        <tr>

1            <th>Firstname</th>

1            <th>Lastname</th>

1            <th>Email</th>

1        </tr>

1    </thead>

1    <tbody>

1        <tr>

1            <td>John</td>

1            <td>Doe</td>

1            <td>[e-mail]</td>

1        </tr>

1        <tr>

1            <td>Mary</td>

1            <td>Moe</td>

1            <td>[e-mail]</td>

1        </tr>

1        <tr>

1            <td>July</td>

1            <td>Dooley</td>

1            <td>[e-mail]</td>

1        </tr>

1    </tbody>

1</table>

1</div>

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

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

مثال جدول با خطوط حاشیه در بوت استرپ

1<div class="container">

1  <h2>Bordered Table</h2>

1  <p>The .table-bordered class adds borders on all sides of the table and the cells:</p>            

1  <table class="table table-bordered">

1    <thead>

1      <tr>

1        <th>Firstname</th>

1        <th>Lastname</th>

1        <th>Email</th>

1      </tr>

1    </thead>

1    <tbody>

1      <tr>

1        <td>John</td>

1        <td>Doe</td>

1        <td>[e-mail]</td>

1      </tr>

1      <tr>

1        <td>Mary</td>

1        <td>Moe</td>

1        <td>[e-mail]</td>

1      </tr>

1      <tr>

1        <td>July</td>

1        <td>Dooley</td>

1        <td>[e-mail]</td>

1      </tr>

1    </tbody>

1  </table>

1</div>

آموزش ساخت ردیف های hover در جدول:

دوره آموزش BootStrap 4

در صورت استفاده از کلاس .table-hover در یک جدول Bootstrap 4 ، در صورت عبور موس (hover) از روی هر ردیف جدول، رنگ پس زمینه آن به خاکستری تغییر می کند، هماننند کد مثال عملی زیر :

1مثال جدول hover در بوت استرپ

1<div class="container">

1<h2>Hover Rows</h2>

1 

1<p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p>

1 

1<table class="table table-hover">

1    <thead>

1        <tr>

1            <th>Firstname</th>

1            <th>Lastname</th>

1            <th>Email</th>

1        </tr>

1    </thead>

1    <tbody>

1        <tr>

1            <td>John</td>

1            <td>Doe</td>

1            <td>[e-mail]</td>

1        </tr>

1        <tr>

1            <td>Mary</td>

1            <td>Moe</td>

1            <td>[e-mail]</td>

1        </tr>

1        <tr>

1            <td>July</td>

1            <td>Dooley</td>

1            <td>[e-mail]</td>

1        </tr>

1    </tbody>

1</table>

1</div>

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

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

مثال جدول دو رنگ در بوت استرپ

1<div class="container">

1  <h2>Black/Dark Table</h2>

1  <p>The .table-dark class adds a black background to the table:</p>            

1  <table class="table table-dark">

1    <thead>

1      <tr>

1        <th>Firstname</th>

1        <th>Lastname</th>

1        <th>Email</th>

1      </tr>

1    </thead>

1    <tbody>

1      <tr>

1        <td>John</td>

1        <td>Doe</td>

1        <td>[e-mail]</td>

1      </tr>

1      <tr>

1        <td>Mary</td>

1        <td>Moe</td>

1        <td>[e-mail]</td>

1      </tr>

1      <tr>

1        <td>July</td>

1        <td>Dooley</td>

1        <td>[e-mail]</td>

1      </tr>

1    </tbody>

1  </table>

1</div>

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

در صورت استفاده همزمان از کلاس های .table-darkو .table-striped، جدول با پس زمینه تیره، نوشته سفید و ردیف های یک در میان روشن تر و تیره تر، به صورت راه راه همانند کد زیر، نشان داده می شود :

مثال جدول تیره و راه راه در بوت استرپ

1<div class="container">

1<h2>Dark Striped Table</h2>

1 

1<p>Combine .table-dark and .table-striped to create a dark, striped table:</p>

1 

1<table class="table table-dark table-striped">

1    <thead>

1        <tr>

1            <th>Firstname</th>

1            <th>Lastname</th>

1            <th>Email</th>

1        </tr>

1    </thead>

1    <tbody>

1        <tr>

1            <td>John</td>

1            <td>Doe</td>

1            <td>[e-mail]</td>

1        </tr>

1        <tr>

1            <td>Mary</td>

1            <td>Moe</td>

1            <td>[e-mail]</td>

1        </tr>

1        <tr>

1            <td>July</td>

1            <td>Dooley</td>

1            <td>[e-mail]</td>

1        </tr>

1    </tbody>

1</table>

1</div>

آموزش ساخت جدول تیره با قابلیت hover:

در صورت استفاده همزمان از کلاس های .table-hover و .table-dark جدول به صورت تیره نشان داده شده ولی در هنگام عبور موس از روی هر ردیف، رنگ ردیف کلی روشن تر می شود. همانند کد مثال عملی زیر:

مثال جدول تیره hover در bootstrap

1<p><div class="container"><br>

1  <h2>Hoverable Dark Table</h2><br>

1  <p>The .table-hover class adds a hover effect (grey background color) on table rows:</p>            <br>

1  <table class="table table-dark table-hover"><br>

1    <thead><br>

1      <tr><br>

1        <th>Firstname</th><br>

1        <th>Lastname</th><br>

1        <th>Email</th><br>

1      </tr><br>

1    </thead><br>

1    <tbody><br>

1      <tr><br>

1        <td>John</td><br>

1        <td>Doe</td><br>

1        <td>[e-mail]</td><br>

1      </tr><br>

1      <tr><br>

1        <td>Mary</td><br>

1        <td>Moe</td><br>

1        <td>[e-mail]</td><br>

1      </tr><br>

1      <tr><br>

1        <td>July</td><br>

1        <td>Dooley</td><br>

1        <td>[e-mail]</td><br>

1      </tr><br>

1    </tbody><br>

1  </table><br>

1</div></p>

آموزش ساخت جدول بدون خطوط در Bootstrap 4 :

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

مثال جدول بدون خطوط حاشیه در بوت استرپ

1<div class="container">

1  <h2>Borderless Table</h2>

1  <p>The .table-borderless class removes borders from the table:</p>            

1  <table class="table table-borderless">

1    <thead>

1      <tr>

1        <th>Firstname</th>

1        <th>Lastname</th>

1        <th>Email</th>

1      </tr>

1    </thead>

1    <tbody>

1      <tr>

1        <td>John</td>

1        <td>Doe</td>

1        <td>[e-mail]</td>

1      </tr>

1      <tr>

1        <td>Mary</td>

1        <td>Moe</td>

1        <td>[e-mail]</td>

1      </tr>

1      <tr>

1        <td>July</td>

1        <td>Dooley</td>

1        <td>[e-mail]</td>

1      </tr>

1    </tbody>

1  </table>

1</div>

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

دوره آموزش 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 آشنا شدیم و فرق 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:

سیستم گریدبندی 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 را نشان داده ایم. کد مثال ها را مطالعه نمایید. در ادامه به تشریح هرکدام خواهیم پرداخت :

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

<!-- Control the column width, and how they should appear on different devices -->

<div class="row">

<div class="col-*-*"></div>

<div class="col-*-*"></div>

</div>

<div class="row">

<div class="col-*-*"></div>

<div class="col-*-*"></div>

<div class="col-*-*"></div>

</div>

<!-- Or let Bootstrap automatically handle the layout -->

<div class="row">

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

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

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

</div>

توضیح مثال اول : ابتدا یک سطر (کد 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

<div class="row">

<div class="col">.col</div>

<div class="col">.col</div>

<div class="col">.col</div>

</div>

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

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

مثال 2

<div class="row">

<div class="col-sm-3">.col-sm-3</div>

<div class="col-sm-3">.col-sm-3</div>

<div class="col-sm-3">.col-sm-3</div>

<div class="col-sm-3">.col-sm-3</div>

</div>

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

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

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

مثال 3

<div class="row">

<div class="col-sm-4">.col-sm-4</div>

<div class="col-sm-8">.col-sm-8</div>

</div>

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

آموزش کار با متن (Text) و فن چاپ Bootstrapt 4

تنظیمات اولیه Bootstrap 4 برای نمایش متن:

چهارچوب کاری بوت استرپ Bootstrap 4 از سایز نوشته پیش فرض (font-size) با مقدار 16px و ارتفاع خط (line-height) به بلندی 1.5 استفاده می کند.
فونت یا قلم (font-family) پیش فرض در Bootstrap 4 نیز به ترتیب فونت های “Helvetica Neue”، “Helvetica”، “Arial” و “sans-serif” هستند.
علاوه بر این ها در بوت استرپ 4 ، تمامی تگ های <p> یا پاراگراف به طور پیش فرص دارای حاشیه بالا (margin-tap) برابر صفر و حاشیه پایین (margin-bottem) معادل 1rem یا 16px هستند.

آموزش کار با تگ های عنوان <h1> تا <h6> در بوت استرپ 4:

بوت استرپ Bootstrap 4 از ضخامت قلم (font-weight)، ضخیم تر و کمی سایز نوشته (font size) بزرگتر نسبت به Bootstrap 3 در تگ های عنوان یا <h1> تا <h6> استفاده می کند.
در کد مثال عملی زیر، نحوه کاربرد تگ های عنوان در بوت استرپ 4 و خروجی آن ها را نشان داده ایم :

مثال 1

<div class="container">

<h1>h1 Bootstrap heading (2.5rem = 40px)</h1>

<h2>h2 Bootstrap heading (2rem = 32px)</h2>

<h3>h3 Bootstrap heading (1.75rem = 28px)</h3>

<h4>h4 Bootstrap heading (1.5rem = 24px)</h4>

<h5>h5 Bootstrap heading (1.25rem = 20px)</h5>

<h6>h6 Bootstrap heading (1rem = 16px)</h6>

</div>

h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)

h6 Bootstrap heading (1rem = 16px)

آموزش کار با عنوان ها (Headings) در بوت استرپ 4:

عنوان های مخصوص بوت استرپ 4 با کلاس display کمی متفاوت تر از تگ های عنوان HTML با تگ <h1> تا <h6> هستند. این عنوان ها، دارای سایز نوشته بزرگتر (font-size) ولی پهنای قلم (font-weight) کمتر نسبت به تگ های <h> هستند.
برای این عنوان ها، چهار کلاس displsy-1، display-2، display-3 و display-4 در بوت استرپ 4 ، تعریف شده اند که می توانید یکی از آن ها را انتخاب نمایید.
در کد مثال عملی زیر، نحوه استفاده از کلاس های جدید Heading در بوت استرپ 4 و خروجی آن ها نشان داده شده اند :

مثال 2

<div class="container">

<h1>Display Headings</h1>

<p>Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):</p>

<h1 class="display-1">Display 1</h1>

<h1 class="display-2">Display 2</h1>

<h1 class="display-3">Display 3</h1>

<h1 class="display-4">Display 4</h1>

</div>

آموزش کاربرد تگ <small> در بوت استرپ 4:

از تگ <small> در Bootstrap 4 برای ایجاد یک متن کوچکتر و غیر اصلی در عنوان ها استفاده می شود.

راهنمایی :

برای کارکرد صحیح تگ <small< ، این تگ بایستی درون تگ های <h1< تا <h6< و یا تگ های نوشته با کلاس .display.* قرار بگیرد.

در کد مثال عملی زیر، نحوه استفاده از تگ <small> و نتیجه آن را در خروجی نشان داده ایم:

مثال 3

<div class="container">

<h1>Lighter, Secondary Text</h1>

<p>The small element is used to create a lighter, secondary text in any heading:</p>

<h1>h1 heading <small>secondary text</small></h1>

<h2>h2 heading <small>secondary text</small></h2>

<h3>h3 heading <small>secondary text</small></h3>

<h4>h4 heading <small>secondary text</small></h4>

<h5>h5 heading <small>secondary text</small></h5>

<h6>h6 heading <small>secondary text</small></h6>

</div>

آموزش کاربرد تگ <mark> در Bootstrap 4:

در صورت قرار دادن یک متن درون تگ <mark> ، بوت استرپ 4، آن متن را برای پس زمینه زرد و کمی حاشیه درونی (padding) نمایش خواهد داد.
در کد مثال عملی زیر، نحوه استفاده از تگ <mark> و خروجی آن را نشان داده ایم:

مثال 4

<div class="container">

<h1>Highlight Text</h1>

<p>Use the mark element to <mark>highlight</mark> text.</p>

</div>

آموزش کاربرد تگ <abbr> در بوت استرپ 4:

در صورت قرار دادن متن درون تگ <abbr> ، چهارچوب کاری بوت استرپ 4، آن متن را با یک حاشیه زیرین خط چین و نقطه نقطه نمایش می دهد.
در کد مثال عملی زیر، نحوه استفاده از تگ <abbr> را در عمل نشان داده ایم:

مثال 5

<div class="container">

<h1>Abbreviations</h1>

<p>The abbr element is used to mark up an abbreviation or acronym:</p>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

</div>

آموزش کاربرد تگ <blockquote> در Bootstrap 4:

آموزش طراحی وب

با اضافه کردن کلاس .blockquote به تگ <blockquote> در بوت استرپ 4، می توانید یک متن را به صورت درج زیرنویس (مثلا اشاره به مرجع مطلب در نوشته ها) در زیر یک متن اصلی نمایش دهید. همانند کد مثال عملی زیر:

مثال 6

<div class="container">

<h1>Blockquotes</h1>

<p>The blockquote element is used to present content from another source:</p>

<blockquote>

<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>

<p>From WWF's website</p>

</blockquote>

</div>

آموزش کار با تگ <dl> در Bootstrap 4:

بوت استرپ 4، تگ <dl> را با زیر لیست های آن ( تگ های <dt> و <dd> ) به صورت زیر نشان می دهد:

مثال 7

<div class="container">

<h1>Description Lists</h1>

<p>The dl element indicates a description list:</p>

<p>Coffee</p>

<p>- black hot drink</p>

<p>Milk</p>

<p>- white cold drink</p>

</div>

آموزش کار با تگ <kbd> در Bootstrap 4:

بوت استرپ 4، متن درون تگ <kbd> را با پس زمینه تمام مشکی و رنگ نوشته سفید نمایش می دهد. در کد مثال عملی زیر، نحوه استفاده از تگ <kbd> و خروجی آن را نشان داده ایم:

مثال 8

<div class="container">

<h1>Keyboard Inputs</h1>

<p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>

<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>

</div>

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

به زودی با بخش سوم آموزش Bootstrap 4 بر می گردم

آموزش Bootstrap

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

بوت استرپ Bootstrap

بوت استرپ Bootstrap یک چهارچوب کاری رایگان طراحی سمت کاربر یا فرانت اند (front end) است که به منظور طراحی سریع تر و ساده تر برنامه ها و وب سایت های اینترنتی ایجاد شده است.

• بوت استرپ (Bootstrap) شامل تمپلیت های آماده مبتنی بر HTML و CSS برای کار با فرم ها (Forms)، دکمه ها (Buttons)، جدول ها (Tables)، نوار پیمایش مسیر (Navigation)، تصاویر (Images)، کادرهای محاوره ای (Models)، اسلایدها، کار با متن (Typography) و ابزارهای بسیار دیگری است. چهارچوب کاری Bootstrap حاوی افزونه (plug-in) های آماده بسیاری مبتنی بر جاوا اسکریپت، جهت پویا نمایی سایت ها نیز می باشد.
• آموزش طراحی سایت
• چهارچوب کاری بوت استرپ (Bootstrap)، به سادگی امکان طراحی وب واکنش گرا و انعطاف پذیر (Responsive Design) جهت نمایش وب سایت ها در انواع و سایزهای مختلف نمایشگر را فراهم کرده است.

راهنمایی : طراحی وب واکنش گرا (Responsive Web Design) چیست؟

طراحی وب واکنش گرا یا Responsive Design به روش طراحی سایت ای گفته می شود که در آن صفحات وب، به صورت اتوماتیک و هوشمند، اندازه و نحوه چیدمان اجزای خود را بر حسب ابعاد دستگاه نمایش دهنده صفحه، از موبایل های کوچک گرفته تا مانیتورهای بزرگ، تنظیم کرده تا بهترین حالت نمایش را داشته باشند.

یک مثال ساده طراحی وب سایت با Bootstrap 4:

در کد مثال عملی زیر، یک صفحه وب معمولی را با استفاده از چهارچوب کاری Bootstrap 4 ، طراحی کرده ایم.
این صفحه دارای یک هدر و سه ستون متنی است که به صورت اتوماتیک و برحسب اندازه صفحه نمایش دهنده سایت، چیدمان و عرض اجزای آن تنظیم می شود .

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

مثال 1:

<div class="container">

<div class="row">

<div class="col-sm-4">

<h3>Column 1</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

<div class="col-sm-4">

<h3>Column 2</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

<div class="col-sm-4">

<h3>Column 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

</div>

</div>

مقایسه Bootstrap 4 با Bootstrap 3:

بوت استرپ Bootstrap 4 (بوت استرپ) ورژن جدیدتر بوت استرپ است که با کامپوننت های جدید، Stylesheet سریع تر و قابلیت واکنش گرا بودن بیشتر و بهتر.

بوت استرپ Bootstrap 4 از تمامی پلتفرم ها و آخرین نسخه های مرورگرهای اصلی، پشتیبانی می کند ولی از مرورگرهای 9IE و پایین تر، پشتیبانی نمی کند.

راهنمایی 1 :

اگر می خواهید Bootstrap را در مرورگرهای IE8و IE9 به کار ببرید، بایستی از Bootstrap ورژن 3، استفاده کنید. ورژن 3 ، پایدارترین نسخه Bootstrap است و همچنان توسط سیستم Bootstrap، جهت برطرف کردن باگ های خطرناک و ارائه مستندات آموزشی، پشتیبانی می شود.

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

راهنمایی 2 - عدم پشتیبانی از برخی از آیکون ها :

بوت استرپ Bootstrap 4 از آیکون های BS3 Glyphicons، پشتیبانی نمی کند. در Bootstrap 4 از Font Awesome و سایر کتابخانه های آماده آیکون، استفاده نمایید.

چرا بایستی از Bootstrap استفاده کنیم؟

مزایای استفاده از Bootstrap عبارتند از :

• راحتی در استفاده : هر کاربری حتی با دانش کمی از HTML و CSS می تواند به راحتی شروع به استفاده از Bootstrap 4 نماید.
• قابلیت واکنش گرایی بیشتر: در نسخه Bootstrap 4، قابلیت طراحی وب واکنش گرا یا Responsive Design به وسیله CSS بهتر شده و برای انواع موبایل ها، تبلت ها و کامپیوترهای رومیزی تنظیم گشته است.
• راهکار طراحی اولیه جهت موبایل (Mobile First Design): در نسخه جدید بوت استرپ 4، استایل های طراحی جهت موبایل (دستگاه با صفحات کوچک)، به عنوان هسته اصلی چهارچوب کاری Bootstrap 4 تعریف شده است.
• سازگار بودن با انواع مرورگر : بوت استرپ 4 با تمامی مرورگرهای اصلی از جمله کروم، فایرفاکس، IE10، Edge، سافاری و اپرا کاملا سازگار است.

بوت استرپ Bootstrap 4 را از کجا دریافت کنیم؟

دو راه اصلی جهت استفاده از Bootstrap 4 بر روی وب سایت ها وجود دارد :

• خواندن آنلاین فایل های Bootstrap 4 از طریق یک توزیع کننده آنلاین وب یا CDN.
• دانلود فایل های Bootstrap 4 از سایت getbootstrap.com و اضافه کردن آن ها در هاست سایت مورد نظر.
• آموزش طراحی سایت

آموزش کار با توزیع کننده های آنلاین Bootstrap یا CDN:

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

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

<!-- Popper JS -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">

<!-- Latest compiled JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

راهنمایی : مزیت استفاده از CDN Bootstrap چیست؟

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

راهنمایی 2 : چرا بایستی jQuery یا Propper را همراه Bootstrap اضافه کنیم؟

بوت استرپ Bootstrap 4 از کتابخانه های آماده jQuery یا Propper برای اجرای افزونه یا کامپوننت های جاوا اسکریپتی مثل کادرهای محاوره ای (Models)، پیام ها tooltip، منوهای پاپ آپ و ... استفاده می کند، بنابراین بایستی این فایل ها هم اضافه شوند.
اما اگر فقط از بخش CSS Bootstrap استفاده می کنید، نیازی به اضافه کردن لینک jQuery یا Propper وجود ندارد.

آموزش طراحی وب

آموزش دانلود فایل های Bootstrap 4:

اگر می خواهید فایل های Bootstrap 4 را دانلود کرده و در هاست سایت خود قرار دهید، می توانید به آدرس getbootstrap.com رفته و مراحل لازم را انجام دهید.

آموزش طراحی اولین صفحه وب با Bootstrap 4:

مرحله 1 - اضافه کردن تگ اصلی HTML 5 Doctype:

بوت استرپ Bootstrap 4 از تگ های HTML و خواص CSS استفاده می کند، که لازم است تگ اصلی HTML5 یا doctype به صفحات وب اضافه شود.
همواره همانند کد زیر، تگ HTML 5 doctype را در ابتدای صفحات اضافه کرده و خواص lang(زبان) و سیستم کدینگ (charset) مناسب را تعیین نمایید :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

</head>

</html>

مرحله 2 - Bootstrap 4 پیش فرض نمایش در موبایل است (Mobile First Design) :

بوت استرپ Bootstrap 4 به گونه ای طراحی شده است تا بهترین نمایش را در درجه اول درون صفحات موبایل ها داشته باشد و فایل های stylesheet مخصوص صفحه نمایش های کوچک، هسته اصلی چهارچوب کاری Bootstrap است. برای اطمینان از نمایش صحیح و zoom صحیح و لمسی، تگ <meta> زیر را درون بخش <head> صفحه قرار دهید :

<meta name="viewport" content="width=device-width, initial-scale=1">

در کد فوق، خاصیت width=device-width باعث می شود همواره عرض صفحه معادل عرض صفحه نمایش دهنده آن باشد که البته در دستگاه های مختلف، متفاوت خواهد بود.
همچنین خاصیت initial-scale=1، تعیین می کند زوم اولیه جهت نمایش صفحه 1 یا 100 درصد بوده که به معنای عدم زوم اولیه است.

مرحله 3 - تعیین عنصر دربرگیرنده اصلی محتویات صفحه (Containers):
بوت استرپ 4 برای دربرگرفتن کلیه اجرای صفحه به یک عنصر مادر یا Container نیاز دارد. در چهارچوب Bootstrap 4 دو نوع Container تعریف شده که می توانید از هر کدام استفاده نمایید :

• کلاس container. : یک عنصر دربرگیرنده با قابلیت طراحی واکنش گرا ایجاد می کند که عرض آن معمولا کمی کمتر از عرض کل صفحه نمایش است.
• کلاس container-fluid. : یک دربرگیرنده با عرض کامل (full width container) ایجاد می کند که تمامی عرض صفحه نمایش را در بر می گیرد.

در شکل کد مثال عملی زیر، هر دو نوع container Bootstrap را نشان داده ایم:

container Bootstrap

آموزش دو مثال عملی طراحی صفحه در Bootstrap 4:

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

مثال 2

<p>Bootstrap 4 Example</p>

<div class="container">

<h1>My First Bootstrap Page</h1>

<p>This is some text.</p>

</div>

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

مثال 3:

<div class="container-fluid">

<h1>My First Bootstrap Page</h1>

<p>This is some text.</p>

</div>

با ادامه بخش دوم آموزش Bootstrap 4 همراه ما باشید