آموزش Bootstrap قسمت اول: مقدمهای بر بوت استرپ
آنچه در این مقاله میخوانید
Toggleسلام به تمامی کاربران سایت تاتوره، به اولین قسمت از آموزش Bootstrap خوش آمدید.
در این قسمت به این پرسش پاسخ میدیم که Bootstrap دقیقا چیه؟
قبل از اون باید به این نکته اشاره کنم که برای یادگیری Bootstrap بهتره زبانهای HTML و CSS رو کمی بلد باشید.
البته
اگر هم با هیچ کدوم از این زبانها آشنایی ندارید، هیچ ایرادی نداره!! این آموزش میتونه شروع خیلی خوبی برای هر دوی این زبانها باشه.
Bootstrap چیست؟
با توجه به گفتههای وبسایت رسمی Bootstrap،
ریسپانسیو کردن سایت، ساخت پروژه های موبایلیِ ریسپانسیو با محبوب ترین کتابخانه دنیا !!!
چی شد؟ یکم سخت شد!
خب بذارید سادهتر و تاتورهای بگم. Bootstrap یه کتابخونه CSS (و جاوا اسکریپت) ئه که به ما در طراحی وبسایت کمک میکنه. من واژه کمک رو برای این استفاده کردم چون قرار نیست همه کارها رو به بوت استرپ بسپاریم.
امّا
بیاید باز هم کمی راحتتر بگیم. بوت استرپ یک فایل CSS ئه، و یک فایل javascrip که به فایل HTML خودتون اضافه میکنید. همین
این دو فایل
که خیلی هم طویل هستن شامل تمام چیزهایی میشن که ما نیاز داریم، تمام ویژگیها، عملکردها و در کل همه چی. البته حدودا ۱۵ تا فایل کوچیکه که کامپایل شدن. اما خب اینطور نیست که ما این دو فایل رو به اچ تی ام ال خودمون اضافه میکنیم و کارمون تمومه. نه، بلکه به این صورته که ابتدا تگهای اچ تی ام ال خودمون رو مینویسیم و بعد با نوشتن کلاسهای خاصی به این تگها ویژگیهایی که میخوایم رو میدیم.
بنابراین
وقتی از بوت استرپ مثلا در سایت تاتوره استفاده میکنیم، در واقع دو فایل رو به سایتمون اضافه کردیم و با کلاس نویسی ویژگیهایی که میخوایم رو اضافه میکنیم. بنابراین HTML ما یه چیزی شبیه به این میشه:
همونطور که دقت میکنید
زیر کلاسهایی که برای اچ تی ام ال خودمون نوشتم خط کشیدم. اینا کلاسهای بوت استرپ هستن. صدها کلاس مانند اینها وجود داره که به تگهامون اضافه میکنیم و ما قراره در این آموزش یاد بگیریم که چطور از کلاسها استفاده کنیم، هر کلاس چه ویژگیای داره و با استفاده ازشون وبسایتی حتی مثل تاتوره بسازیم! در کل هدف این آموزش هم همینه که از این کلاسها استفاده کنیم بدون اینکه هیچ کد CSS ای بنویسم.
در زیر میتونید یک وبسایت رو ببینید که با استفاده از بوت استرپ ساخته شده. ما قراره در آخر آموزش این وبسایت رو یکبار دیگه باهم بسازیم.
هدر رو مشاهده میکنید. پایین تر دکمهای با عنوان “عضو شوید” یا بالای اون کلمه “شفق قطبی” و یا هر چیز دیگهای، با استفاده از بوت استرپ استایل داده شده.
به این کارد توجه کنید. تمامش با استفاده از کلاس نویسی بوت استرپ ساخته شده.
یا این دکمه که باز هم با کلاس نویسی بوت استرپ ساخته شده.
در زیر هم پر کاربرد ترین ویژگی بوت استرپ رو میبینید. یعنی Grid System که خیلی خیلی کاربردیه. پایینتر بازهم بهش میپردازیم
در آخر هم این فرم رو میبینید که ساختش با بوت استرپ بسیار راحت شده.
در ابتدا حرف از ریسپانسیو بودن سایت هم زدیم. در زیر میتونید به خوبی مشاهده کنید که وقتی صفحه بزرگ کامپیوتر ما به صفحه کوچکی مثل موبایل تغییر پیدا میکنه، سایت به بهترین شکل خودش رو با عرض صفحه نمایش وفق میده.
Greed System
بیاید در مورد مهم ترین قابلیت بوت استرپ صحبت کنیم. به مثال های زیر توجه کنید
مشاهده میکنید که با تغییر سایز، همه چیز بهینه سازی شد. مثلا گالری عکسهایی که در ۴ ستون و ۲ ردیف بودند، با کوچک شدن سایز صفحه به ۲ ستون و ۴ ردیف تغییر پیدا کردند یا کارد هایی (card) که در کنار هم بودند با کوچک شدن به صورت ستونی در اومدن.
یا یه مثال بهتر
همین سایت تاتوره، وقتی تو صفحه نمایش بزرگ سایت تاتوره رو مشاهده کنید، سایدبار در این مقاله در سمت چپ صفحه خواهد بود. اما وقتی با تبلت و یا گوشی همراهتون وارد تاتوره بشید، سایدبار در زیر این نوشته قرار میگیره. گفتم این مقاله چون میدونستم سایدبار داره ولی توی همین سایت تاتوره بعضی مقالات سایدبار ندارن پس مقاله درستش رو ببینید!
خب فکر میکنم برای این قسمت کافی باشه. در قسمت بعد کمی بیشتر با بوت استرپ آشنا میشیم.
میتونید قسمتهای دیگر آموزش بوت استرپ رو در سایدبار انتخاب کنید.
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.