آموزش سایت بوت استرپ ۵ به صورت کامل

آموزش سایت بوت استرپ ۵ به صورت کامل

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

بوت استرپ (Bootstrap) چیست؟ در چه مواردی کاربرد دارد؟ و چگونه از آن برای طراحی وب سایت استفاده می شود.اینها سئوالاتی هستند که ذهن بسیاری از طراحان تازه کار وب سایت های اینترنتی و یا کسانی که مشغول یادگیری طراحی وب سایت هستند، را به خود مشغول می کند.

امروزه در دنیای طراحی وب سایت های اینترنتی چند نکته اهمیت زیادی دارد:

•  نحوه طراحی و قالب وب سایت
• داینامیک یا استاتیک بودن
• زبان برنامه نویسی سمت سرور
•  ریسپانسیو (responsive design) بودن سایت
•  سئو وب سایت
• سرعت Loading سایت

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

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

اینجاست که در حقیقت نسخه هایی از HTML و CSS که تاکنون استاندارد شده و ارائه شده اند، به طراحان کمک چندانی نمی توانند بکنند و طراحان باید از تکنیک ها و ابزارهایی جهت ریسپانسیو کردن وب سایت خود استفاده کنند. تاکنون ابزارها و فریمورک های متعددی جهت این امر عرضه شده یکی از پرطرفدارترین و بهترین آنها بوت استرپ ( Bootstrap 5) است. پیشتر در مقاله بوت استرپ (Bootstrap 5) در طراحی سایت چیست ؟ برخی از نکات کلی در رابطه با این فریمورک و تاریخچه شکل گیری آن را به شما معرفی کرده ایم. اما در این بخش تلاش داریم تا باقی نکات و کاربردهای بوت استرپ (Bootstrap 5) در طراحی وب سایت های ریسپانسیو را به شما معرفی کنیم. البته این نکته را هم به یاد داشته باشید که هر وب سایتی که به صورت ریسپانسیو یا واکنش گرا طراحی شده لزوما به این معنی نیست که از بوت استرپ در طراحی آن استفاده شده و یا برعکس، اینگونه نیست که هر سایتی که از بوت استرپ استفاده کرده باشد، هیچ مشکلی در زمینه ریسپانسیو بودن نداشته باشد و بطور کامل طراحی آن واکنش گرا باشد. استفاده از بوت استرپ ۵  (Bootstrap 5)  در طراحی سایت نیاز به تجربه و دانش دارد تا امکانات آن به نحو بهینه ای بکار گرفته شود.

در طول سالهای گذشته استفاده از بوت استرپ در وب سایت های ایرانی مانند بسیاری از کشورهای جهان گسترش پیدا کرده بطوری که در حال حاضر به یکی از الزامات وب سایت های جدید تبدیل شده است. به همین جهت به کسانی در حال یادگیری اصول طراحی سایت هستند معمولا توصیه می شود که پس از یادگیری مبانی این علم، از جمله اچ تی ام ال و سی اس اس (HTML , CSS) جهت یادگیری بوت استرپ نیز اقدام کنند.

بوت استرپ چه قابلیت هایی دارد؟

با استفاده از بوت استرپ ۵ (Bootstrap 5)  می توان بسیاری از عناصر مهم وب سایت ها را بصورت ریسپانسیو طراحی کرد. بطوری که با استفاده از فریمورک و کتابخانه آن می توان دکمه ها، فرمها، تب ها (Tab)، منوها، اسلایدرها (Slider) و بخش های مختلف سایت از جمله هدر (Header)، فوتر (footer) وغیره را براحتی بصورت ریسپانسیو طراحی کرد و یا تصاویر را نیز بصورت ریسپانسیو (جهت نمایش در سایزهای مختلف صفحه نمایش) در آورد.

در حقیقت استفاده از چنین ابزاری جهت ریسپانسیو کردن وب سایت ها یک امتیاز بزرگ محسوب می شود به خصوص با توجه به اینکه خوشبختانه بوت استرپ، متن باز (open source) است و استفاده و نصب آن نیز کاملا رایگان است. به این ترتیب براحتی می توان از آن استفاده کرد. نکته مهم اما اینجاست که باید طراحان به نکات استفاده از فریمورک بوت استرپ توجه کافی داشته باشند. در صورت استفاده صحیح از امکانات و کلاس های بوت استرپ معمولا مشکل چندانی از لحاظ طراحی ریسپانسیو به خصوص در حالت نمایش موبایل و یا تبلت پیش نمی آید و اغلب نیاز چندانی به استفاده از تکنیک ها و امکانات دیگری مانند مدیا (media) نیست.

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

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

طرز نصب و استفاده از بوت استرپ:

در ابتدا باید به سایت رسمی بوت استرپ بروید و آخرین نسخه آنرا را دانلود کنید. ما توی جلسات گذشته به صورت کامل آموزش دادیم: البته هنگام دانلود چند گزینه پیش رو دارید:

•  دانلود فایل بوت استرپ ( آموزش راه اندازی بوت استرپ ۵ به صورت کامل )
• دانلود سورس کد
•  دانلود نسخه Sass

اگر تازه کار هستید پیشنهاد می کنیم که فایل اصلی بوت استرپ را دانلود و استفاده کنید. سپس فایل های بوت استرپ را باید از حالت فشرده درآورده و در فولدرهای مختلف سورس سایت خود کپی کنید. برای مثال فایل هایی مانند bootstrap.css و bootstrap.min.css در فولدر CSS و فایل های bootstrap.js و bootstrap.min.js نیز در فولدر مربوط به scripts یا جاوااسکریپت کپی شوند. همچنین فونت های بوت استرپ نیز باید در فولدر fonts کپی شوند. به یاد داشته باشید که بوت استرپ ارتباط تنگاتنگی با جاوااسکریپت دارد و استفاده از کتابخانه های جاوا اسکریپت (از جمله JQUERY) نه تنها مشکلی جهت نصب و استفاده از بوت استرپ ایجاد نمی کند بلکه حتی با استفاده از همه آنها می توان بهترین و زیباترین وب سایت های ریسپانسیو را طراحی کرد.

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