آموزش BootStrap

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

آموزش قابها در html

۱۹ بازديد

آموزش طراحی سایت - آموزش قابها در html

قاب های HTML

قاب های HTML برای تقسیم پنجره ی مرورگر شما به چند بخش استفاده می شوند که هر بخش می تواند یک داکیومنت مجزای HTML رابارگذاری کند. مجموعه ای از چارچوب ها در پنجره ی مروگر به عناون frameset شناخته می شوند. به روش مشابهی که جدول ها سازماندهی می شوند، پنجره نیز به چارچوب های مختلف تقسیم می شود: در ستون ها و ردیف ها.

 

نقطه ضعف های چارچوب ها:

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

 

ایجاد چارچوب ها:

برای استفاده از چارچوب ها در یک صفحه از برچسب < frameset> به جای < body>استفاده می کنیم. برچسب< frameset> چگونگی تقسیم پنجره به چارچوب را تعریف می کند. ویژگی rows از برچسب < frameset> چارچوب های افقی و ویژگی cols نیز چارچوب های عمودی را تعریف می کنند. هر چارچوب توسط برچسب < frame> نشان داده شده است و تعریف می کند که کدام داکیومنت HTML باید در داخل چارچوب باز شود.

 مثال:

در زیر مثالی را برای ایجاد سه چارچوب افقی می بینید.

 

نمونه یک

 

    HTML Frames

   

   

   

    </span></p> <p style="text-align: left;"><span style="color: #333333; font-family: byekan;">&nbsp; &nbsp; &nbsp; &nbsp; <body></span></p> <p style="text-align: left;"><span style="color: #333333; font-family: byekan;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Your browser does not support frames.</span></p> <p style="text-align: left;"><span style="color: #333333; font-family: byekan;">&nbsp; &nbsp; &nbsp; &nbsp; </body></span></p> <p style="text-align: left;"><span style="color: #333333; font-family: byekan;">&nbsp; &nbsp;

ویژگی های برچسب < frameset>:


Attribute                                                                                                          Description
cols
تعداد ستون ها و اندازه ی هر ستون را در frameset مشخص می کند. شما می توانید عرض هر ستون را به یکی از چهار روش زیر مشخص کنید:
مقادیر مطلق به پیکسل، برای مثال برای ایجاد سه چارچوب عمودی از cols="100, 500,100" استفاده کنید. درصدی از پنجره ی مرورگر، برای مثال برای ایجاد سه چارچوب عمودی از cols="10%, 80%,10%" استفاده کنید.
استفاده از سمبل wildcard ، برای مثال برای ایجاد سه چارچوب عمودی از cols="10%, *,10%" استفاده کنید. در این مورد wildcard باقیمانده ی پنجره را فرا می گیرد.
به عنوان عرض های پنجره ی مرورگر، به عنوان مثال برای ایجاد سه چارچوب عمودی از cols="3*,2*,1*" استفاده کنید. این یک جایگزین بری درصدها می باشد. شما می توانید از عرض های مربوط پنجره ی مرورگر استفاده کنید. در اینجا پنجره به شش بخش تقسیم می شود: اولین ستون نصف پنجره را فرا می گیرد، دومین ستون یک سوم و سومین ستون یک ششم آن را.
rows
این ویژگی درست مانند ویژگی cols کار می کند و همان مقادیر را به خود می گیرد، اما برای مشخص کردن ردیف ها در frameset استفاده می شود. برای مثال برای ایجاد دو چارچوب افقی از rows="10%, 90%" استفاده کنید. می توانید طول هر ردیف را به همان روشی که در بالا در مورد ستون ها توضیح داده شد، مشخص کنید.
border
این ویژگی عرض حاشیه ی هر چارچوب را به پیکسل مشخص می کند. برای مثال border="5" . مقدار 0 به معنای بدون حاشیه می باشد.
frameborder
این ویژگی مشخص می کند که آیا بین چارچوب ها باید حاشیه ی سه بعدی نمایش داده شود. این ویژگی مقدار 1 (بله) و 0 (خیر) را به خود می گیرد. برای مثال frameborder="0" به معنای بدون حاشیه می باشد.
framespacing
این ویژگی مقدار فضای بین چارچوب ها را در یک frameset مشخص می کند. این ویژگی می تواند هرمقدار داخلی به خود بگیرد. برای مثال framespacing="10" به معنای وجود 10 پیکسل فضا بین هر چارچوب می باشد.

