وب

نصب بوت استرپ | آموزش نصب بوت استرپ + پکیج جامع آموزش بوت استرپ

قبل از آموزش نصب بوت استرپ لازم است مطالبی را در رابطه با این فریم ورک برای شما شرح دهیم. شاید اولین سوال شما این باشد که بوت استرپ چیست؟ بوت استرپ مجموعه ای کامل و آماده برای طراحی و ساخت وب سایت می باشد که موجب می شود طراحی یک سایت برای شما بسیار جذاب و آسان شود. نام بوت استرپ از یک ضرب المثل انگلیسی گرفته شده است که معنای آن یعنی فرد بتواند بدون کمک دیگران کار خود را انجام دهد. (توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

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

فیلم آموزش نصب بوت استرپ

 

در حال بارگذاری...

 

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

 

بوت استرپ یکی از جذاب ترین فریم ورک های طراحی وب

 

فریم ورک بوت استرپ با اغلب مرورگر ها سازگاری دارد. مزایایی که فریم ورک بوت استرپ دارد شامل موارد زیر است:

– کدنویسی بوت استرپ به گونه ای طراحی شده است که تمامی برنامه نویسان می توانند با آن کار کنند. فرقی نمی کند در چه سطحی باشند استفاده از بوت استرپ برای آنان آسان و جذاب است.

– بوت استرپ پشتیبانی بسیار خوبی از کدنویسان خود می کند و هر جای کار که به مشکل خوردید می توانید از پشتیبانی بوت استرپ استفاده کنید.

– دانلود و نصب بوت استرپ آسان است و شما را دچار دردسر نخواهد کرد.

– برای کار با بوت استرپ نیاز نیست شما دانش برنامه نویسی بالایی داشته باشید.

– شما می توانید تمامی المان های بوت استرپ را متناسب با نیاز و کاربرد خود سفارشی سازی کنید.

– در صورت نیاز نیز شما می توانید از افزونه های آماده ای که دیگر کدنویسان برای بوت استرپ نوشته اند استفاده کنید.

– همانطور که گفتیم مهم ترین ویژگی نصب بوت استرپ طراحی رسپانسیو سایت شماست.

– بوت استرپ دارای تم های بسیار متنوع و جالبی می باشد.

– بوت استرپ با دیگر فریم ورک ها نیز مانند React, Angular, jQuery سازگاری کامل دارد.

نصب بوت استرپ

دانلود و نصب و یادگیری بوت استرپ بسیار آسان است

با نصب بوت استرپ چه سایت هایی را می توان ساخت؟

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

نصب بوت استرپ

هرگونه سایت را با بوت استرپ به راحتی می توانید بسازید

طراحی بوت استرپ بر عهده ی توئیتر و دو مهندس کد نویس یعنی Mark Otto و Jacob Thornton بوده است. این دو بر آن شدند تا بوت استرپ را به عنوان یک فریم ورک متن باز در اختیار تمام کاربران قرار دهند.

ابزار های آموزش و نصب بوت استرپ

Bootply متداول ترین ابزار بوت استرپ است. با این ابزار شما می توانید تمامی پلاگین ها و کلاس های بوت استرپ را با آن تست کنید. با این فریم ورک شما می توانید حتی ابزار های مورد نیاز خود را بسازید. Codeply نیز ابزاری است همانند Bootply با این تفاوت که رابط کاربری و همچنین امکانات بیشتر. یکی دیگر از ابزار های کاربردی بوت استرپ که نوشتن کدهای گرید را برای شما آسان می کند و همچنین ستون های بوت استرپ را برای شما بسازد و در نهایت کد HTML مورد نظر شما را تولید کند.

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

بوت استرپ دارای کامپوننت های دیگری همچون Modal و Tooltip و Table نیز می باشد که این کامپوننت ها طراحی سایت را برای شما آسان و به امری جذاب تبدیل می کنند.

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

چگونگی نصب بوت استرپ

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

بسیاری از تم های جذاب به صورت رایگان در بوت استرپ موجود می باشد

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

محبوبیت نسخه ی ۳ نصب بوت استرپ

نسخه ی ۳ نصب بوت استرپ به این دلیل دارای محبوبیت بیشتری است که با مرورگر های قدیمی سازگاری بسیار بهتری دارد. با تمام این تفاسیر نسخه ۴ نصب بوت استرپ نیز دارای امکانات و قابلیت های بسیار ویژه ای می باشد. اگر برای شما پشتیبانی کردن از مرورگر های قدیمی اولویت بندی خاصی ندارد به راحتی می توانید از نسخه ۴ نصب بوت استرپ استفاده کنید و از امکانات و قابلیت های آن بهره مند شوید.

حال بعد از اینکه نسخه مورد نظر را برای نصب بوت استرپ انتخاب کردید نوبت آن است که نسخه ی مورد انتخاب خود را برای نصب بوت استرپ دانلود کنید.

برای نصب بوت استرپ راه های مختلفی پیش روی شماست:

– با استفاده کردن از روش CDN: شما کافی است در پیج خود در بوت استرپ به فایل های CDN موجود لینک دهی کنید و نصب بوت استرپ را انجام دهید. بعد به راحتی می توانید از بوت استرپ و امکانات بی نظیر آن استفاده کنید. اگر می خواهید برای استایل صفحات وب خود از نصب بوت استرپ کمک بگیرید کافی است فایل های CSS و در صورت لزوم های JS را استفاده کنید.

این یک روش آسان و راحت برای نصب بوت استرپ و استفاده از آن می باشد. اما استفاده از این روش می تواند برای تمرین کردن و مسلط شدن به کار با بوت استرپ برای شما مفید باشد. اگر قصد دارید از بوت استرپ برای پروژه های بزرگ و کاربردی استفاده کنید به شما پیشنهاد می کنیم روش دیگری را امتحان کنید.

– با استفاده کردن از روش Customizer:

اغلب برنامه نویسان و کد نویسانی که از بوت استرپ استفاده می کنند بوت استرپ را برای خود سفارشی سازی و یا شخصی سازی می کنند تا بتوانند پروژه خود را به نحو احسن به اتمام برسانند. با استفاده از این روش شما می توانید تمامی المان های موجود در بوت استرپ را برای خود سفارشی سازی و یا شخصی سازی کنید.

بهترین مزیتی که این روش برای نصب بوت استرپ دارد این است که اگر شما به یک سری از فایل ها نیاز ندارید به راحتی می توانید آن ها را حذف کنید و همچنین حجم دانلود خود را تا حدود بالایی کم کنید. نکته ی دیگر که در این جا شایان ذکر است این است که اگر استفاده و کار کردن با کدهای Customizer برای شما سخت است شما می توانید با یک ابزار به نام Live Customizer کار خود را تا حدودی راحت کنید و با این ابزار تغییراتی که در کد ها اعمال می کنید را به صورت زنده مشاهده نمایید.

– دانلود کردن فایل ها به روش مستقیم:

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

در صفحه ای که برای دانلود بوت استرپ قرار داده شده است شما می توانید هم هم سورس کامل بوت استرپ و همچنین فایل های کامپایل شده ی آن را به صورت کامل دانلود و نصب نمایید. این روش نصب بوت استرپ برای کسانی مفید و کاربردی است که در کدنویسی مهارت دارند و می توانند با دانلود سورس کامل بوت استرپ تغییرات مورد نظر خود را اعمال کرده و نتیجه ی نهایی را مشاهده کنند.

– استفاده کردن از پکیج منیجر:

روش دیگر نصب بوت استرپ استفاده کردن از پکیج منیجر است. اگر شما از کاربران و برنامه نویسان حرفه ای هستید می توانید ابزار پکیج منیجر (Package Manager ) که ابزار مدیریت پکیج ها می باشد را دانلود کنید . این ابزار کار موجب می شود تا کار با کتابخانه ها و فریم ورک های مختلف برای شما بسیار راحت شود. ابتدا ممکن است یادگیری کار با این ابزار برای شما سخت باشد اما اگر شما یک کدنویس حرفه ای هستید به راحتی می توانید با نوشتن یک خط فرمان تمامی فایل های مورد نیاز خود را به پروژه تان اضافه کنید. این روش را برای برنامه نویسان و کدنویسان حرفه ای توصیه می کنیم.

وارد کردن کد های HTML در فرآیند تکمیل نصب

یکی از بهترین مزایای بوت استرپ طراحی رسپانسیو آن است

بعد از این که شما روش دانلود و نصب بوت استرپ را انتخاب کردید حال نوبت آن است که کد های HTML خود را وارد کنید. ابتدا برای این کار شما می بایست فایل های CSS خود را در تگ <head> قرار دهید و در صورتی که از دیگر ابزار های بوت استرپ که جزء ابزار های جانبی هستند استفاده می کند فایل های جاوا اسکریپت خود را قبل از آن که تگ <body> را ببندید استفاده کنید و آن ها را وارد کنید.

نکته ی دیگری که در آموزش نصب بوت استرپ شایان ذکر است این می باشد که اگر قصد دارید سایت طراحی شده توسط شما در دیگر دستگاه ها مانند تلفن های همراه هوشمند و تبلت ها نیز همان گونه که مایل هستید نمایش داده شود باید دستور viewport meta را وارد کنید و سپس برای اجرا و استفاده از جاوا اسکریپت کتابخانه ی jQuery را نیز وارد کنید.

حال برای شروع به کار کردن نصب بوت استرپ باید قالب شروع آن را وارد کنید که به شرح زیر می باشد:

 

در رابطه با نصب بوت استرپ باید بگوییم اگر شما سورس بوت استرپ و فایل های آن را به صورت کامل دانلود کرده اید و قصد دارید فایل های LESS یا SASS همان گونه که مطابق با نظر شماست ویرایش و ادیت کنید در ابتدا باید با یک کامپایلر مناسب این فایل ها را به فایل های CSS تبدیل کنید.

بوت استرپ یک فریم ورک طراحی سایت متن باز است

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

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

نوشته های مشابه

1 دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا