باسلام، در این اموزش قصد داریم تا به بررسی اموزش نصب بوت استرپ و یا راه اندازی bootstrap در قدم اول بپردازیم.
برای دسترسی سریعتر به قسمت های مختلف این مقاله از لینک زیر میتوانید استفاده کنید.
- بوت استرپ چیست؟
- ریسپانسیو یا واکنشگرا چیست؟
- تفاوت بوت استرپت 3 با بوت استرپ 4
- چرا از بوت استرپ استفاده کنیم؟
- چگونه بوت استرپ را نصب کنیم؟
- افزودن فایل های cdn bootstrap
- دانلود بوت استرپ
- ساخت اولین صفحه با استفاده از بوت استرپ 4
- ویدیوی این قسمت
شما با مراجعه به مقاله ی ” بوت استرپ چیست ؟ ” میتوانید اطلاعاتی درباره ی بوت استرپ و تاریخچه ی ان بدست اورید. اما در این مقاله نیز به مختصر به ان خواهیم پرداخت پس تا انتهای مقاله با ما همراه باشید تا از اطلاعات ارزشمند bootstrap باخبر شوید.
بوت استرپ چیست ؟
- بوت استرپ یک فریم ورک رایگان است که برای ایجاد ظاهر هایی سریع و راحت استفاده میشود.
- bootstrap شامل الگوهای طراحی مبتنی بر html و css برای تایپوگرافی, فرم‌ها, دکمه‌ها, جداول, ناوبری, برجستگی تصویر و بسیاری دیگر و همچنین متصل شونده‌های اختیاری جاوا اسکریپت است.
- bootstrap همچنین به شما این اجازه را میدهد تا صفحات ریسپانسیو یا واکنشگرا نیز بسازید.
ریسپانسیو یا واکنشگرا چیست ؟
طراحی واکنشگرا یا ریسپانسیو به این معناست که صفحه ی سایت شما بطور اتوماتیک در دستگاه های مختلف مانند گوشی ، تبلت ، لب تاب ، تلویزیون و … در حالت و ابعاد ان دستگاه به نمایش دراید.
تفاوت بوت استرپ 3 با بوت استرپ 4
- bootstrap 4 جدیدترین نسخه بوت استرپ است. با اجزای جدید، سبک سریعتر و پاسخگویی بیشتر.
- bootstrap 4 از آخرین نسخه های پایدار تمام مرورگرها و سیستم عامل های اصلی پشتیبانی می کند. با این حال، اینترنت اکسپلورر 9 و پایین پشتیبانی نمی شود.
چرا از بوت استرپ استفاده کنیم؟
مزایای استفاده از bootstrap به شرح زیر است:
- به راحتی استفاده کنید : هرکس با اندک دانشی درباره ی html و css میتواند از بوت استرپ استفاده کند.
- طراحی واکنشگرا : شما قابلیت طراحی سایت برای گوشی های هوشمند و تلبت ها و … دارید.
- اولین رویکرد تلفن همراه: در بوت استرپ، سبک های اولیه تلفن همراه بخشی از چارچوب هسته ای هستند.
- سازگاری مرورگر: bootstrap 4 سازگار با تمام مرورگرهای مدرن (Chrome، Firefox، Internet Explorer 10+، Edge، Safari، Opera)
چگونه بوت استرپ را نصب کنیم ؟
برای استفاده از bootstrap در سایت خود ، شما دو راه خواهید داشت:
- افزودن فایل های cdn bootstrap
- دانلود از سایت getbootstrap.com
افزودن فایل های cdn bootstrap
اگر شما میخواهید فضای کمتری را اشغال کنید و فایل های bootstrap را در سایتتان قرار ندهید میتوانید از cdn ( Content Delivery Network) استفاده کنید.
MaxCDN پشتیبانی CDN برای CSS و جاوا اسکریپت Bootstrap را فراهم می کند. شما همچنین باید jQuery را وارد کنید:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- اخرین نسخه ی کامپایل شده و فشرده شده ی css --> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > <!-- کتاب خانه ی jQuery --> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1 /jquery.min.js" >< /script > <!-- Popper JS --> < script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7 /umd/popper.min.js" >< /script> <!-- اخرین نسخه ی کامپایل شده JavaScript --> < script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" >< /script > |
یکی از مزایای استفاده از cdn
بسیاری از کاربران در حال بارگیری Bootstrap 4 از MaxCDN هنگام بازدید از یک سایت دیگر. در نتیجه، هنگام بازدید از سایت شما از حافظه پنهان بارگذاری می شود، که منجر به زمان بارگذاری سریعتر می شود. همچنین، بیشتر CDN ها اطمینان می دهند که یک بار که کاربر یک پرونده را از آن درخواست می کند، آن را از سرور نزدیک به آنها خدمت می شود، که همچنین به زمان بارگیری سریع تر منجر می شود.
jQuery and Popper چیست؟
bootstrap 4 از jQuery و Popper.js برای اجزای جاوا اسکریپت استفاده می کند (مانند modals، tooltips، popovers و غیره). با این حال، اگر شما فقط از بخش CSS بوت استرپ استفاده کنید، به آنها نیازی ندارید.
موارد زیر برای اجرا نیاز به jQuery دارند:
- هشدارهای بسته
- دکمه ها و جعبه ها / دکمه های رادیویی برای تعویض حالت ها
- گردش برای اسلایدها، کنترل ها و شاخص ها
- بستن و باز کردن جبعه محتوا
- Dropdowns (همچنین نیاز به Popper.js برای موقعیت مطلوب)
- Modals (باز و بسته)
- Navbar (برای منوهای قابل انعطاف)
- راهنمای ابزار و popovers (همچنین نیاز به پوپر.js برای موقعیت مطلوب)
- Scrollspy برای رفتار حرکت و به روز رسانی ناوبری
دانلود بوت استرپ
برای دانلود bootstrap نیاز دارید تا به سایت https://getbootstrap.com مراجعه کنید و از طریق راهنمای سایت دانلود کنید.
ساخت اولین صفحه با استفاده از بوت استرپ 4
1.استفاده از html 5
bootstrap از المان های html و css مبنی بر html5 استفاده کرده است. برای استفاده از html5 نیاز است تا ویژگی doctype را در ابتدا قرار دهید و همچنین ویژگی lang را به درستی تنظیم کنید:
|
1 2 3 4 5 6 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> </html> |
2. استفاده از حالت موبایل در bootstrap 4
bootstrap ریسپانسیو طراحی شده است و برای استفاده از حالت موبایل از هسته ی فریم ورک موبایلی استفاده کرده است.
برای اطمینان از رندر مناسب و لمس زوم، برچسب <meta> زیر را در داخل عنصر <head> اضافه کنید:
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
بخش width = device-width عرض صفحه را تعیین می کند تا به عرض صفحه نمایش دستگاه (که بسته به دستگاه متفاوت باشد) را دنبال کند.
مقیاس initial-scale=1 مقدار اولیه زوم را تنظیم می کند زمانی که اولین صفحه توسط مرورگر بارگیری می شود.
3.مخزن (containers)
bootstrap 4 همچنین نیاز به یک عنصر حاوی محتویات سایت را دارد.
برای استفاده از کلاس container دو حالت وجود دارد:
- کلاس .container برای استفاده از ابعاد ثابت و واکنشگرا استفاده میشود.
- کلاس .container-fluid برای استفاده تمام عرض در ابعاد مختلف استفاده میشود.
برای درک بهتر این موضوع به دو مثال زیر توجه کنید.
در مثال اول یک صفحه با ابعاد ثابت طراحی شده است
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" >< /script > < script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" >< /script > < script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" >< /script > </head> <body> <div class="container"> <h1>My First Bootstrap Page</h1> <p>This part is inside a .container class.</p> <p>The .container class provides a responsive fixed width container.</p> </div> </body> </html> |
و در صفحه ی دوم ابعاد تمام صفحه و همچنین مانند حالت اول واکنشگرا طراحی شده است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" >< /script> < script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" >< /script> < script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" >< /script> </head> <body> <div class="container-fluid"> <h1>My First Bootstrap Page</h1> <p>This part is inside a .container-fluid class.</p> <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p> </div> </body> </html> |
ویدیوی این قسمت
امیدوارم این اموزش هم مثل باقی اموزش ها برای شما عزیزان مفید واقع شده باشه.
برای دیدن سایر قسمت‌ها میتوانید به دوره رایگان بوت استرپ 4 مراجعه کنید.
برای دیدن نمونه های بیشتر میتوانید به سایت getbootstrap مراجعه فرمایید.
موفق و پیروز باشید.
2 Comments
Join the discussion and tell us your opinion.
سلام خسته نباشید
من ی سوال داشتم سوالم اینه که من قبلا یک سایت نوشتم ولی بوت استرپ نیست میخواستم بدونم میتونم الان بوت استرپش کنم یعنی میشه سایت من که قبلا نوشتم رو الان بوت استرپ کنم با تشکر
باعرض سلام برای ریسپانسیو شدن سایتتون دوحالت میتونید داشته باشید ، یکی اینکه دستی کدهای مربوط به ریپانسیو شدن رو بنویسید یا از بوت استرپ استفاده کنید ، بوت استرپ قابلیت شخصی سازی داره یعنی شما مجبور نیستید حتما از پیش فرض های بوت استرپ استفاده کنید و کدهای اختصاصی خودتون رو هم در کنارش میتونید داشته باشید یا کدهای بوت استرپ رو به نحوه ی دلخواهتون اصلاح کنید.