ویژگی های برچسب < frame>

Attribute
Description
src
این ویژگی برای ارائه ی نام فایلی که باید در چارچوب بارگذاری شود، مورد استفاده قرار می گیرد. مقدار آن هر URL می تواند باشد. برای مثال src="/html/top_frame.htm" یک فایل HTML موجود در مسیر html بارگذاری خواهد کرد.
name
این ویزگی به شما اجازه می دهد تا یک چارچوب را نام گذاری کنید. این ویژگی نشان می دهد که داکیومنت در کدام چارچوب باید بارگذاری شود؛ به ویژه در هنگام ایجاد لینک در یک چارچوب که صفحاتی را روی یک چارچوب دیگر بارگذاری می کند، که در آن مورد frame دوم برای مشخص کردن خود به عنوان هدف لینک، بسیار مهم است.
frameborder
این ویژگی مشخص می کند که آیا حاشیه های مربوط به frame نشان داده می شوند یا نه. این امر مقدار داده شده به ویژگی frameborder را روی برچسب می گیرد، اگر مقداری ارائه شده باشد و این ویژگی می تواند مقادیر 1 (بله) و 0 (خیر) بگیرد.
marginwidth
این ویژگی به شما اجازهمی دهد تا عرض فضای بین چپ و راست حاشیه های frame و محتوای آن را مشخص کنید. این مقدار به پیکسل داده می شود. برای مثال marginwidth="10"
marginheight
این ویژگی به شما اجازهمی دهد تا طول فضای بین بالا و پایین حاشیه های frame و محتوای ان را مشخص کنید. مقدار به پیکسل داده می شود. برای مثال marginheight="10".
noresize
به طور پیش فرض شما می توانید با کلیک کردن و درگ کردن روی حاشیه های frame هر گونه frame را تغییر اندازه بدهید. ویژگی noresize قابلیت تغییر اندازه ی یک frame را ازبین می برد. برا مثال noresize="noresize"
scrolling
این ویژگی ظاهر اسکرول بارهایی را که روی frame نمایان می شوند، کنترل می کند. این ویژگی مقدار "yes", "no" یا "auto"به خود می گیرد. برای مثال scrolling="no" به این معناست که frame نباید اسکرول بار داشته باشد.
longdesc
این ویژگی به شما اجازه می دهد تا به صفحه ای دارای توضیح طولانی در مورد محتوای frame یک لینک ارائه دهید. برای مثال longdesc="framedescription.htm"

 

مرورگرهایی که frame ها را پشتیبانی می کنند

اگر کاربر از مرورگرهای قدیمی یا مرورگرهایی استفاده کند که frame را پشتیبانی نمی کنند، عنصر < noframes>باید به یوزر نمایش داده شود. بنابراین شما باید یک عنصر < body>را داخل عنصر < noframes>قرار دهید، زیرا تصور می شود که عنصر< frameset>جایگزین عنصر< body>می شود. اما اگر یک مرورگر < frameset>را درک نکند، بنابراین باید آنچه را که داخل عنصر< body>می باشد درک کند که حاوی عنصر < noframes>می باشد.
شما می توانید به یوزرهای خود که از مرورگرهای قدیمی استفاده می کنند، پیام هایی بدهید. برای مثال پیام Sorry!! your browser does not support frames. ، همانطور که در مثال بالا نشان داده شده است.

 

نام frame و ویژگی های target

یکی از محبوب ترین موارد استفاده از frame قرار دادن نوارهای مسیریابی در یک frame و سپس بارگذاری صفحات اصلی در یک frame مجزا می باشد.


 مثال:

اجازه بدهید مثال زیر را بررسی کنیم که داری کد زیر می باشد:

آموزش html css

نمونه دو

 

    HTML Frames

   

   

   

    </p> <p style="direction: ltr;">&nbsp; &nbsp; &nbsp; &nbsp; <body></p> <p style="direction: ltr;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Your browser does not support frames.</p> <p style="direction: ltr;">&nbsp; &nbsp; &nbsp; &nbsp; </body></p> <p style="direction: ltr;">&nbsp; &nbsp;

