خوش آموز درخت تو گر بار دانش بگیرد، به زیر آوری چرخ نیلوفری را


bootstrap آموزش فارسی

bootstrap آموزش فارسی
در این مقاله به bootstrap آموزش فارسی می پردازیم. اما قبل از آن ابتدا بیایید نگاهی کلی به bootstrap و دلیل اهمیت آن بیندازیم. بوت استرپ یک فریم ورک رایگان و منبع باز css می باشد که کارکرد اصلی آن رسپانسیو بودن (responsive) آن است. منظور از رسپانسیو بودن اینست که با توجه به ابعاد صفحۀ نمایش به صورت اتوماتیک در بهترین و زیباترین چینش ممکن قرار می گیرد. اگر سایتی را که با استانداردهای bootstrap طراحی شده باشد، در گوشی موبایل یا تبلت باز کنید، ظاهر زیبا و یک دستی را مشاهده خواهید کرد. اگر همان سایت را در کامپیوترها و لپ تاپ های مختلف با رزولوشن های صفحه نمایش متفاوت نیز باز کنید، هر بار ظاهر زیبا و یک دستی را مشاهده خواهید نمود. همین موضوع به ظاهر ساده، تا قبل از ایجاد بوت استرپ یک چالش بسیار بزرگ برای برنامه نویسان وب بود. آن ها باید وقت و انرژی زیادی را صرف فائق آمدن بر چالش های مربوط به یک دست کردن ظاهر برای دستگاه ها و صفحه نمایش های متفاوت می کردند و معمولاً هم نمی توانستند به طور صد در صد از این هفت خوان اسفندیار سربلند بیرون بیایند و در حین کار بالاخره در جایی مشکلی بیرون می زد.

یکی از مزایای بوت استرپ برای ما فارسی زبان ها اینست که این فریم ورک قدرتمند زبان فارسی را نیز پشتیبانی می کند. البته در نسخه های اولیۀ آن این پشتیبانی به صورت مستقیم نبود و توسط اشخاص یا شرکت های ثالث، فارسی سازی بر روی bootstrap صورت پذیرفته بود، اما بالاخره خود بوت استرپ دست به کار شد و با ویژگی RTL خیال تمامی فارسی زبان ها و البته تمامی کشورهای دیگری هم که نگارش زبان آن ها از راست به چپ می باشد را آسوده کرد. همین ابتدای کار یک نکتۀ مهم را به شما بگویم و آن اینکه در حالت کلی هیچ تفاوتی بین آموزش bootstrap فارسی و آموزش خود bootstrap اصلی که به زبان انگلیسی است وجود ندارد و تمامی اصول بین این دو نسخه کاملاً یکسان است. فقط در هنگام فارسی سازی چند ویژگی کوچک را تنظیم می کنید و تمام. bootstrap خودش بقیۀ امور را رتق و فتق می کند. در این bootstrap آموزش فارسی ما بر روی کلیات مهمی از آن تمرکز می کنیم و چارچوب اصلی کار با آن را به شما آموزش می دهیم. اگر می خواهید بیشتر وارد جزییات شوید و تسلط کاملی بر این ابزار ارزشمند پیدا کنید، می توانید به کمک آموزش بوت استرپ (Bootstrap) برای طراحی صفحات وب که در فرادرس منتشر شده است، به این مهم نائل شوید.


دانلود و نصب bootstrap


مسلماً قدم اول در استفاده از بوت استرپ اینست که آن را داشته باشیم. همانطو که در مقدمۀ bootstrap آموزش فارسی اشاره کردیم، بوت استرپ یک فریم ورک css می باشد. البته باید اشاره کنم که کدهای آن صرفاً css نیستند و کدهای جاوا اسکریپت نیز در آن یافت می شوند. در مجموع بوت استرپ تعداد قابل توجهی فایل css و جاوا اسکریپت دارد که همگی در داخل یک پوشه و در مسیر وب سایت شما باید قرار بگیرند. برای دانلود این فایل ها می توانید از این لینک آخرین نسخۀ آن را که در زمان نگارش این مقاله نسخۀ \(\text{5.1.3}\) می باشد، دانلود کنید. به هیچ وجه توصیه نمی کنم bootstrap را از سایت های متفرقه دانلود کنید و همواره سعی کنید آن را از سایت اصلی خودش getbootstrap.com بگیرید.

در عنوان این بخش از مقاله اشاره به دانلود و نصب bootstrap کردیم. در مورد نصب bootstrap، هیچ کار خاصی لازم نیست انجام دهید و کافیست صرفاً پوشۀ مربوطه را در مسیر فایل های وب سایتتان قرار دهید و سپس به آن رفرنس بدهید. البته توجه داشته باشید که الزامی ندارید حتماً پوشۀ bootstrap را در مسیر برنامۀ تان قرار دهید و مستقیماً می توانید به CDN آن نیز اشاره کنید. اما از آنجا که CDN های خارجی عمدتاً بر روی سرورهای مطرح دنیا همچون سرورهای آمازون قرار گرفته اند، هر از چند گاهی برای ما ایرانی ها بازی در می آورند و به دلایل مختلف همچون تحریم ها دسترسی آی پی های ایران را مسدود می کنند. برای همین توصیه من اینست که سعی کنید فایل مربوطه را در داخل پوشۀ وب سایتتان داشته باشید. بسته به نسخه ای از بوت استرپ که دانلود و استفاده می کنید، معمولاً باید به یک یا دو فایل css و جاوا اسکریپت در ابتدای صفحۀ وبتان رفرنس بدهید و همچنین معمولاً به دو فایل جاوا اسکریپت نیز در انتهای صفحۀ تان رفرنس بدهید. با توجه به اینکه این قسمت رفرنس دهی در نسخه های متفاوت کد متفاوتی خواهد داشت، تعمداً از اشارۀ مستقیم به کد آن صرفنظر کرده ام.

ساختار گرید در بوت استرپ (Grid system)


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


ساختار گرید bootstrap از یک سری containers (ظرف ها)، rows (ردیف ها) و columns (ستون ها) استفاده می کند تا چیدمان صفحه را انجام دهد. به مثال زیر دقت کنید.

bootstrap آموزش فارسی
خروجی این کدها در صفحۀ html شما تصویر زیر می شود.

bootstrap آموزش فارسی
کاری که ما در اینجا انجام دادیم این بود که ابتدا یک div با کلاس container معرفی کردیم. سپس در داخل آن یک div دیگر با کلاس row تعریف کردیم و در نهایت در داخل آن سه div با کلاس col معرفی نمودیم. خروجی همان طور که می بینید سه ستون یک دست و هم اندازه می باشد که صفحۀ ما را به سه قسمت مساوی تقسیم کرده است. در bootstrap صفحه به 12 قسمت مساوی تقسم می شود و در واقع شما می توانید ماکزیمم تا 12 ستون داشته باشید. وقتی وارد کار می شوید خواهید دید که خود این عدد 12 چقدر زیبا و کاربردی است و چقدر فکر پشت آن بوده است. همانطور که می دانید عدد 12 دارای مضرب های زیر می باشد:
$$
12 = 1 \times 12\\
12 = 2 \times 6\\
12 = 3 \times 4\\
12 = 4 \times 3\\
12 = 6 \times 2\\
12 = 12 \times 1
$$
یعنی شما به کمک عدد 12 می توانید صفحه را به 6 حالت مختلف چینش کنید. توجه داشته باشید که در اینجا با کسرها سرو کار داریم و نه خود اعداد. به عنوان مثال شما می توانید صفحه را به سه قسمت مساوی تقسیم کنید که هر کدام از این قسمت ها به اندازۀ \(\frac{1}{3}\) صفحه اصلی می باشند. یا می توانید صفحه را به هر کدام از حالت های مختلف دیگر که در فاکتورهای عدد 12 موجودند تقسیم کنید. البته این تمام ماجرا نیست. از آنجا که عناصر طراحی شما می توانند به صورت تو در تو باشند، شما این قابلیت را نیز دارید که چینش ها را به صورت درختی و تو در تو انجام دهید. به عنوان مثال ابتدا بیایید دو ستون بسازید و سپس یکی از این دو ستون را به سه قسمت مساوی دیگر تقسیم کنید و بسته به نیازهای طراحی تان همین طور چیدمان را ادامه دهید.

اما کار اصلی توسط یک سری کلاس های دیگر css اتفاق می افتد که شامل 6 کلاس زیر می باشند:

  • کلاس xs که مخفف Extra small (بسیار کوچک) می باشد.
  • کلاس sm که مخفف Small (کوچک) است.
  • کلاس md که مخفف Medium (متوسط) است.
  • کلاس lg که مخفف Large (بزرگ) می باشد.
  • کلاس xl که مخفف Extra large (بسیار بزرگ) می باشد.
  • و در پایان کلاس xxl که مخفف Extra extra large (بسیار بسیار بزرگ) می باشد.

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

bootstrap آموزش فارسی
خروجی این کدها، تصویر زیر می شود.

bootstrap آموزش فارسی
فراموش نکنید که بخش زیادی از bootstrap مبتنی بر جاوا اسکریپت می باشد. اگر مشتاقید که در ارتباط با جاوا اسکریپت دانش تان را ارتقاء دهید، می توانید از مجموعه آموزش جاوا اسکریپت (JavaScript) در فرادرس استفاده کنید.


کلاس xs زمانی اعمال می شود که عرض صفحه نمایش شما کمتر از \(576\) پیکسل باشد، کلاس sm زمانی اعمالی می شود که عرض صفحه نمایش شما بزرگتر یا مساوی با \(576\) پیکسل باشد. کلاس md برای وقتی است که عرض صفحه نمایش شما بزرگتر یا مساوی با \(768\) پیکسل باشد. کلاس lg با عرض بزرگتر یا مساوی با \(992\) پیکسل کار می کند. xl برای عرض بزرگتر یا مساوی با \(1200\) پیکسل و در نهایت کلاس xxl برای صفحه نمایش های بزرگتر یا مساوی با \(1400\) پیکسل است.

اگر به کدهای آخرین مثال نگاه کنید، گاهی اوقات کلاس های sm را همراه با اعداد نوشته ایم. به عنوان مثال \(\text{col-sm-8}\) یا \(\text{col-sm-4}\)، در این حالات دقیقاً از همان روش تقسیم صفحه به \(12\) قسمت مساوی استفاده شده است. یعنی یکی از ستون ها \(8\) قسمت از \(12\) قسمت ممکن در عرض صفحه را گرفته اند، یعنی \(\frac{8}{12}\) یا بهتر است بگوییم \(\frac{2}{3}\) و ستون دیگر \(\frac{4}{12}\) یا \(\frac{1}{3}\) باقی ماندۀ صفحه را گرفته است. دقت کنید که نمی توانید اعدادی خارج از بازۀ \(1\) تا \(12\) را در این کلاس ها قرار دهید و در ضمن مجموع ستون هایی که در کنار هم در زیر یک div با کلاس row قرار می دهید نیز نباید از \(12\) بیشتر شود.

تا اینجای bootstrap آموزش فارسی، با کارکرد کلی سیستم گرید bootstrap آشنا شدید. همچنین با نحوۀ اعمال کلاس ها بر روی ستون ها نیز آشنا شدید. بد نیست بدانید به روش مشابهی می توانید تعداد ستون ها را در کلاس row نیز مشخص سازید. به مثال زیر دقت کنید.

bootstrap آموزش فارسی
خروجی این کدها در تصویر زیر نمایان است.

bootstrap آموزش فارسی
همانطور که می بینید، این بار در کلاس row از کلاس دومی با نام \(\text{row-cols-4}\) استفاده کرده ایم. با این کار مشخص ساخته ایم که این ردیف ما دارای \(4\) ستون مساوی می باشد و دیگر در قسمت ستون ها از اشاره به اندازۀ هر ستون پرهیز کرده ایم. البته این تنها حالت ممکن نیست و شما خودتان هم می توانید حالات گوناگون را تست کنید و با آزمون و خطا هم که شده، الگوهای به کار رفته در سیستم گرید bootstrap را درک کنید. بعد از درک این الگوها به سادگی می توانید با به کار گیری چند کلاس ساده، تمامی عناصر طراحی تان را کاملاً به صورت واکنش گرا چیدمان کنید. در اینجا شاید برایتان سوال پیش آید که اگر در طراحی این عناصر اشتباه کنم و اعدادی مثلاً بیش از عرض صفحه بدهم، چه رخ می دهد. در این حالت به صورت اتوماتیک توسط bootstrap آن عنصری که از عرض صفحه بیشتر شده است به خط بعدی می رود و اتفاق خاصی نمی افتد. مثلاً ممکن است با چیزی شبیه تصویر زیر مواجه شوید.

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


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


نمایش دیدگاه ها (0 دیدگاه)

دیدگاه خود را ثبت کنید:

انتخاب تصویر ویرایش حذف
توجه! حداکثر حجم مجاز برای تصویر 500 کیلوبایت می باشد.


دسته بندی مطالب خوش آموز