راه اندازی و شروع کار با بوت استرپ Bootstrap – آموزش بوت استرپ

راه اندازی و شروع کار با بوت استرپ Bootstrap - آموزش بوت استرپReviewed by همیار پروژه on Sep 10Rating: 5.0راه اندازی و شروع کار با بوت استرپ Bootstrapراه اندازی و شروع کار با بوت استرپ Bootstrap - آموزش بوت استرپ

نحوه راه اندازی و شروع کار با بوت استرپ Bootstrap

راه اندازی و شروع کار با بوت استرپ Bootstrap - آموزش بوت استرپ

راه اندازی و شروع کار با بوت استرپ Bootstrap

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

در جلسه پیش بوت استرپ را به شما معرفی کردیم همچنین مزیت ها و ویژگیهای این فریمورک را نیز شرح دادیم در جلسه دوم از این دوره میخواهیم نحوه راه اندازی و شروع کار با بوت استرپ Bootstrap را به شما آموزش دهیم.

در قدم اول باید بوت استرپ را دانلود کنیم یا از با استفاده از CDN ها بوت استرپ را به صفحه خود اضافه کنیم

راه اندازی و شروع کار با بوت استرپ Bootstrap - آموزش بوت استرپ

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

دو راه برای شروع استفاده از بوتسترپ بر روی سایت ها وجود دارد.
شما می توانید:

دانلود بوتسترپ از سایت getbootstrap.com
بوتسترپ را بوسیله یک CDN اضافه کنید

 

دانلود کردن بوتسترپ
در صورتی که می خواهید بوتسترپ را دانلود کرده و آن را در هاست خود ذخیره کنید، می توانید به سایت getbootstrap.com بروید و دستورالعمل های نوشته شده در آنجا را انجام دهید.

اضافه کردن بوتسترپ از یک CDN
اگر نمی خواهید بوتسترپ را دانلود کنید و آن را در هاست خود ذخیره کنید، می توانید آن را از یک CDN(شبکه ی تحویل محتوا) اضافه کنید.
سایت MaxCDN، پشتیبانی CDN را برای فایل های CSS و JAVASCRIPT از بوتسترپ ارائه می دهد و همچنین جی کوئری را نیز ارائه می دهد.

یک امتیاز در استفاده از bootstrap CDN:
بسیاری از کاربران هنگام بازدید از یک سایت دیگر، بوتسترپ را از MaxCDN دانلود کرده اند. پس بعنوان یک نتیجه، می توان گفت: افراد هنگام بازدید از سایت شما، بوتسترپ را از کَش دانلود کرده اند، و این باعث افزایش سرعت لود می شود.

همیار پروژهایجاد اولین صفحه ی وب با بوتسترپ

1. اضافه کردن اعلان Doctype :
بوتسترپ از عناصر HTML و CSS استفاده می کند و این دستورات، نیاز دارند تا از اعلان doctype استفاده کنیم.
سعی کنید همیشه اعلان doctype را در ابتدای صفحه اضافه کنید، و همچنین خصوصیت lang و مجموعه کاراکترهای صحیح(منظور دستور charset است) را نیز وارد کنید:

 

2. بوتسترپ 3، پاسخگرا به موبایل می باشد:
بوتسترپ 3 طوری طراحی شده است، تا نسبت به دستگاه های موبایل واکنش گرا باشد. استایل های پاسخگرا به مبایل قسمتی از هسته ی این فریم ورک می باشند.
برای اطمینان از ارائه ی مناسب ویژگی ها و زوم کردن لمسی، تگ <meta> زیر را درون عنصر <head> اضافه کنید:

پیشنهاد ویژه :   پروژه محاسبه چندین عمل ریاضی در++C

قسمت width=device-width عرض صفحه را نسبت به عرض دستگاه ست می کند(که بر اساس نوع دستگاه تغییر خواهد کرد).
قسمت initial-scale=1 هنگامی که صفحه ی ابتدا، توسط مرورگر لود می شود، میزان زوم اولیه را ست می کند.

 

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

همیار پروژه

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

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

موفق باشید  😀 

 

منبع : www.w3schools.com

همیار پروژه Bootstrap

دیدگاه خود را بیان کنید