در اینجا دو ستون ایجاد کرده ایم که قرار است با دو ستون پر شوند. اولین frame دارای عرض 200 پیکسل می باشد و حاوی نوار منوی مسیر یابی می باشد که توسط فایل menu.htm اجرا می شود. دومین ستون فضای باقیمانده را پر کرده و حاوی بخش اصلی صفحه خواهد بود و توسط فایل main.htm اجرا می شود. برای هرسه لینک موجود در نوار منو یک frame هدف به عنوان main_page ذکر کرده ایم، بنابراین هر زمان روی لینک های موجود در نوار منو کلیک کنید، لینک موجود در main_page باز خواهد شد.
در زیر محتوای فایل menu.htm را مشاهده می کنید.


نمونه سه

   Google

 

    Microsoft

   

 

در زیر محتوای فایل main.htm را مشاهده می کنید.

 

نمونه چهار

 

   

This is main page and content from any link will be displayed here.

   

So now click any link and see the result.

اکنون می توانید لینک های موجود در پنل چپ را کلیک کرده و نتیجه را مشاهده کنید. ویژگی target نیز یکی از مقادیر زیر را می گیرد:

 

Option
Description
_self
صفحه را روی frame جاری بارگذاری می کند.
_blank
صفحه را روی یک پنجره ی مرورگر جدید بارگذاری کرده ، در حالیکه یک پنجره ی جدید باز می کند.
_parent
صفحه را روی پنجره ی اصلی بارگذاری می کند که در مورد یک frameset مجزا مرورگر اصلی پنجره می باشد.
_top
صفحه را روی پنجره ی مرورگر بارگذاری می کند، در حالیکه هر frame موجود را جایگزین می کند.
targetframe
صفحه را در یک target frame نام گذاری شده بارگذاری می کند

 

 

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

۷۴ بازديد
سلام با آموزش Bootstrap 4 در خدمت شما هستیم درقسمت قبلبا مفهوم زیر آشنا شدیم
  • کار با فرم Form در Bootstrap 4
  • آموزش اعتبارسنجی فرم ها (Form Validation) در Bootstrap
  • آموزش کار با کنترل های ورود اطلاعات Input در بوت استرپ 4
 
حال با ادامه آموزش بوت استرپ 4 از دورهآموزش طراحی سایتهمراه باشید:
 
 
آموزش ساخت اسلایدر Carousel در Bootstrap 4
یک اسلایدر یا carousel در بوت استرپ 4، یک اسلاید شو برای نمایش دو یا چند عکس پشت سر هم و تکرار وار است.
نحوه ایجاد یک اسلایدر carousel در بوت استرپ 4:
در کد مثال عملی، نحوه ساخت یک اسلایدر carousel را که دارای فلش های حرکت بین عکس ها و کنترل های لازم است را آموزش داده ایم.
به کد مثال و خروجی آن دقت نمایید. در ادامه به تشریح هر بخش پرداخته ایم :
مثال 1
 
 
 
 
 
 
 
 
 
 
 
 
Los Angeles
 
 
Chicago
 
 
New York
 
 
 
 
 
 
 
 
 
 
 
 
توضیح مثال : در ادامه به تشریح و آموزش کارکرد هریک از کلاس های استفاده شده در carousel پرداخته ایم :
 
آموزش اضافه کردن عنوان (Caption) به هر عکس اسلایدر:
معمولا در زیر هر عکس یک عنوان یا Caption که در مورد اسلایدر توضیح می دهد، قرار می گیرد.
با استفاده از کلاس های carousel-caption و carousel-item در یک تگ div می توانید توضیح یا Caption برای هر اسلاید تعیین کنید، همانند مثال زیر:
مثال 2
 
  Los Angeles
  
    

Los Angeles

    

We had such a great time in LA!

  
 
