با سلام خدمت کاربران عزیز چیتاسافت. به مجموعه مطالب آموزش Bootstrap خوش آمدید. در این مطالب سعی خواهیم کرد مفاهیم Bootstrap را از پایه تا مرحله پیش رفته خدمت شما عزیزان ارائه کنیم. در قسمت اول Bootstrap را معرفی کرده و کاربرد های آن را برایتان شرح خواهیم داد.
Bootstrap چیست؟
- Bootstrap یک پلتفرم رایگان و سمت-کاربر برای طراحی سریع تر و راحت تر وبسایت است.
- Bootstrap دارای تمپلت های HTML و CSS برای متون، فرم ها، دکمه ها، جداول، و … است.
- Bootstrap به شما این امکان را می دهد که به راحتی وبسایت های واکنش گرا (Responsive) طراحی کنید.
طراحی واکنش گرا چیست؟
طراحی واکنش گرا یعنی طراحی وبسایت هایی که به طور اتوماتیک با هر گونه صفحه نمایشی – از سایز های کوچک موبایل ها گرفته تا سایز های بزرگ سیستم های خانگی – تطابق پیدا می کنند.
تاریخچه Bootstrap
Bootstrap توسط Mark Otto و Jacob Thornton در توییتر توسعه یافت و در سال ۲۰۱۱ در GitHub به عنوان یک پروژه متن-باز منتشر شد.
در ژوئن سال ۲۰۱۴ Bootstrap پروژه شماره ۱ در GitHub بود.
چرا باید از Bootstrap استفاده کنیم؟
یک سری مزایا و قابلیت ها باعث شدند تا آموزش Bootstrap را در چیتاهاست پیگیری کنیم:
- استفاده آسان: هر کسی با دانش محدود در زمینه HTML و CSS می تواند استفاده از Bootstrap را شروع کند.
- قابلیت های واکنش گرا: Bootstrap می تواند به آسانی وبسایت هایی ایجاد کند که با هر وسیله ای قابل دسترسی باشند.
- رویکرد Mobile-First: در Bootstrap استایل هایی که با نمایشگر های موبایل همخوانی دارند، اولویت بیشتری دارند.
- سازگاری با مرور گرها: Bootstrap با تمامی مرور گر های مدرن همخوانی و سازگاری دارد.
Bootstrap را از کجا دریافت کنیم؟
دو روش برای استفاده از Bootstrap در وبسایت تان وجود دارد:
- می توانید Bootstrap را از وبسایت getbootstrap.com دانلود کنید.
- یا این که آن را از یک CDN دریافت کنید.
دانلود Bootstrap
اگر می خواهید Bootstrap را دانلود کرده و خودتان در سرور های تان داشته باشید، به آدرس getbootstrap.com رفته و با راهنمایی های موجود در همانجا، اقدام کنید.
استفاده از طریق CDN
اگر نمی خواهید Bootstrap را دانلود کرده و در سرور خودتان آپلود کنید، می توانید از یک CDN استفاده کنید. MaxCDN امکان استفاده از Bootstrap با CSS و جاوا اسکریپت را به شما می دهد.
در صورت تمایل می تواند jQuery را نیز به CSS و جاوا اسکریپت اضافه کنید.
کد های زیر جهت اضافه کردن Bootstrap با CSS، جاوا اسکریپت، و jQuery هستند:
<div class="w3-code notranslate htmlhigh"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </div class="w3-code notranslate htmlhigh">
یکی از مزایای استفاده از CDN
بسیاری از کاربران اینترنت، قبل از این که از سایت شما بازدید کنند، از یک سایت دیگر بازدید کرده اند که آن هم برای Bootstrap از CDN استفاده کرده است. به همین دلیل هنگام باز کردن وبسایت شما، CDN از حافظه Cache آن ها باز می شود.
این مساله موجب می شود سرعت وبسایت شما برای بسیاری از کاربران بالا باشد.
به همین دلیل پیشنهاد می کنیم به جای استفاده از Bootstrap در سرور خودتان، آنرا از یک CDN بگیرید.
چرا باید jQuery را نصب کنیم؟
Bootstrap برای این که بتواند از پلاگین های جاوا اسکریپت استفاده کند، از jQuery کمک می گیرد.
پس اگر می خواهید فقط از قسمت های CSS موجود در Bootstrap استفاده کنید، نیازی به اضافه کردن jQuery نیست.
ایجاد اولین صفحه وب با استفاده از Bootstrap
بیایید اولین قدم از آموزش Bootstrap را در همین مطلب شروع کنیم.
برای این که یک صفحه ساده با استفاده از Bootstrap ایجاد کنیم:
- تگ مربوط به معرفی HTML5 را اضافه کنید
Bootstrap از المنت های HTML و CSS استفاده می کند که به HTML5 Doctype نیاز دارند.
همیشه HTML5 Doctype و صفت زبان (در مثال زیر انگلیسی) را در ابتدای صفحه قرار دهید:<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> </html>
- Bootstrap 3 قابلیت Mobile-First داردBootstrap ورژن ۳ برای پشتیبانی از دستگاه های قابل حمل طراحی شده است.
برای اطمینان از اضافه شدن قابلیت های دستگاه های قابل حمل، تگ متای زیر را در<head>قرار دهید:<meta name="viewport" content="width=device-width, initial-scale=1">
قسمت
width=device-widthتعیین می کند که عرض صفحه به تبعیت از عرض دستگاه باشد.
قسمتinitial-scale=1نیز مقیاس بزرگ نمایی را معادل یک قرار می دهد. کاربر می تواند با استفاده از لمس دو انگشتی میزان بزرگ نمایی را تغییر دهد. - Container ها
Bootstrap همچنین به یک المنت نیاز دارد تا محتوای سایت در آن قرار بگیرد.
دو نوع کلاس Container وجود دارد:۱- کلاس.containerبرای تعیین یک عرض واکنش گرای ثابت
۲- کلاس.container-fluidبرای یک عرض متغیر که تمام صفحه را در بر می گیرد.نکته: شما نمی توانید Container ها را درون یکدیگر قرار دهید.
دو مثال از صفحات ساده Bootstrap
در مثال زیر یک صفحه ساده وب با استفاده از Bootstrap را مشاهده می کنید که در آن از Container ثابت استفاده شده است:
<!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/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div> </body> </html>
و مثال زیر هم یک صفحه ساده، اما این بار با استفاده از یک Container متغیر:
<!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/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div> </body> </html>
در این مطلب یک معرفی نسبتا کوتاه از Bootstrap و کاربرد های آن داشتیم. حتی قسمت کوچکی از آموزش BootStrap را نیز شروع کردیم. در مطالب آینده بیشتر در این باره خواهیم آموخت. همراه ما باشید.
