چکیده این مطلب :

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

برای بکارگیری بوت استرپ در پروژه ها، کافیست این 3 مرحله ساده را انجام دهید

1.       دانلود فایل های مورد نیاز برای شروع پروژه

برای دریافت فایل های فریمورک بوت استرپ کافیست به وب سایت getbootstrap.com مراجعه کرده و از طریق لینک دانلود قرار گرفته در بالای صفحه نسبت به دانلود فایل ها اقدام نمایید. سپس فایل Zip دریافت شده را باز کرده و فایل های ذکر شده در بالا را در پوشه های مناسب از پروژه قرار دهید.


2.      آماده سازی فایل ها برای شروع بکارگیری

پروژه خود را ایجاد کرده و پوشه های مورد نیاز را بسازید. سپس فایل هایی که دانلود کرده اید را در پوشه های مناسب قرار دهید. یعنی فایل bootstrap.min.css را در پوشه css و فایل های jquery.js، bootstrap.js و popper.js را در پوشه js قرار دهید.

  

3.     بکارگیری بوت استرپ در صفحات وب سایت

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

در ادامه برای تکمیل اتصال وب سایت به بوت استرپ، مراحل زیر را دنبال کنید.

·         فایل bootstrap.min.css را در قسمت head صفحه معرفی کنید.

·         فایل jquery.js را در انتهای تگ body بعد از سایر محتوا معرفی کنید.

·         فایل popper.js را نیز پس از آن تعریف کنید.

·         در مرحله آخر فایل bootstrap.js را پس از آن ها به صفحه معرفی کنید.

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

تا این مرحله ساختار صفحه وب شما به شکل زیر می باشد:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.3.1.min.js"></script>
<title>Zarrafeh.com Project Title</title>
</head>
<body>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

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

در نظر داشته باشید کدهای جاوا اسکریپت را در پایان صفحه و درست قبل از بسته شدن تگ body قرار دهید همچنین اولویت فایل های جاوا اسکریپت مهم است، پس فایل jquery حتما باید اول قرار گیرد و بعد از آن Popper.js و Bootstrap.js و سپس جاوا اسکریپت هایی که ما برای صفحه ایجاد می کنیم.

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

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

برای بهبود مقالات بعدی، لطفا نظرات و پیشنهادات ارزشمند خود را برای ما ارسال کنید.

نظر خود را ارسال کنید

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

ورود به ناحیه کاربری

هنوز در سایت عضو نشده ام!