آموزش طراحی سایتآموزش کار با کادر پیام Modal در Bootstrap 4
کامپوننت Modal در چهارچوب کاری بوت استرپ 4، یک کادر نمایش popup است که در بالای صفحه جاری ظاهر شده و نمایش داده می شود. عملکرد Modal شبیه کادر اخطار alert در جاوا اسکریپت است، ولی با ظاهری مدرن تر و زیباتر.
آموزش ساخت یک کادر نمایش Modal در بوت استرپ 4:
در کد مثال عملی زیر، نحوه ساخت یک کادر نمایش Modal در Bootstrap 4 را نمایش داده ایم، کد را مطالعه کرده و خروجی را مشاهده نمایید، نکات مهم کد عبارتند از :
  • برای فراخوانی و اجرای کادر نمایش Modal معمولا از یک دکمه button یا تگ link استفاده می شود که با کلیک بر روی آن، کادر ظاهر می شود. این المنت بایستی درای خاصیت data-toggle برابر modal بوده و مقدار خاصیت data-target آن نیز برابر با id المنت Modal تنظیم شود.
  • کادر نمایش Modal در یک تگ یا عنصر دربرگیرنده (مثل تگ div) با کلاس modal قرار گرفته و بدنه اصلی آن را نیز 2 تگ با کلاس های modal-dialog و modal-content تعیین می کنند.
  • یک کادر نمایش Modal می تواند دارای 3 بخش اصلی هدر، بدنه و فوتر باشد که به ترتیب با المنت هایی با کلاس modal-header با modal-body و modal-footer تعریف می شوند.
  • برای تعیین عنوان کادر نمایش Modal از یک عنصر با کلاس modal-tittle استفاده می شود.
مثال 1
 
 
Open modal
 
 
 
 
 
 
 
 
 
 
 
 
 
Modal body..
 
 
 
 
 
 
 
 
 
اضافه کردن افکت animation به کادر نمایش Modal:
می توانید افکت fade یا محو و ظاهر شدن تدریجی را با اعمال کلاس fade. به کادر نمایش Modal، بدان اضافه نمایید.
مثال: در کد مثال عملی زیر، در کادر نمایش Modal یکی با افکت fade و دیگری بدون افکت ایجاد کرده ایم که می توانید تفاوت در ظاهر شدن را مقایسه نمایید :
مثال 2
 
 
 
 
 
آموزش تعیین سایز کادر نمایش Modal در Bootstrap 4:
می توانید با تعیین کلاس modal-sm، اندازه کادر نمایش Modal را کوچک کرده و با کلاس modal-lg سایزی بسیار بزرگ برایش تعیین نمایید.
کلاس اندازه مورد نظر را بایست به عنصر با کلاس modal-dialog اضافه نمایید. در کد مثال های عملی زیر، سایز مختلف Modal را ایجاد کرده ایم :
مثال 1: حالت کوچک sm
مثال sm
 
 
مثال2: حالت بزرگ Lg
مثال lg
 
 
مثال 3: حالت بسیار بزرگ xl
مثال xl
 
 
نکته :
در حالت پیش فرض، بوت استرپ 4، کادرهای نمایش Modal را در اندازه متوسط md یا medium نمایش می دهد.
آموزش وسط نمایش دادن کادر نمایش Modal در بوت استرپ 4:
می توایند با اعمال کلاس modal-dialog-centred به کادر نمایش Modal، هم به صورت افقی و هم عمودی، آن را در وسط صفحه نمایش دهید. همانند کد مثال عملی زیر :
مثال center
 
 
ایجاد نوار اسکرول برای کادر نمایش Modal در بوت استرپ 4:
هنگامی که محتویات درون کادر Modal زیاد باشد، به طوری که در ارتفاع عنصر جا نشود، نوار اسکرول به کادر نمایش اضافه می شود. برای درک بهتر به کد مثال عملی زیر و خروجی آن دقت نمایید :
مثال scroll
 
 
در حالت قبل، برای دیدن ادامه محتویات کادر نمایش Modal صفحه رو به پایین و بالا اسکرول می شود. اما می توانید با اضافه کردن کلاس modal-dialog-scrollable به عنصر دارای کلاس modal-dialog، کاری کنید خود کادر نمایش Modal دارای نوار اسکرول شده و بدون اسکرول صفحه، مابقی محتویات آن را ببینید. همانند کد مثال عملی زیر :
مثال scroll 2
 
 
آموزش کار با عنوان راهنما tooltip در Bootstrap 4
کامپوننت عنوان راهنما یا tooltip یک کادر کوچک popup است که در هنگام عبور موس از روی یک المنت، ظاهر شده و معمولا توضیحاتی راجع به آن ارائه می دهد.
آموزش ایجاد عنوان راهنما tooltip در بوت استرپ 4:
برای ایجاد یک tooltip، خاصیت data-toggle=” tooltip” را به المنت مورد نظرتان اضافه کنید. سپس متن ی که می خواهید در tooltip نمایش داده شود را درون خاصیت title تعیین نمایید. نحوه انجام کار را در کد مثال عملی زیر نشان داده ایم :
مثال 1
نکته :
برای اجرای صحیح کادر عنوان tooltip در بوت استرپ 4، بایستی آن را توسط jQuery فراخوانی اولیه نمایید. به این صورت که المنت مورد نظر را انتخاب کرده و متد tooltip() را بر رویش اجرا نمایید.
کد زیر برای اجرای اولیه tooltip در Bootstrap 4 توسط jQuery بایستی به صفحه اضافه شود :
آموزش تعیین موقعیت قرارگیری tooltip در بوت استرپ 4:
به صورت پیش، کادر متن راهنما tooltip در بالای عنصر نمایش داده می شود.
اما می توانید از خاصیت data-placement برای قرارگرفتن کادر tooltip در بالا (top)، پایین (bottom)، راست (right) و چپ (left) عنصر استفاده نمایید. همانند کد مثال عملی زیر :
مثال 2

آموزش طراحی سایت- ایجاد Spiner و صفحه بندی در بوت استرپ 4

۷۱ بازديد

 

 

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

  • آموزش کار با نشان برجسته Badges در Bootstrap 4
  • آموزش نمایش متن در Progress Bar بوت استرپ 4

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

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

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

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

با کلاس .spinner-boarder، یک چرخنده در حال لود ایجاد کرده ایم:

مثال 1

1

نکته :

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

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

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

1مثال 2
1
1
1
1
1
1
1
1
1

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

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

مثال 3

1
1
1
1
1
1
1
1
1

آموزش ایجاد چرخنده Spiner با سایز کوچک در Bootstrap 4:

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

1مثال 4
1div class="spinner-border spinner-border-sm">
1

سایز پیش فرض Spinner یا چرخنده در بوت استرپ 4، بزرگ یا lg است.

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

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

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

مثال 5

1
1  
1
1 
1
1  
1  Loading..
1
1 
1
1  
1  Loading..
1
1 
1
1  
1  Loading..
1

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

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

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

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

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

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

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

      مثال 2

      1
      1  
    • Previous
    • 1  
    • 1
    • 1  
    • 2
    • 1  
    • 3
    • 1  
    • Next
    • 1

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

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

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

    مثال 3

    1
    1  
  • Previous
  • 1  
  • 1
  • 1  
  • 2
  • 1  
  • 3
  • 1  
  • Next
  • 1

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

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

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

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

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

      مثال 4

      1

      Large:

      1 
      1   
    • Previous
    • 1   
    • 1
    • 1   
    • 2
    • 1   
    • 3
    • 1   
    • Next
    • 1 
    1 
    1 

    Default:

    1 
    1   
  • Previous
  • 1   
  • 1
  • 1   
  • 2
  • 1   
  • 3
  • 1   
  • Next
  • 1 
    1 
    1 

    Small:

    1 
    1   
  • Previous
  • 1   
  • 1
  • 1   
  • 2
  • 1   
  • 3
  • 1   
  • Next
  • 1 

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

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

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

    1مثال 5
    1
    1
    1  
  • ...
  • 1
    1 
    1
    1
    1  
  • ...
  • 1
    1 
    1
    1
    1  
  • ...
  • 1

    راهنمایی :

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

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

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

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

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

    ۱۰۲ بازديد

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

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

     

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

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

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

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

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

     

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

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

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

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

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

    نکته :

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

    تذکر

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

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

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

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

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

    class="row">

    class="col-*-*">

    class="col-*-*">

    class="row">

    class="col-*-*">

    class="col-*-*">

    class="col-*-*">

    class="row">

    class="col">

    class="col">

    class="col">

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

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

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

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

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

    مثال 1

    class="row">

    class="col">.col

    class="col">.col

    class="col">.col

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

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

    مثال 2

    class="row">

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

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

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

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

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

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

     

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

    مثال 3

    class="row">

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

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

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

    آموزش Bootstrap

    ۱۰۸ بازديد

    آموزش Bootstrap

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

    بوت استرپ Bootstrap
    بوت استرپ 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:

    Column 1

     

    Lorem ipsum dolor sit amet, consectetur adipisicing elit...

     

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

     

    Column 2

     

    Lorem ipsum dolor sit amet, consectetur adipisicing elit...

     

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

     

    Column 3

     

    Lorem ipsum dolor sit amet, consectetur adipisicing elit...

     

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

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